jili2/public/static/data/js/hn_map.js

// var uploadedDataURL = "/public/data/410000_city.json";
var uploadedDataURL = "https://geo.datav.aliyun.com/areas/bound/410000_full.json";
var myChart = echarts.init(document.getElementById('henan-map'));

$.get(uploadedDataURL, function(geoJson) {
    echarts.registerMap('河南', geoJson);
    var allData = {
        "citys": [{
            "name": "郑州市",
            "value": [113.665412,34.757975],
            "symbolSize": 3,
            "itemStyle": {
                "normal": {
                    "color": "#04b9ff"
                }
            }
        },
            {
                "name": "洛阳市",
                "value": [112.434468,34.663041],
                "symbolSize": 1,
                "itemStyle": {
                    "normal": {
                        "color": "#04b9ff"
                    }
                }
            },
            {
                "name": "新乡市",
                "value": [113.883991,35.302616],
                "symbolSize": 1,
                "itemStyle": {
                    "normal": {
                        "color": "#04b9ff"
                    }
                }
            },
            {
                "name": "开封市",
                "value": [114.341447,34.797049],
                "symbolSize": 1,
                "itemStyle": {
                    "normal": {
                        "color": "#04b9ff"
                    }
                }
            },
            {
                "name": "南阳市",
                "value": [112.540918,32.999082],
                "symbolSize": 1,
                "itemStyle": {
                    "normal": {
                        "color": "#04b9ff"
                    }
                }
            },
            {
                "name": "鹤壁市",
                "value": [114.295444,35.748236],
                "symbolSize": 1,
                "itemStyle": {
                    "normal": {
                        "color": "#04b9ff"
                    }
                }
            },
            {
                "name": "濮阳市",
                "value": [115.041299,35.768234],
                "symbolSize": 1,
                "itemStyle": {
                    "normal": {
                        "color": "#04b9ff"
                    }
                }
            },
            {
                "name": "驻马店市",
                "value": [114.024736,32.980169],
                "symbolSize": 1,
                "itemStyle": {
                    "normal": {
                        "color": "#04b9ff"
                    }
                }
            }
        ],

        "moveLines": [{
            "fromName": "郑州市",
            "toName": "洛阳市",
            "coords": [
                [113.665412,34.757975],
                [112.434468,34.663041]
            ]
        },
            {
                "fromName": "郑州市",
                "toName": "新乡市",
                "coords": [
                    [113.665412,34.757975],
                    [113.883991,35.302616]
                ]
            },
            {
                "fromName": "郑州市",
                "toName": "开封市",
                "coords": [
                    [113.665412,34.757975],
                    [114.341447,34.797049]
                ]
            },
            {
                "fromName": "郑州市",
                "toName": "南阳市",
                "coords": [
                    [113.665412,34.757975],
                    [112.540918,32.999082]
                ]
            },
            {
                "fromName": "郑州市",
                "toName": "鹤壁市",
                "coords": [
                    [113.665412,34.757975],
                    [114.295444,35.748236]
                ]
            },
            {
                "fromName": "郑州市",
                "toName": "濮阳市",
                "coords": [
                    [113.665412,34.757975],
                    [115.041299,35.768234]
                ]
            },
            {
                "fromName": "郑州市",
                "toName": "驻马店市",
                "coords": [
                    [113.665412,34.757975],
                    [114.024736,32.980169]
                ]
            }
        ]
    };
    option = {
        backgroundColor:'rgba(128, 128, 128, 0.1)', //rgba设置透明度0.1
        title: {
            text: '',
            left: 'center',
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            show: false,
            orient: 'vertical',
            top: 'auto',
            left: 'right',
            data: ['地点', '线路'],
            textStyle: {
                color: '#fff'
            }
        },
        geo: {
            map: '河南',
            label: {
                emphasis: {
                    show: false,
                    textStyle: {
                        color: '#fff',
                    }
                }
            },
            roam: true,
            itemStyle: {
                normal: {
                    borderColor: 'rgba(147, 235, 248, 1)',
                    borderWidth: 1,
                    areaColor: {
                        type: 'radial',
                        x: 0.5,
                        y: 0.5,
                        r: 0.8,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                        }, {
                            offset: 1,
                            color: 'rgba(147, 235, 248, .2)' // 100% 处的颜色
                        }],
                        globalCoord: false // 缺省为 false
                    },
                    shadowColor: 'rgba(128, 217, 248, 1)',
                    // shadowColor: 'rgba(255, 255, 255, 1)',
                    shadowOffsetX: -2,
                    shadowOffsetY: 2,
                    shadowBlur: 10
                },
                emphasis: {
                    areaColor: '#389BB7',
                    borderWidth: 0
                }
            }
        },
        series: [{
            name: '地点',
            type: 'effectScatter',
            coordinateSystem: 'geo',
            zlevel: 1,
            rippleEffect: {
                brushType: 'stroke',
                period: 7,
                scale: 26
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: '{b}',
                    textStyle:{
                        fontSize: 14,
                        color: '#fff'
                    }
                },
                emphasis: {
                    show: true,
                    position: 'right',
                    formatter: '{b}'
                }
            },
            symbolSize: 2,
            showEffectOn: 'render',
            itemStyle: {
                normal: {
                    color: '#04b9ff',
                    shadowBlur: 10,
                    shadowColor: '#04b9ff'
                }
            },
            data: allData.citys
        }, {
            name: '线路',
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 2,
            large: true,
            effect: {
                show: true,
                period: 4, //箭头指向速度，值越小速度越快
                trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: 'arrow', //箭头图标
                symbolSize: 5, //图标大小
            },
            lineStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: '#04b9ff'
                    }, {
                        offset: 1,
                        color: '#04b9ff'
                    }], false),
                    width: 1, //尾迹线条宽度
                    opacity: 1, //尾迹线条透明度
                    curveness: .3 //尾迹线条曲直度
                }
            },
            data: allData.moveLines
        }]
    };
    myChart.setOption(option);
});