清末“闯关东”路线图

描述:当前是关于Echarts图表中的 路径图 示例。
 
            var planePath_s = "image:///asset/get/s/data-1597596595435-DWPvo1QV8.png";

var planePath_l = "image:///asset/get/s/data-1597594271499-52GJjfmHO.png";

var uploadedDataURL = "/asset/get/s/data-1595333738804-TWg_bHnhl.json";


$.get(uploadedDataURL, function(geoJson) {

    myChart.hideLoading();

    echarts.registerMap('china', geoJson);

    var allData = {
        "citys": [{
                "name": "山东",
                "value": [116.965026962616, 36.6662886548544, 2],
                "symbolSize": 3.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "北京",
                "value": [116.387734895952, 39.906319964806, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "天津",
                "value": [117.222165116914, 39.114854285361, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "秦皇岛",
                "value": [119.591779628446, 39.9248919981598, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            }, {
                "name": "沈阳",
                "value": [123.4040661, 41.7872311, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "锦州",
                "value": [122.110296101187, 41.686858907347, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "通辽",
                "value": [122.281812278308, 43.6109907948307, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "四平",
                "value": [124.367490399413, 43.1617950492302, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            }, {
                "name": "白城",
                "value": [122.8318184, 45.61366081, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "河北",
                "value": [114.492413166608, 38.0435975887442, 2],
                "symbolSize": 3.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "昂昂溪",
                "value": [123.96786831452, 47.3431555994515, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "烟台",
                "value": [121.382662696445, 37.527997391355, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "青岛",
                "value": [120.355687992507, 36.1104711759537, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "威海卫",
                "value": [122.110757368119, 37.4948913170806, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "日照",
                "value": [119.448028015085, 35.4220736013667, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "大连",
                "value": [121.557560137686, 38.8992537407634, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "长春",
                "value": [125.303707455, 43.8841501254403, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "哈尔滨",
                "value": [126.639518338973, 45.7555310873232, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "营口",
                "value": [122.259052384403, 40.674867331565, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "丹东",
                "value": [124.346896415523, 40.0865911647227, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "符拉迪沃斯托克",
                "value": [131.885218977188, 43.1155387018385, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },
            {
                "name": "潍坊",
                "value": [119.090501261986, 36.7026001304917, 4],
                "symbolSize": 1.5,
                "itemStyle": {
                    "normal": {
                        "color": "#a6c84c"
                    }
                }
            },

        ],

        "moveLines_l": [{
                "fromName": "山东",
                "toName": "北京",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [116.387734895952, 39.906319964806]
                ]
            },
            {
                "fromName": "山东",
                "toName": "天津",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [117.222165116914, 39.114854285361]
                ]
            },
            {
                "fromName": "山东",
                "toName": "山海关",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [119.591779628446, 39.9248919981598]
                ]
            },
            {
                "fromName": "山东",
                "toName": "沈阳",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [123.4040661, 41.7872311]
                ]
            },
            {
                "fromName": "山东",
                "toName": "通辽",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [122.281812278308, 43.6109907948307]
                ]
            },
            {
                "fromName": "山东",
                "toName": "洮南",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [122.8318184, 45.61366081]
                ]
            },
            {
                "fromName": "山东",
                "toName": "打虎山",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [122.110296101187, 41.686858907347]
                ]
            },
            {
                "fromName": "山东",
                "toName": "四平街",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [124.367490399413, 43.1617950492302]
                ]
            },
            {
                "fromName": "河北",
                "toName": "卢沟桥",
                "coords": [
                    [114.492413166608, 38.0435975887442],
                    [116.387734895952, 39.906319964806]
                ]
            },
            {
                "fromName": "河北",
                "toName": "沈阳",
                "coords": [
                    [114.492413166608, 38.0435975887442],
                    [123.4040661, 41.7872311]
                ]
            },
            {
                "fromName": "河北",
                "toName": "打虎山",
                "coords": [
                    [114.492413166608, 38.0435975887442],
                    [122.110296101187, 41.686858907347]
                ]
            },
            {
                "fromName": "河北",
                "toName": "洮南/洮安",
                "coords": [
                    [114.492413166608, 38.0435975887442],
                    [122.8318184, 45.61366081]
                ]
            },
            {
                "fromName": "河北",
                "toName": "昂昂溪",
                "coords": [
                    [114.492413166608, 38.0435975887442],
                    [123.96786831452, 47.3431555994515]
                ]
            },

        ],

        "moveLines_s": [{
                "fromName": "烟台",
                "toName": "大连",
                "coords": [
                    [121.382662696445, 37.527997391355],
                    [121.557560137686, 38.8992537407634]
                ]
            },
            {
                "fromName": "青岛",
                "toName": "大连",
                "coords": [
                    [120.355687992507, 36.1104711759537],
                    [121.557560137686, 38.8992537407634]
                ]
            },
            {
                "fromName": "威海卫",
                "toName": "大连",
                "coords": [
                    [122.110757368119, 37.4948913170806],
                    [121.557560137686, 38.8992537407634]
                ]
            },
            {
                "fromName": "石臼港",
                "toName": "大连",
                "coords": [
                    [119.448028015085, 35.4220736013667],
                    [121.557560137686, 38.8992537407634]
                ]
            },
            {
                "fromName": "大连",
                "toName": "长春",
                "coords": [
                    [121.557560137686, 38.8992537407634],
                    [125.303707455, 43.8841501254403]
                ]
            },
            {
                "fromName": "大连",
                "toName": "滨江",
                "coords": [
                    [121.557560137686, 38.8992537407634],
                    [126.639518338973, 45.7555310873232]
                ]
            },
            {
                "fromName": "烟台",
                "toName": "营口",
                "coords": [
                    [121.382662696445, 37.527997391355],
                    [122.259052384403, 40.674867331565]
                ]
            },
            {
                "fromName": "烟台",
                "toName": "安东",
                "coords": [
                    [121.382662696445, 37.527997391355],
                    [124.346896415523, 40.0865911647227]
                ]
            },
            {
                "fromName": "烟台",
                "toName": "海参崴",
                "coords": [
                    [121.382662696445, 37.527997391355],
                    [131.885218977188, 43.1155387018385]
                ]
            },
            {
                "fromName": "山东",
                "toName": "羊角沟",
                "coords": [
                    [116.965026962616, 36.6662886548544],
                    [119.090501261986, 36.7026001304917]
                ]
            },
            {
                "fromName": "河北",
                "toName": "天津",
                "coords": [
                    [114.492413166608, 38.0435975887442],
                    [117.222165116914, 39.114854285361]
                ]
            },
            {
                "fromName": "天津",
                "toName": "营口",
                "coords": [
                    [114.492413166608, 38.0435975887442],
                    [122.259052384403, 40.674867331565]
                ]
            },
            {
                "fromName": "天津",
                "toName": "大连",
                "coords": [
                    [114.492413166608, 38.0435975887442],
                    [121.557560137686, 38.8992537407634]
                ]
            }

        ]
    };

    option = {
        backgroundColor: '#444444',
        title: [{
            text: '清末“闯关东”路线图',
            bottom: '30%',
            right: '6%',
            textStyle: {
                color: '#fff',
                fontSize: 30
            },
            subtextStyle: {
                color: "rgba(255,255,255,0.5)",
                fontSize: 13
            }
        },{
            text: '',
            subtext: '数据来源:《近代“闯关东”移民外在特征探》 范立君 谭玉秀',
            bottom: '25%',
            right: '2%',
            subtextStyle: {
                color: "rgba(255,255,255,0.5)",
                fontSize: 15
            }
        }],
        legend: {
            show: true,
            right:'9%',
            //orient: 'vertical',
            bottom: '5%',
            //left: 'right',
            data: ['地点', '陆路', '水路'],
            textStyle: {
                fontSize:15,
                color: '#fff'
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: function(params, ticket, callback) {
                console.log(params);
                if (params.seriesType == "effectScatter") {
                    return "线路:" + params.data.name + "" + params.data.value[2];
                } else if (params.seriesType == "lines") {
                    return params.data.fromName + " -> " + params.data.toName + "<br />";
                } else {
                    return params.name;
                }
            }

        },
        geo: {
            left: '-2%',
            top: '52%',
            show: true,

            zoom:3.3,
            map: 'china',
            label: {
                emphasis: {
                    show: false
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    areaColor: '#363636',
                    borderColor: '#444444'
                },
                emphasis: {
                    areaColor: '#363636'
                }
            }
        },
        series: [{
                name: '地点',
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 1,
                rippleEffect: {
                    //brushType: 'stroke',
                    period: 4,
                    scale: 30
                },
                label: {
                    emphasis: {
                        show: true,
                        position: 'top',
                        formatter: '{b}'
                    }
                },
                //symbolSize: 5,
                showEffectOn: 'render',
                itemStyle: {
                    normal: {
                        color: '#a6c84c'
                    }
                },
                data: allData.citys
            },
            // {
            //     name: '.',
            //     type: 'lines',
            //     coordinateSystem: 'geo',
            //     zlevel: 2,
            //     large: true,
            //     effect: {
            //         show: true,
            //         period: 6,
            //         symbolSize: 3,
            //         trailLength: 0.7,
            //     },
            //     lineStyle: {
            //         normal: {
            //             color: '#fff',
            //             width: 0,
            //             curveness: 0.2,
            //             type: 'dashed',
            //         }
            //     },
            //     data: allData.moveLines_l
            // }, 
            {
                name: '陆路',
                type: 'lines',
                coordinateSystem: 'geo',
                zlevel: 1,
                large: true,
                symbol: ['none', 'arrow'],
                effect: {
                    show: true,
                    period: 6,
                    symbol: planePath_l, //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    symbolSize: 20,
                    trailLength: 0,
                },
                lineStyle: {
                    normal: {
                        color: '#ffa022',
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.3,
                        type: 'dashed',
                    }
                },
                data: allData.moveLines_l
            },
            // {
            //     name: '.',
            //     type: 'lines',
            //     coordinateSystem: 'geo',
            //     zlevel: 2,
            //     large: true,
            //     effect: {
            //         show: true,
            //         period: 6,
            //         symbolSize: 3,
            //         trailLength: 0.7,
            //     },
            //     lineStyle: {
            //         normal: {
            //             color: '#fff',
            //             width: 0,
            //             curveness: 0.2,
            //             type: 'dashed',
            //         }
            //     },
            //     data: allData.moveLines_s
            // }, 
            {
                name: '水路',
                type: 'lines',
                symbol: ['none', 'arrow'],
                coordinateSystem: 'geo',
                zlevel: 1,
                large: true,
                effect: {
                    show: true,
                    period: 6,
                    symbol: planePath_s, //ECharts 提供的标记类型包括 'circle', 'rect', 'roundRect', 'triangle', 'diamond', 'pin', 'arrow'
                    symbolSize: 20,
                    trailLength: 0,
                },
                lineStyle: {
                    normal: {
                        color: '#46bee9',
                        width: 1,
                        opacity: 0.6,
                        curveness: 0.3,
                        type: 'dashed',
                    }
                },
                data: allData.moveLines_s
            }
        ]
    };
    myChart.setOption(option);
});