折线图实现的长沙地铁图echarts 配置项内容和展示
配置项如下
//地铁站点坐标信息来自百度地铁图：http://lbsyun.baidu.com/index.php?title=subway
var data = [{
"name": "地铁2号线",
"data": [{
"name": "梅溪湖西",
"value": [
92.89999999999998,
426
]
},
{
"name": "麓云路",
"value": [
189.10000000000002,
426
]
},
{
"name": "文化艺术中心",
"value": [
278.79999999999995,
426
]
},
{
"name": "梅溪湖东",
"value": [
375,
426
]
},
{
"name": "望城坡",
"value": [
471.19999999999993,
426
]
},
{
"name": "金星路",
"value": [
563.5,
426
]
},
{
"name": "西湖公园",
"value": [
655.8,
426
]
},
{
"name": "溁湾镇",
"value": [
748.0999999999999,
426
]
},
{
"name": "橘子洲",
"value": [
840.4,
426
]
},
{
"name": "湘江中路",
"value": [
932.7,
426
]
},
{
"name": "五一广场",
"value": [
1025,
426
]
},
{
"name": "芙蓉广场",
"value": [
1117.3,
426
]
},
{
"name": "迎宾路口",
"value": [
1209.6,
426
]
},
{
"name": "袁家岭",
"value": [
1301.9,
426
]
},
{
"name": "长沙火车站",
"value": [
1394.2,
426
]
},
{
"name": "锦泰广场",
"value": [
1486.5,
426
]
},
{
"name": "万家丽广场",
"value": [
1578.8000000000002,
426
]
},
{
"name": "",
"value": [
1623,
426
]
},
{
"name": "",
"value": [
1649,
432.5
]
},
{
"name": "",
"value": [
1660.7,
452
]
},
{
"name": "人民东路",
"value": [
1660.7,
522.2
]
},
{
"name": "长沙大道",
"value": [
1660.7,
640.5
]
},
{
"name": "沙湾公园",
"value": [
1660.7,
790
]
},
{
"name": "",
"value": [
1660.7,
907
]
},
{
"name": "",
"value": [
1667.2,
939.5
]
},
{
"name": "杜花路",
"value": [
1689.3000000000002,
952.5
]
},
{
"name": "长沙火车南站",
"value": [
1785.5,
952.5
]
},
{
"name": "光达",
"value": [
1881.7,
952.5
]
}
]
},
{
"name": "磁浮快线",
"data": [{
"name": "磁浮高铁站",
"value": [
1785.5,
952.5
]
},
{
"name": "",
"value": [
1785.5,
817.3
]
},
{
"name": "",
"value": [
1792,
795.2
]
},
{
"name": "",
"value": [
1811.5,
784.8
]
},
{
"name": "",
"value": [
2146.9,
784.8
]
},
{
"name": "",
"value": [
2169,
777
]
},
{
"name": "磁浮榔梨",
"value": [
2175.5,
749.8299999999999
]
},
{
"name": "",
"value": [
2175.5,
554.8299999999999
]
},
{
"name": "",
"value": [
2184.6000000000004,
527.4
]
},
{
"name": "",
"value": [
2210.6000000000004,
522.33
]
},
{
"name": "",
"value": [
2530.4,
522.33
]
},
{
"name": "",
"value": [
2561.6000000000004,
514.4
]
},
{
"name": "",
"value": [
2569.4,
483.33
]
},
{
"name": "",
"value": [
2569.4,
406.5
]
},
{
"name": "",
"value": [
2572,
387
]
},
{
"name": "",
"value": [
2585,
379.33
]
},
{
"name": "磁浮机场站",
"value": [
2621.4,
379.33
]
}
]
},
{
"name": "地铁1号线",
"data": [{
"name": "开福区政府",
"value": [
1025,
38.599999999999966
]
},
{
"name": "马厂",
"value": [
1025,
101
]
},
{
"name": "北辰三角洲",
"value": [
1025,
167.3
]
},
{
"name": "开福寺",
"value": [
1025,
233.6
]
},
{
"name": "文昌阁",
"value": [
1025,
299.9
]
},
{
"name": "培元桥",
"value": [
1025,
364.9
]
},
{
"name": "五一广场",
"value": [
1025,
426
]
},
{
"name": "黄兴广场",
"value": [
1025,
498.8
]
},
{
"name": "南门口",
"value": [
1025,
578.1
]
},
{
"name": "侯家塘",
"value": [
1025,
658.7
]
},
{
"name": "南湖路",
"value": [
1025,
739.3
]
},
{
"name": "黄土岭",
"value": [
1025,
825.1
]
},
{
"name": "涂家冲",
"value": [
1025,
916.1
]
},
{
"name": "铁道学院",
"value": [
1025,
1005.8000000000001
]
},
{
"name": "友谊路",
"value": [
1025,
1090.3000000000002
]
},
{
"name": "省政府",
"value": [
1025,
1169.6
]
},
{
"name": "桂花坪",
"value": [
1025,
1250.2
]
},
{
"name": "大托",
"value": [
1025,
1325.6
]
},
{
"name": "中信广场",
"value": [
1025,
1398.4
]
},
{
"name": "尚双塘",
"value": [
1025,
1471.2
]
}
]
}
];
for (var i = 0; i < 3; i++) {
for (var j = 0; j < data[i].data.length; j++) {
data[i].data[j].value.push(Math.round(Math.random() * 200));//进站人数
data[i].data[j].value.push(Math.round(Math.random() * 200));//出站人数
}
}
var scale = 0.07;
var bgColor = '#ddd';
option = {
backgroundColor:bgColor,
"series": [{
"type": "line",
"name": "地铁2号线",
"data": data[0].data,
"smooth": true,
"symbolSize": 1,
}, {
"type": "line",
"name": "磁浮快线",
"data": data[1].data,
"smooth": true,
"symbolSize": 1,
}, {
"type": "line",
"name": "地铁1号线",
"data": data[2].data,
"smooth": true,
"symbolSize": 1,
}, {
"type": "effectScatter",
"name": "地铁2号线",
"data": data[0].data,
"smooth": true,
"label": {
"normal": {
"show": true,
formatter: "{b}",
fontSize: 14,
position: "top",
offset: [0, -20]
},
"emphasis": {
"show": true,
fontSize: 25,
backgroundColor: "#000"
}
},
"symbolSize": function(e) {
return (e[2] + e[3]) * scale;
}
}, {
"type": "effectScatter",
"name": "磁浮快线",
"data": data[1].data,
"smooth": true,
"label": {
"normal": {
"show": true,
formatter: "{b}",
fontSize: 14,
position: "right",
offset: [20, 0]
},
"emphasis": {
"show": true,
fontSize: 25,
backgroundColor: "#fff"
}
},
"symbolSize": function(e) {
return (e[2] + e[3]) * scale;
}
}, {
"type": "effectScatter",
"name": "地铁1号线",
"data": data[2].data,
"smooth": true,
"label": {
"normal": {
"show": true,
formatter: "{b}",
fontSize: 14,
position: "left",
offset: [-15, 0]
},
"emphasis": {
"show": true,
fontSize: 25,
backgroundColor: "#000"
}
},
"symbolSize": function(e) {
return (e[2] + e[3]) * scale;
}
}],
"title": [{
"text": "长沙地铁图",
"left": "center"
}],
"xAxis": [{
"show": false,
"data": {},
"position": "bottom",
"boundaryGap": true,
"splitNumber": 5,
"type": "value",
"name": "",
"axisLabel": {
"rotate": 0
},
"gridIndex": 0,
"scale": true
}],
"yAxis": [{
"show": false,
"position": "left",
"scale": true,
"splitNumber": 5,
"type": "value",
"name": "",
"gridIndex": 0
}],
"legend": {
"data": [{
"name": "地铁2号线"
}, {
"name": "磁浮快线"
}, {
"name": "地铁1号线"
}],
"left": "right",
"right": "auto",
"top": "auto",
"bottom": "auto"
},
"tooltip": {
"show": true,
"trigger": "item",
formatter: function(e) {
var dataIn = data[e.seriesIndex - 3].data[e.dataIndex].value[2];
var dataOut = data[e.seriesIndex - 3].data[e.dataIndex].value[3];
return "<span style='color:" + e.color + "'>█ </span>" + e.seriesName + " - " + e.name + "<br>进站：" + dataIn + "<br>出站：" + dataOut + "<br>总和：" + (dataIn + dataOut);
}
},
"dataZoom": [{
"show": false,
"type": "slider",
"start": 0,
"end": 100,
"xAxisIndex": 0,
"realtime": true
}, {
"disabled": false,
"type": "inside",
"start": 0,
"end": 100,
"xAxisIndex": 0,
"filterMode": "none"
}, {
"disabled": false,
"type": "inside",
"start": 0,
"end": 100,
"yAxisIndex": 0,
"filterMode": "none"
}]
}
截图如下
