Echarts世界级迁徙图

前言

公司一项目需要迁徙图，以展示公司业务范围涉及是多么的广。

好吧，作为一个后端PHPer无奈的接下了这个任务。

返回不断查手册、找配置、改代码，总算完成，还支持自适应哦。

大部分配置及参数我都备注了，本来想给中国单独加一个红色的背景图，但是搞了很久没搞好就放弃了。

参考资料：《echartsjs官方手册》《echarts世界地图各个国家的经纬度数组》《关于怎么在echarts飞机迁移图中换掉飞机图标》

预览

代码

<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/extension/bmap.min.js"></script>
<script src="http://echarts.baidu.com/asset/map/js/world.js"></script>
<script src="http://echarts.baidu.com/asset/map/js/china.js"></script>

<style>
    @media screen and (min-width: 767px) {
      #main{height:800px;padding: 0 30px 0 30px;}
    }
    @media screen and (max-width: 767px) {
      #main{height:200px;padding: 0px;}
    }
</style>
<div id="main" style="width: 100%;text-align: center;"></div>

<script type="text/javascript">
        
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        myChart.setOption({
          visualMap: {
            min: 0,  
            max: 100,  
            text:['业务量(件)/年'],  
            realtime: false,  
            calculable: false,  
            color: ['orangered','yellow','lightskyblue'],
            show:false,  
            padding:0,

          },
          series: [{
            // 图标类型 
            type: 'map',
          }]
        });

        // 指定图表的配置项和数据
        var geoCoordMap = {
          '阿富汗':[67.709953,33.93911],
          '安哥拉':[17.873887,-11.202692],
          '阿尔巴尼亚':[20.168331,41.153332],
          '阿联酋':[53.847818,23.424076],
          '阿根廷':[-63.61667199999999,-38.416097],
          '亚美尼亚':[45.038189,40.069099],
          '法属南半球和南极领地':[69.348557,-49.280366],
          '澳大利亚':[133.775136,-25.274398],
          '奥地利':[14.550072,47.516231],
          '阿塞拜疆':[47.576927,40.143105],
          '布隆迪':[29.918886,-3.373056],
          '比利时':[4.469936,50.503887],
          '贝宁':[2.315834,9.30769],
          '布基纳法索':[-1.561593,12.238333],
          '孟加拉国':[90.356331,23.684994],
          '保加利亚':[25.48583,42.733883],
          '巴哈马':[-77.39627999999999,25.03428],
          '波斯尼亚和黑塞哥维那':[17.679076,43.915886],
          '白俄罗斯':[27.953389,53.709807],
          '伯利兹':[-88.49765,17.189877],
          '百慕大':[-64.7505,32.3078],
          '玻利维亚':[-63.58865299999999,-16.290154],
          '巴西':[-51.92528,-14.235004],
          '文莱':[114.727669,4.535277],
          '不丹':[90.433601,27.514162],
          '博茨瓦纳':[24.684866,-22.328474],
          '中非共和国':[20.939444,6.611110999999999],
          '加拿大':[-106.346771,56.130366],
          '瑞士':[8.227511999999999,46.818188],
          '智利':[-71.542969,-35.675147],
          '中国':[104.195397,35.86166],
          '象牙海岸':[-5.547079999999999,7.539988999999999],
          '喀麦隆':[12.354722,7.369721999999999],
          '刚果民主共和国':[21.758664,-4.038333],
          '刚果共和国':[15.827659,-0.228021],
          '哥伦比亚':[-74.297333,4.570868],
          '哥斯达黎加':[-83.753428,9.748916999999999],
          '古巴':[-77.781167,21.521757],
          '北塞浦路斯':[33.429859,35.126413],
          '塞浦路斯':[33.429859,35.126413],
          '捷克共和国':[15.472962,49.81749199999999],
          '德国':[10.451526,51.165691],
          '吉布提':[42.590275,11.825138],
          '丹麦':[9.501785,56.26392],
          '多明尼加共和国':[-70.162651,18.735693],
          '阿尔及利亚':[1.659626,28.033886],
          '厄瓜多尔':[-78.18340599999999,-1.831239],
          '埃及':[30.802498,26.820553],
          '厄立特里亚':[39.782334,15.179384],
          '西班牙':[-3.74922,40.46366700000001],
          '爱沙尼亚':[25.013607,58.595272],
          '埃塞俄比亚':[40.489673,9.145000000000001],
          '芬兰':[25.748151,61.92410999999999],
          '斐':[178.065032,-17.713371],
          '福克兰群岛':[-59.523613,-51.796253],
          '法国':[2.213749,46.227638],
          '加蓬':[11.609444,-0.803689],
          '英国':[-3.435973,55.378051],
          '格鲁吉亚':[-82.9000751,32.1656221],
          '加纳':[-1.023194,7.946527],
          '几内亚':[-9.696645,9.945587],
          '冈比亚':[-15.310139,13.443182],
          '几内亚比绍':[-15.180413,11.803749],
          '赤道几内亚':[10.267895,1.650801],
          '希腊':[21.824312,39.074208],
          '格陵兰':[-42.604303,71.706936],
          '危地马拉':[-90.23075899999999,15.783471],
          '法属圭亚那':[-53.125782,3.933889],
          '圭亚那':[-58.93018,4.860416],
          '洪都拉斯':[-86.241905,15.199999],
          '克罗地亚':[15.2,45.1],
          '海地':[-72.285215,18.971187],
          '匈牙利':[19.503304,47.162494],
          '印尼':[113.921327,-0.789275],
          '印度':[78.96288,20.593684],
          '爱尔兰':[-8.24389,53.41291],
          '伊朗':[53.688046,32.427908],
          '伊拉克':[43.679291,33.223191],
          '冰岛':[-19.020835,64.963051],
          '以色列':[34.851612,31.046051],
          '意大利':[12.56738,41.87194],
          '牙买加':[-77.297508,18.109581],
          '约旦':[36.238414,30.585164],
          '日本':[138.252924,36.204824],
          '哈萨克斯坦':[66.923684,48.019573],
          '肯尼亚':[37.906193,-0.023559],
          '吉尔吉斯斯坦':[74.766098,41.20438],
          '柬埔寨':[104.990963,12.565679],
          '韩国':[127.766922,35.907757],
          '科索沃':[20.902977,42.6026359],
          '科威特':[47.481766,29.31166],
          '老挝':[102.495496,19.85627],
          '黎巴嫩':[35.862285,33.854721],
          '利比里亚':[-9.429499000000002,6.428055],
          '利比亚':[17.228331,26.3351],
          '斯里兰卡':[80.77179699999999,7.873053999999999],
          '莱索托':[28.233608,-29.609988],
          '立陶宛':[23.881275,55.169438],
          '卢森堡':[6.129582999999999,49.815273],
          '拉脱维亚':[24.603189,56.879635],
          '摩洛哥':[-7.092619999999999,31.791702],
          '摩尔多瓦':[28.369885,47.411631],
          '马达加斯加':[46.869107,-18.766947],
          '墨西哥':[-102.552784,23.634501],
          '马其顿':[21.745275,41.608635],
          '马里':[-3.996166,17.570692],
          '缅甸':[95.956223,21.913965],
          '黑山':[19.37439,42.708678],
          '蒙古':[103.846656,46.862496],
          '莫桑比克':[35.529562,-18.665695],
          '毛里塔尼亚':[-10.940835,21.00789],
          '马拉维':[34.301525,-13.254308],
          '马来西亚':[101.975766,4.210484],
          '纳米比亚':[18.49041,-22.95764],
          '新喀里多尼亚':[165.618042,-20.904305],
          '尼日尔':[8.081666,17.607789],
          '尼日利亚':[8.675277,9.081999],
          '尼加拉瓜':[-85.207229,12.865416],
          '荷兰':[5.291265999999999,52.132633],
          '挪威':[8.468945999999999,60.47202399999999],
          '尼泊尔':[84.12400799999999,28.394857],
          '新西兰':[174.885971,-40.900557],
          '阿曼':[55.923255,21.512583],
          '巴基斯坦':[69.34511599999999,30.375321],
          '巴拿马':[-80.782127,8.537981],
          '秘鲁':[-75.015152,-9.189967],
          '菲律宾':[121.774017,12.879721],
          '巴布亚新几内亚':[143.95555,-6.314992999999999],
          '波兰':[19.145136,51.919438],
          '波多黎各':[-66.590149,18.220833],
          '北朝鲜':[127.510093,40.339852],
          '葡萄牙':[-8.224454,39.39987199999999],
          '巴拉圭':[-58.443832,-23.442503],
          '卡塔尔':[51.183884,25.354826],
          '罗马尼亚':[24.96676,45.943161],
          '俄罗斯':[105.318756,61.52401],
          '卢旺达':[29.873888,-1.940278],
          '西撒哈拉':[-12.885834,24.215527],
          '沙特阿拉伯':[45.079162,23.885942],
          '苏丹':[30.217636,12.862807],
          '南苏丹':[31.3069788,6.876991899999999],
          '塞内加尔':[-14.452362,14.497401],
          '所罗门群岛':[160.156194,-9.64571],
          '塞拉利昂':[-11.779889,8.460555],
          '萨尔瓦多':[-88.89653,13.794185],
          '索马里兰':[46.8252838,9.411743399999999],
          '索马里':[46.199616,5.152149],
          '塞尔维亚共和国':[21.005859,44.016521],
          '苏里南':[-56.027783,3.919305],
          '斯洛伐克':[19.699024,48.669026],
          '斯洛文尼亚':[14.995463,46.151241],
          '瑞典':[18.643501,60.12816100000001],
          '斯威士兰':[31.465866,-26.522503],
          '叙利亚':[38.996815,34.80207499999999],
          '乍得':[18.732207,15.454166],
          '多哥':[0.824782,8.619543],
          '泰国':[100.992541,15.870032],
          '塔吉克斯坦':[71.276093,38.861034],
          '土库曼斯坦':[59.556278,38.969719],
          '东帝汶':[125.727539,-8.874217],
          '特里尼达和多巴哥':[-61.222503,10.691803],
          '突尼斯':[9.537499,33.886917],
          '土耳其':[35.243322,38.963745],
          '坦桑尼亚联合共和国':[34.888822,-6.369028],
          '乌干达':[32.290275,1.373333],
          '乌克兰':[31.16558,48.379433],
          '乌拉圭':[-55.765835,-32.522779],
          '美国':[-95.712891,37.09024],
          '乌兹别克斯坦':[64.585262,41.377491],
          '委内瑞拉':[-66.58973,6.42375],
          '越南':[108.277199,14.058324],
          '瓦努阿图':[166.959158,-15.376706],
          '西岸':[35.3027226,31.9465703],
          '也门':[48.516388,15.552727],
          '南非':[22.937506,-30.559482],
          '赞比亚':[27.849332,-13.133897],
          '津巴布韦':[29.154857,-19.015438]};

        var ZGData = [
            [{name:'中国'}, {name:'美国',value:95}],
            [{name:'中国'}, {name:'也门',value:90}],
            [{name:'中国'}, {name:'乌干达',value:80}],
            [{name:'中国'}, {name:'泰国',value:70}],
        ];

        // 小飞机图
        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 = geoCoordMap[dataItem[0].name];
                var toCoord = geoCoordMap[dataItem[1].name];
                if (fromCoord && toCoord) {
                    res.push({
                        fromName: dataItem[0].name,
                        toName: dataItem[1].name,
                        coords: [fromCoord, toCoord]
                    });
                }
            }
            return res;
        };
        // 颜色组 #a6c84c:浅绿;#ffa022:橙色;#46bee9:蓝色
        var color = ['#a6c84c', '#ffa022', '#46bee9'];
        var series = [];
        [['中国',ZGData]].forEach(function (item, i) {
            series.push({
                name: item[0],
                type: 'lines',
                zlevel: 1,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0.7,
                    color: '#fff',
                    symbolSize: 3
                },
                lineStyle: {
                    normal: {
                        color: color[i],
                        width: 1,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                // 飞机/线条
                name: item[0],
                type: 'lines',
                zlevel: 2,
                effect: {
                    show: true,
                    period: 6,
                    trailLength: 0,
                    symbol: planePath,
                    symbolSize: 15
                },
                lineStyle: {
                    normal: {
                        // 飞机及线条颜色
                        color: 'red',
                        // 线条粗细
                        width: 5,
                        // 线条透明度
                        opacity: 0.4,
                        curveness: 0.2
                    }
                },
                data: convertData(item[1])
            },
            {
                // 标注点
                name: item[0],
                type: 'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 2,
                // rippleEffect: {
                //     brushType: 'stroke'
                // },
                // label: {
                //     normal: {
                //         show: true,
                //         position: 'right',
                //         formatter: '{b}'
                //     }
                // },
                symbolSize: function (val) {
                    return val[2] / 8;
                },
                // itemStyle: {
                //     normal: {
                //         color: color[i]
                //     }
                // },
                data: item[1].map(function (dataItem) {
                    return {
                        name: dataItem[1].name,
                        value: geoCoordMap[dataItem[1].name].concat([dataItem[1].value])
                    };
                })
            });
        });

        option = {
            // 整个图标背景颜色
            backgroundColor: '#aacef5',
            title : {
                // 图表标题
                text: '业务范围',
                // 副标题
                subtext: '',
                // 位置
                left: 'center',
                // 字体颜色
                textStyle : {
                    color: '#fff'
                }
            },
            // 提示
            tooltip : {
                trigger: 'item',
                // 提示内容 出发地:{a};目的地:{b};坐标及数值:{c}
                formatter: "{b}"
            },
            // 右下角按钮不同区域
            // legend: {
            //     orient: 'vertical',
            //     top: 'bottom',
            //     left: 'right',
            //     data:['中国 Top10'],
            //     textStyle: {
            //         color: '#fff'
            //     },
            //     selectedMode: 'single'
            // },
            geo: {
                // 地图范围 world or china
                map: 'world',
                label: {
                    emphasis: {
                        show: false
                    }
                },
                // 滚轮缩放
                roam: false,
                itemStyle: {
                    normal: {
                        // 地图区块颜色
                        areaColor: '#ffde7fa1',
                        // 地图区块描边色
                        borderColor: '#404a59'
                    },
                    emphasis: {
                        // 鼠标触碰色
                        areaColor: 'yellow'
                    }
                }
            },
            series: series
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
</script>