折线图实现的长沙地铁图ECharts Gallery

20:11:45图表已生成
代码
//地铁站点坐标信息来自百度地铁图：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"
    }]
}
作品使用的第三方脚本

数据管理

历史数据 0 条

代码修改记录

信息提示

保存作品
