echarts画飞线图

先看看效果图

新建html

 <div id="flying-lines" class="pt-5"></div>

china.json获取地址

http://datav.aliyun.com/tools/atlas/#&lat=30.37018632615852&lng=106.68898666525287&zoom=3.5

新建js文件（使用的jquery）

$(function () {
    "use strict"
    $.ajax({
        url: 'https://geo.datav.aliyun.com/areas_v2/bound/100000.json',
        success: function(data) {
            var flyingLines = document.getElementById('flying-lines')
            var chart = echarts.init(flyingLines)
            echarts.registerMap('china', data)
            // 地区索引， 也可以根据名称查找，逻辑调整下就行
            var areaIndex =  [9, 3, 4, 14, 27, 18, 19]
            var coor = []
            for(var i = 0; i< areaIndex.length; i++) {
                coor.push({
                    name: data.features[areaIndex[i]].properties.name,
                    value: data.features[areaIndex[i]].properties.center
                })
            }
            var lines_coord = []
            for(var i = 0; i< coor.length; i++) {
                if(coor[i].value) {
                    lines_coord.push({
                        coords: [coor[i].value, [117.137891,34.302287]]
                    })
                }
            }
            var series = [{
                type:'effectScatter',
                coordinateSystem: 'geo',
                zlevel: 18,
                symbolSize: 4,
                rippleEffect: {
                    period: 4, brushType: 'stroke', scale: 4
                },
                itemStyle:{
                    color:'#1A8CF2',
                    opacity:1
                },
                data: coor
            },  {
                type:'lines',
                coordinateSystem:'geo',
                zlevel: 15,
                effect: {
                    show: true,
                    period: 8,
                    // constantSpeed: 20,
                    trailLength: .1,
                    symbol: 'circle',
                    color:'#01AAED',
                    symbolSize: 5,
                },
                lineStyle: {
                    normal: {
                        width: 1.2,
                        opacity: 0.6,
                        curveness: 0.2,
                        color:  {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: '#1A92FF' // 0% 处的颜色
                            }, {
                                offset: 1, color: '#8be1f4' // 100% 处的颜色
                            }],
                            global: false // 缺省为 false
                        }
                    }
                },
                data: lines_coord
            }
            ]
            // coord, value
            var option ={
                geo: {
                    map: 'china',
                    zlevel: 10,
                    show: true,
                    layoutCenter: ['50%', '50%'],
                    roam: false,
                    layoutSize: "90%",
                    zoom: 1,
                    label: {
                        normal: {
                            show: false,
                            textStyle:{
                                fontSize:12,
                                color: '#6d3142'
                            }
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [{
                                    offset: 0, color: '#071E39' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#17436A' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            },
                            borderWidth: .5,
                            borderColor: '#1B72C1',
                            shadowColor: '#4E779C',
                            shadowBlur: 8
                        }
                    },
                    emphasis: {
                        label:{
                            show:false
                        },
                        itemStyle: {
                            areaColor: {
                                type: 'radial',
                                x: 0.5,
                                y: 0.5,
                                r: 0.5,
                                colorStops: [{
                                    offset: 0, color: '#17436A' // 0% 处的颜色
                                }, {
                                    offset: 1, color: '#5FB7FF' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }
                },
                series: series
            }
            chart.setOption(option);
        }
    })
})

有问题欢迎指正~