echarts--迁徙图

<div id="china-map"></div>

<script>
    var myChart = echarts.init(document.getElementById('china-map'));
    var geoCoordMapData = {
        '上海': [121.4648, 31.2891],
        '新疆': [87.9236, 43.5883],
        '甘肃': [103.5901, 36.3043],
        '北京': [116.4551, 40.2539],
        '江苏': [118.8062, 31.9208],
        '广西': [108.479, 23.1152],
        '江西': [116.0046, 28.6633],
        '安徽': [117.29, 32.0581],
        '内蒙古': [111.4124, 40.4901],
        '黑龙江': [127.9688, 45.368],
        '辽宁': [122.2229, 39.4409],
        '天津': [117.4219, 39.4189],
        '山西': [112.3352, 37.9413],
        '广东': [113.5107, 23.2196],
        '四川': [103.9526, 30.7617],
        '西藏': [91.1865, 30.1465],
        '云南': [102.9199, 25.4663],
        '浙江': [119.5313, 29.8773],
        '湖北': [114.3896, 30.6628],
        '山东': [117.1582, 36.8701],
        '海南': [110.3893, 19.8516],
        '河北': [114.4995, 38.1006],
        '福建': [119.4543, 25.9222],
        '青海': [101.4038, 36.8207],
        '陕西': [109.1162, 34.2004],
        '贵州': [106.6992, 26.7682],
        '河南': [113.4668, 34.6234],
        '重庆': [107.7539, 30.1904],
        '宁夏': [106.3586, 38.1775],
        '吉林': [125.8154, 44.2584],
        '湖南': [113.0823, 28.2568],
        '台湾': [119.1823, 25.2568],
        '香港': [114.1823, 22.2568],
        '澳门': [113.1823, 22.2568],
    };
    var dataVlue = [
        { name: "新疆", value: 125 },
        { name: "宁夏", value: 62 },
        { name: "四川", value: 83 },
        { name: "重庆", value: 9 },
        { name: "湖南", value: 9 },
        { name: "山东", value: 9 },
        { name: "浙江", value: 9 },
    ];
    var XAData = [
        [{ name: '新疆' }, { name: '浙江' }],
        [{ name: '宁夏' }, { name: '浙江' }],
        [{ name: '四川' }, { name: '浙江' }],
        [{ name: '重庆' }, { name: '浙江' }],
        [{ name: '湖南' }, { name: '浙江' }],
        [{ name: '山东' }, { name: '浙江' }],
        [{ name: '浙江' }, { name: '浙江' }],
    ];
    var planePath = 'path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z';
    var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var dataItem = data[i];
            var fromCoord = geoCoordMapData[dataItem[0].name];
            var toCoord = geoCoordMapData[dataItem[1].name];
            if (fromCoord && toCoord) {
                res.push({
                    toName: dataItem[1].name,
                    coords: [fromCoord, toCoord],
                });
            }
        }
        return res;
    };
    var option = {
        tooltip: {
            show: false
        },
        geo: {
            map: 'china',
            zoom: 1, //当前视角的缩放比例
            layoutCenter: ["50%", "50%"], //地图位置
            layoutSize: '100%',
            itemStyle: {
                normal: {
                    borderColor: "rgb(23, 213, 249)",
                    borderWidth: 2,
                    areaColor: "rgba(57,181,236,0)",
                },
            },
        },
        series: [
            {
                type: 'map',
                data: dataVlue,
                mapType: 'china',
                layoutCenter: ["50%", "50%"], //地图位置
                layoutSize: '100%',
                zoom: 1, //当前视角的缩放比例
                label: {  //每个省份的名称是否显示
                    normal: {
                        show: true,
                        textStyle: {
                            color: '#FFF'
                        },
                        rich: { //文本丰富
                            b: {
                                color: "red"
                            },
                            a:{
                                color:"green"
                            }
                           
                        },
                        formatter: function (item) {
                            console.log(item);
                            if (item.data) {
                                return [
                                   '{a|'+ item.name+'}'+'{b|'+item.value+'}'
                                ]
                            } else {
                                return item.name
                            }
                        }
                    },
                },
                itemStyle: { //每个省份的样式
                    normal: {
                        borderColor: "rgb(23, 213, 249)",
                        borderWidth: 2,
                        areaColor: "rgba(57,181,236,0.2)",  //区域颜色
                    },
                    emphasis: {  //高亮颜色
                        areaColor: "rgba(57,181,236,0.2)",
                        label: {
                            color: "#fff"
                        }
                    }
                },
            },

        ]
    };
    option.series.push(
        {
            type: 'lines',
            zlevel: 2,
            symbol: ['none', 'none'], //起点和终点图标
            symbolSize: 10,  //起点和终点大小
            effect: {
                show: true,
                period: 5,  //箭头指向速度，值越小速度越快
                trailLength: 0, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: planePath, //箭头图标
                symbolSize: 15  //图标大小
            },
            lineStyle: {  //轨迹线的样式
                normal: {
                    color: '#FACC14',
                    type: 'dashed',
                    width: 3, //线条宽度
                    opacity: 0.6, //尾迹线条透明度
                    curveness: 0.2  //尾迹线条曲直度
                }
            },
            data: convertData(XAData)
        },
        {
            type: 'effectScatter',  //视觉突出
            coordinateSystem: 'geo', //指定那种类型的坐标系
            zlevel: 2,
            rippleEffect: {  //涟漪特效相关配置 
                scale: 1,  //动画中波纹的最大缩放比例  越大波纹越明显
                brushType: 'fill'   //波纹的绘制方式
            },
            symbolSize: 13,
            itemStyle: {  //波纹样式
                normal: {
                    color: '#FACC14',
                }
            },
            data: XAData.map(function (dataItem) {
                return {
                    value: geoCoordMapData[dataItem[0].name]
                };
            })
        });

    myChart.setOption(option);

</script>