Toggle navigation
Test
By
A***8
2018-10-25 09:25:10
脚本
16
21
作品使用的第三方脚本
/dep/echarts/latest/extension/bmap.min.js,http://api.map.baidu.com/api?v=2.0&ak=ZUONbpqGBsYGXNIYHicvbAbM
数据管理
上传数据
支持小于 5M 任意格式（csv, xlsx, json, xml, ...）的数据文件
上传后可以通过生成的文件链接异步获取托管的数据。
历史数据
0 条
无历史数据
代码修改记录
信息提示
保存作品
对当前截图不满意？你还可以
上传本地截图
重新截图
作品名称
作品描述
标签
geo
grid
legend
markLine
markPoint
bar
effectScatter
line
lines
map
timeline
title
toolbox
tooltip
visualMap
作品默认版本
最新
16
15
14
13
12
11
10
9
8
7
6
5
4
3
2
1
20:11:45
图表已生成
整理代码
刷新
代码
var data1 = ['三号线', [{ "coords": [ [ 113.32769, 23.125212 ], [ 113.328028, 23.136921 ], [ 113.3382, 23.13898 ], [ 113.346151, 23.14054 ], [ 113.351857, 23.146269 ], [ 113.358452, 23.158306 ], [ 113.350307, 23.176045 ] ] }]]; var datapoint1 = [{ "value": [ 113.32769, 23.125212 ], "name": "珠江新城" }, { "value": [ 113.350307, 23.176045 ], "name": "天河客运站" }] var data2 = ['六号线', [{ "coords": [ [ 113.350307, 23.176045 ], [ 113.355914, 23.184202 ], [ 113.372236, 23.196087 ], [ 113.384183, 23.197317 ], [ 113.402365, 23.199766 ], [ 113.416819, 23.197275 ], [ 113.439609, 23.194286 ], [ 113.457791, 23.186772 ], [ 113.46672, 23.178157 ], [ 113.474517, 23.176355 ], [ 113.488503, 23.181238 ] ] }]]; var datapoint2 = [{ "value": [ 113.350307, 23.176045 ], "name": "天河客运站" }, { "value": [ 113.488503, 23.181238 ], "name": "萝岗" }] var data3 = ['391路', [{ "coords": [ [113.5352066, 23.1698527], [113.5301390, 23.1695774], [113.5242051, 23.1710013], [113.5236076, 23.1726326], [113.5127640, 23.1778281], [113.5096090, 23.1803153], [113.5080335, 23.1808791], [113.5047048, 23.1824788], [113.4997247, 23.1826623], [113.4952235, 23.1829922], [113.4901282, 23.1846170], [113.4876787, 23.1811736], [113.4833532, 23.1801204], [113.4793212, 23.1784349], [113.4734506, 23.1700603], [113.4711015, 23.1686428], [113.4653959, 23.1694023], [113.4591097, 23.1698489], [113.4535153, 23.1703851], [113.4458190, 23.1713310], [113.4421358, 23.1713980], [113.4370798, 23.1715604], [113.4309212, 23.1717505], [113.4244679, 23.1726804], [113.4224563, 23.1739380] ] }]]; var datapoint3 = [{ "value": [113.5352066, 23.1698527], "name": "中海公寓站(北)" }, { "value": [113.4876787, 23.1811736], "name": "地铁萝岗站" }, { "value": [113.4224563, 23.1739380], "name": "科学大道口站" }] var data4 = ['548路', [{ "coords": [ [113.4222313, 23.1744197], [113.4204878, 23.1697276], [113.4198529, 23.1636295], [113.4166406, 23.1586654], [113.4144325, 23.1554801], [113.4173513, 23.1508492], [113.4126686, 23.1516326], [113.4129813, 23.1412616], [113.4068143, 23.1387582], [113.4001717, 23.1356509], [113.3981990, 23.1293344], [113.3971500, 23.1246249], [113.3954519, 23.1227628], [113.3902270, 23.1240886], [113.3862720, 23.1251337], [113.3770134, 23.1269386], [113.3734965, 23.1280926], [113.3653469, 23.1300478], [113.3522268, 23.1320371], [113.3462929, 23.1323772], [113.3361652, 23.1332102], [113.3294455, 23.1336229] ] }]]; var datapoint4 = [{ "value": [113.4224563, 23.1739380], "name": "科学大道口站" }, { "value": [113.3294455, 23.1336229], "name": "人民日报华南分社站1" }] var ePoint = [{ name: '天河客运站', value: [113.350307, 23.176045] }, { name: '科学大道口站', value: [113.4224563, 23.1739380] }, { name: '萝岗', value: [113.488503, 23.181238] }] var linepoint1 = [{ "coords": [ [113.32195, 23.134856], [113.32195, 23.120233], [113.340329, 23.118937], [113.33988, 23.132181], [113.32195, 23.134856] ] }] var linepoint2 = [{ "coords": [ [113.529358, 23.16898], [113.532664, 23.161969], [113.543516, 23.162933], [113.54251, 23.174611], [113.529358, 23.16898] ] }] var sePoint = [{ name: '起点', value: [113.5352066, 23.1698527], itemStyle: { normal: { color: '#00B2EE' } } }, { "value": [113.32769, 23.125212], "name": "终点", itemStyle: { normal: { color: '#CD3333' } } }] myChart.setOption({ animation: true, bmap: { center: [113.37751, 23.212117], zoom: 13, roam: true, mapStyle: { styleJson: [{ "featureType": "land", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#f5f5f5ff" } }, { "featureType": "water", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#bedbf9ff" } }, { "featureType": "green", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#d0edccff" } }, { "featureType": "building", "elementType": "geometry", "stylers": { "visibility": "on" } }, { "featureType": "building", "elementType": "geometry.fill", "stylers": { "color": "#ffffffb3" } }, { "featureType": "building", "elementType": "geometry.stroke", "stylers": { "color": "#dadadab3" } }, { "featureType": "subwaystation", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#b15454B2" } }, { "featureType": "education", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#e4f1f1ff" } }, { "featureType": "medical", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#f0dedeff" } }, { "featureType": "scenicspots", "elementType": "geometry", "stylers": { "visibility": "on", "color": "#e2efe5ff" } }, { "featureType": "highway", "elementType": "geometry", "stylers": { "visibility": "off", "weight": 4 } }, { "featureType": "highway", "elementType": "geometry.fill", "stylers": { "color": "#f7c54dff" } }, { "featureType": "highway", "elementType": "geometry.stroke", "stylers": { "color": "#fed669ff" } }, { "featureType": "highway", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "highway", "elementType": "labels.text.fill", "stylers": { "color": "#8f5a33ff" } }, { "featureType": "highway", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "highway", "elementType": "labels.icon", "stylers": { "visibility": "on" } }, { "featureType": "arterial", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 2 } }, { "featureType": "arterial", "elementType": "geometry.fill", "stylers": { "color": "#d8d8d8ff" } }, { "featureType": "arterial", "elementType": "geometry.stroke", "stylers": { "color": "#ffeebbff" } }, { "featureType": "arterial", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "arterial", "elementType": "labels.text.fill", "stylers": { "color": "#525355ff" } }, { "featureType": "arterial", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "local", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 1 } }, { "featureType": "local", "elementType": "geometry.fill", "stylers": { "color": "#d8d8d8ff" } }, { "featureType": "local", "elementType": "geometry.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "local", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "local", "elementType": "labels.text.fill", "stylers": { "color": "#979c9aff" } }, { "featureType": "local", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "railway", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 1 } }, { "featureType": "railway", "elementType": "geometry.fill", "stylers": { "color": "#949494ff" } }, { "featureType": "railway", "elementType": "geometry.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "subway", "elementType": "geometry", "stylers": { "visibility": "on", "weight": 1 } }, { "featureType": "subway", "elementType": "geometry.fill", "stylers": { "color": "#d8d8d8ff" } }, { "featureType": "subway", "elementType": "geometry.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "subway", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "subway", "elementType": "labels.text.fill", "stylers": { "color": "#979c9aff" } }, { "featureType": "subway", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "continent", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "continent", "elementType": "labels.icon", "stylers": { "visibility": "on" } }, { "featureType": "continent", "elementType": "labels.text.fill", "stylers": { "color": "#333333ff" } }, { "featureType": "continent", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "city", "elementType": "labels.icon", "stylers": { "visibility": "on" } }, { "featureType": "city", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "city", "elementType": "labels.text.fill", "stylers": { "color": "#454d50ff" } }, { "featureType": "city", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }, { "featureType": "town", "elementType": "labels.icon", "stylers": { "visibility": "on" } }, { "featureType": "town", "elementType": "labels", "stylers": { "visibility": "on" } }, { "featureType": "town", "elementType": "labels.text.fill", "stylers": { "color": "#454d50ff" } }, { "featureType": "town", "elementType": "labels.text.stroke", "stylers": { "color": "#ffffffff" } }] } }, tooltip: {}, series: [{ type: 'lines', coordinateSystem: 'bmap', data: data1[1], polyline: 'false', name: data1[0], lineStyle: { normal: { color: '#FF0000', width: 6, opacity: 0.8, } } }, { type: 'lines', coordinateSystem: 'bmap', data: data2[1], polyline: 'false', name: data2[0], lineStyle: { normal: { color: '#FF0000', width: 6, opacity: 0.8, } } }, { type: 'lines', coordinateSystem: 'bmap', data: data3[1], polyline: 'false', name: data3[0], lineStyle: { normal: { color: '#9400D3', width: 6, opacity: 0.8, } }, effect: {//按照data3[1]画出的坐标点走 constantSpeed: 50, show: true, trailLength: 0, symbolSize: 20, symbol: 'arrow' } }, { type: 'lines', coordinateSystem: 'bmap', data: data4[1], polyline: 'false', name: data4[0], lineStyle: { normal: { color: '#9400D3', width: 6, opacity: 0.8, } } }, { type: 'lines', coordinateSystem: 'bmap', data: linepoint1, polyline: 'false', lineStyle: { normal: { color: '#00008B', width: 6, opacity: 0.8, curveness: 1 } } }, { type: 'lines', coordinateSystem: 'bmap', data: linepoint2, polyline: 'false', lineStyle: { normal: { color: '#00008B', width: 6, opacity: 0.8, curveness: 0.2 } } }, { type: 'scatter', coordinateSystem: 'bmap', symbolSize: [10, 5], label: { normal: { textStyle: { fontWeight: 'bold', color: 'red' }, show: true, position: 'right', formatter: '{b}' } }, itemStyle: { normal: { color: 'black', borderWidth: 1, borderColor: '#fff' } }, data: datapoint1 }, { type: 'scatter', coordinateSystem: 'bmap', symbolSize: [10, 5], label: { normal: { textStyle: { fontWeight: 'bold', color: 'red' }, show: true, position: 'right', formatter: '{b}' } }, itemStyle: { normal: { color: 'black', borderWidth: 1, borderColor: '#fff' } }, data: datapoint2 }, { type: 'scatter', coordinateSystem: 'bmap', symbolSize: [10, 5], label: { normal: { textStyle: { fontWeight: 'bold', color: '#9400D3' }, show: true, position: 'left', formatter: '{b}' } }, itemStyle: { normal: { color: 'black', borderWidth: 1, borderColor: '#fff' } }, data: datapoint3 }, { type: 'scatter', coordinateSystem: 'bmap', symbolSize: [10, 5], label: { normal: { textStyle: { fontWeight: 'bold', color: '#9400D3' }, show: true, position: 'left', formatter: '{b}' } }, itemStyle: { normal: { color: 'black', borderWidth: 1, borderColor: '#fff' } }, data: datapoint4 }, { type: 'effectScatter', coordinateSystem: 'bmap', symbolSize: 15, data: ePoint, showEffectOn: 'render', rippleEffect: { brushType: 'stroke' }, hoverAnimation: true, label: { normal: { formatter: '{b}', position: 'right', show: true } }, itemStyle: { normal: { color: 'purple', shadowBlur: 10, shadowColor: '#333' } }, zlevel: 1 }, { type: 'scatter', coordinateSystem: 'bmap', symbolSize: 80, symbol: 'pin', label: { normal: { textStyle: { fontWeight: 'bold', color: '#fff' }, show: true, position: 'inside', formatter: '{b}', } }, data: sePoint }] });