简介

在可视化大屏中碰到要绘制飞线图的需求，采用Echarts来实现，但是Echarts的世界地图数据会缺失部分数据，引入其他来源的话在网速不好的情况下地图瓦片加载又会很慢，体验感极差；最终通过改造Echarts地图数据实现了如下效果:

详细代码如下

引入Api

import echarts from 'echarts';
// 世界地图数据（更改后的JSON数据）
import world from './geojson/world.json'

开始使用

• 初始化Echarts

 // 注册世界地图数据
 echarts.registerMap('world', world)
 // 初始化
 let chartDom = document.getElementById('main')
 if(this.myChart != null && this.myChart != '' && this.myChart != undefined) {
     this.myChart.dispose()
 }
 this.myChart = echarts.init(chartDom)

• 创建配置项

 // 小飞机图标
 let 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';
 // 线路坐标（模拟数据）
 let LineData = [
	                {
	                    'fromName': '加拿大温哥华',
	                    'toName': '咸阳国际机场',
	                    'coords': [
	                        [
	                            -123.023921,
	                            49.311753
	                        ],
	                        [
	                            108.76463,
	                            34.44212
	                        ]
	                    ],
	                    value: 123
	                },
	            ]
// 线路起点坐标
let LineEffectScatterData = []
// 线路终点坐标
let effectScatterData = []
LineData.map((item) => {
    // 线路起点坐标
    let objStart = {
        name: item.fromName,
        value: item.coords[0]
    }
    LineEffectScatterData.push(objStart)
    // 线路终点坐标
    let objEnd = {
        name: item.toName,
        value: item.coords[1]
    }
    effectScatterData.push(objEnd)
})
let series = [];
series.push(
    {
        type: 'lines',
        zlevel: 2,
        effect: {
            show: true,
            //飞机的速度  这里是s单位
            period: 6,
            trailLength: 0,
            symbol: planePath,
            // 飞机大小
            symbolSize: 16,
            color:'#ff8800',
        },
        lineStyle: {
            normal: {
                color:'#8A91BA',
                type:'dashed', // 虚线
                // 线条宽度
                width: 2,
                opacity: 1,
                curveness: 0.2, // 弯曲度
            },
            emphasis: {
                color: '#FF9600' //飞线悬浮颜色
            }
        },
        label: {
            normal: {
                show: false,
                position: 'middle',
                formatter: '{b}'
            }
        },
        data: LineData
    }, {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
            //涟漪特效
            period: 4, //动画时间，值越小速度越快
            brushType: 'stroke', //波纹绘制方式 stroke, fill
            scale: 4 //波纹圆环最大限制，值越大波纹越大
        },
        label: {
            normal: {
                show: false,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: '{b}', //圆环显示文字
                textStyle: {
                    color: 'red'
                }
            },
            // emphasis: {
            //     show: true
            // }
        },
        symbol: 'circle',
        symbolSize: function(val) {
            return 10; //圆环大小
        },
        itemStyle: {
            normal: {
                show: false,
                color: '#E0C896',
            }
        },
        data: LineEffectScatterData
    },
    //终点
    {
        type: 'effectScatter',
        coordinateSystem: 'geo',
        zlevel: 2,
        rippleEffect: {
            period: 4,
            brushType: 'stroke',
            scale: 4
        },
        label: {
            normal: {
                show: false,
                position: 'right', //显示位置
                offset: [5, 0], //偏移设置
                formatter: '', //圆环显示文字
            },
            emphasis: {
                show: true
            }
        },
        symbol: 'circle',
        symbolSize: function(val) {
            return 10; //圆环大小
        },
        itemStyle: {
            normal: {
                show: true,
                color: '#FF9300',
            }
        },
        data: effectScatterData
    }
);

let option;
option = {
    backgroundColor: 'rgba(0,0,0,0)',
    tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,0)',
        borderColor: 'rgba(0,0,0,0)',
        padding: 0,
        formatter: function(params, ticket, callback) {
            if (params.seriesType == 'effectScatter') {
            	// 这里可根据自己需要自定义
                // 起点终点悬浮效果
                return params.marker+params.data.name;
            } else if (params.seriesType == 'lines') {
            	 // 这里可根据自己需要自定义
                // 飞线悬浮效果
               	return params.data.fromName + ' -> ' + params.data.toName + '<br />' + params.data.value;
            }
            return params.name;
        },
    },
    geo: {
        map: 'world',
        label: {
            emphasis: {
                show: false
            }
        },
        roam: true, //是否允许缩放
        scaleLimit: { //滚轮缩放的极限控制
            min: 1,
            max: 3
        },
        layoutCenter: ['50%', '52%'], //地图位置
        layoutSize: '130%',
        itemStyle: {
            normal: {
                color: '#6073ae', //地图背景色
                borderColor: '#6073ae' //省市边界线
            },
            emphasis: {
                color: '#6073ae' //悬浮背景
            }
        },
        // 设置中国地图边界线
        regions: [
            {
                name: 'China',
                itemStyle: {
                    normal: {
                        borderColor: '#fedc70',
                        borderWidth: 1,
                        areaColor: '#6073ae',
                        // shadowColor: 'rgba(128, 217, 248, 1)',
                        // shadowColor: 'rgba(255, 255, 255, 1)',
                        shadowOffsetX: 0,
                        shadowOffsetY: 0,
                        shadowBlur: 0
                    },
                    emphasis: {
                        color: '#6073ae' //悬浮背景
                    }
                }

            }
        ]
    },

    series: series
};

• 加载配置

 option && this.myChart.setOption(option);
 window.addEventListener('resize', () => {
     this.myChart.resize()
 })

地图颜色等配置可自行修改为所需的配置
所需要的world.json文件可在博主资源下载中心自行下载
欢迎指正交流