效果圖

demo例項:

<template>
  <div ref="main" style="width: 1920px; height: 1080px; border: 1px solid #ddd"></div>
</template>
<script>
import * as echarts from 'echarts'
import china from '@/assets/china.json'
export default {
  data() {
    return {}
  },
  mounted() {
    this
 
.init()
  },
  methods: {
    init() {
      var mapChart = this.$echarts.init(this.$refs.main)
      //這裡註釋掉的2個是通過遍歷geojson檔案中的所有點位繪製成飛線，一般實際應用中不會這樣用
      // const coord = china.features.map(val => {
      //   // debugger
      //   return {
      //       name:val.properties.name,
      //       value:val.properties.cp
 

      //   }
      // })
      // coord.forEach((v,index)=> {
      //   debugger
      //     index > 0 && lines_coord.push({
      //         coords:[v.value,coord[0].value]
      //     })
      // })



      //所有點位的集合
      const coord =[
        /*
        *寫法一：陣列中的元素是以物件的形式，主要用到的其實也就關於點位的經緯度陣列，就是下面的value，物件中可以其他key，
        *比如name等,這個就提示框tooltip的展示可能需要，如果不需要的話可以直接以寫法二的方式就好了
        
 
*/
        // { name: '臺灣', value: [121.509062, 25.044332]},
        // { name: '山西', value: [112.549248, 37.857014]},
        // {name:'河北', value: [114.502461, 38.045474]}

        /*
        *寫法二：陣列中的元素直接以點位的經緯度陣列形式
        */
        //零、一角標的為終點，後面的為起點
        [121.509062, 25.044332],
        [101.509062, 25.044332], 
        [112.549248, 37.857014],
        [114.502461, 38.045474], 
        [102.549248, 37.857014],
        [124.502461, 42.045474]
      ]
      //所有飛線起點終點的集合
      const lines_coord = [
        /*
        * 寫法一：標準寫法物件：key:coords    value:經緯度的陣列
        */
        {coords:[[112.549248, 37.857014],[121.509062, 25.044332]]},
        {coords:[[114.502461, 38.045474],[121.509062, 25.044332]]},
        {coords:[[102.549248, 37.857014],[101.509062, 25.044332]]},
        {coords:[[124.502461, 42.045474],[101.509062, 25.044332]]},

        /*
        * 寫法二：陣列形式，預設該點位的陣列為key:coords 的值
        */
        // [[112.549248, 37.857014],[121.509062, 25.044332]],
        // [[114.502461, 38.045474], [121.509062, 25.044332]]
      ];

      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'
      mapChart.setOption({
                geo:{
                        name:'地圖',
                        // type: 'map',  //地圖種類、
                        map: 'china', //地圖型別。
                        zlevel: 0,
                        show:true,
                        layoutCenter: ['50%', '50%'],
                        roam: false,
                        layoutSize: "90%",
                        zoom: 1,
                        label: {
                            normal: {
                                show: true,
                                textStyle:{
                                    fontSize:14,
                                    // 文字顔色
                                    color: '#43D0D6'
                                }
                            }
                        },
                        itemStyle: { //地圖區域的多邊形 圖形樣式。
                            emphasis:{ //高亮狀態下的樣試
                                label:{
                                    show:true,
                                },
                                areaColor: '#FFB800',
                            },
                            normal: {
                                areaColor: '#1b579c',
                                borderWidth: 1,//設定外層邊框
                                borderColor:'#1ECEF4',                                        
                            }
                        },
                    },
                series: [
                    {
                        // effectScatter畫散點【起點】
                        type:'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        symbolSize:6,
                        rippleEffect: {
                            period: 3, brushType: 'stroke', scale: 3
                        },
                        itemStyle:{
                            color:'#FFB800',
                            opacity:0.7
                        },
                        data:coord.slice(2)
                    },
                    {
                        // 畫中心散點【終點】,這裡是為了區分起點終點不同樣式，所以分開寫，如果二者樣式一樣那就直接合在一起寫就好了
                        type:'effectScatter',
                        coordinateSystem: 'geo',
                        zlevel: 2,
                        symbolSize:10,
                        rippleEffect: {
                            period: 4, brushType: 'stroke', scale: 4
                        },
                        itemStyle:{
                            color:'#FF5722',
                            opacity:1
                        },
                        data:coord.slice(0,2)
                    },
                    //這裡設了2條不同效果的飛線是為了講他們疊加起來，滿足飛機後面白色的噴氣動畫效果
                    {
                        type: 'lines',
                        zlevel: 1,
                        
                        effect: {
                            show: true,
                            period: 5,
                            trailLength: 0.7,
                            color: '#fff',
                            symbolSize: 3
                        },
                        lineStyle: {
                            normal: {
                                color: '#FFB800',
                                width: 0,
                                curveness: 0.2
                            }
                        },
                        data: lines_coord
                    },
                    {
                        // lines畫線
                        type:'lines',
                        coordinateSystem:'geo',
                        zlevel: 2,   
                        symbol: ['none', 'arrow'],//設定飛線的起點終點處的繪製圖形
                        symbolSize: 12,                       
                        effect: {
                            show: true,
                            period: 5, //箭頭指向速度，值越小速度越快
                            trailLength: 0, //特效尾跡長度[0,1]值越大，尾跡越長重
                            symbol: planePath, //飛機圖示
                            symbolSize: 15, //圖示大小
                            color:'#01AAED'
                        },
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                lineStyle: {
                                    type: 'solid',
                                    shadowBlur: 10
                                }
                            }
                        },
                        lineStyle: { //飛線的樣式
                            normal: {width: 1.2, opacity: 0.6, curveness: 0.2, color: '#FFB800'}                            
                        },
                        data:lines_coord
                        
                    }
                ],
      })
    }
  },
}
</script>

<style scoped>
.test-title {
  background: #146402;
  color: #fff;
}
</style>