实现效果
思想：主要是三个要素：1 地图样式 2散点图 3飞线 组合配置后就形成以下效果。

第一步：vue中引入Echarts

npm install vue-echarts echarts

第二步：导入代码

代码已经写好，直接引入运行就好了，关键代码有注释，可查询修改。

<template>
    <!-- 飞线图组件 -->
  <div class="map">
    <h2>消费者扫码辐射图</h2>
    <!-- 地图容器 -->
    <div class="content" ref="echarts">
    </div>
  </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
// 引入地图
import 'echarts/lib/chart/map'
// 引入js
import 'echarts/map/js/china.js'

export default {
  components: {},
  data () {
    // 这里存放数据
    return {}
  },

  mounted () {
    this.init()
  },
  // 数据部分
  methods: {

    init () {
      const myChart = echarts.init(this.$refs.echarts)
      // 这个数据是散点数据，用于在地图上面展示。
      const chinaGeoCoordMap = {
        黑龙江: [127.9688, 45.368],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        宜宾市: [104.630825, 28.760189],
        辽宁: [123.1238, 42.1216],
        // 河北: [114.4995, 38.1006],
        // 天津: [117.4219, 39.4189],
        // 山西: [112.3352, 37.9413],
        // 陕西: [109.1162, 34.2004],
        // 甘肃: [103.5901, 36.3043],
        // 宁夏: [106.3586, 38.1775],
        // 青海: [101.4038, 36.8207],
        // 新疆: [87.9236, 43.5883],
        // 西藏: [91.11, 29.97],
        // 四川: [103.9526, 30.7617],
        // 重庆: [108.384366, 30.439702],
        // 山东: [117.1582, 36.8701],
        // 河南: [113.4668, 34.6234],
        // 江苏: [118.8062, 31.9208],
        // 安徽: [117.29, 32.0581],
        // 湖北: [114.3896, 30.6628],
        // 浙江: [119.5313, 29.8773],
        // 福建: [119.4543, 25.9222],
        // 江西: [116.0046, 28.6633],
        // 湖南: [113.0823, 28.2568],
        安阳: [113.625891, 35.20554],
        贵州: [106.6992, 26.7682],
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        上海: [121.4648, 31.2891]
      }
      // 散点
      const chinaDatas = []// 临时数组
      // const mapObject = { name: '', value: null }
      // 飞线
      const lineObject = { coords: [[113.4668, 34.6234]] }
      const linesCoord = []
      for (const key in chinaGeoCoordMap) {
        const mapObject = { name: '', value: null }
        // console.log('打印一下key：' + key)
        mapObject.name = key
        mapObject.value = chinaGeoCoordMap[key]
        // chinaDatas.push(JSON.parse(JSON.stringify(mapObject)))
        chinaDatas.push(mapObject)

        if (key !== '广东') {
          lineObject.coords[1] = chinaGeoCoordMap[key]
          linesCoord.push(JSON.parse(JSON.stringify(lineObject)))
        }
      }

      // 配置部分
      const option = {
        // geo配置详解： https://echarts.baidu.com/option.html#geo

        // 这里是配置最下面的地图部分
        geo: {
          zlevel: 0, // 数值越大越是在上面
          map: 'china',
          show: true,
          roam: false, // 使地图不能放大拖动
          top: '20px',
          label: {
            emphasis: {
              show: false,
              focus: 'self'
            }
          },
          // 地图的背景色
          itemStyle: {
            normal: {
              areaColor: 'rgba(0, 0, 0, 0)', // 变成透明
              borderColor: '#fff',
              shadowColor: '#09184F',
              shadowBlur: 20
              // borderWidth: 20
            }
          }
        },
        series: [
          // 配置散点图的数据
          {
            type: 'effectScatter',
            coordinateSystem: 'geo',
            // 要有对应的经纬度才显示，先经度再维度
            data: chinaDatas,
            showEffectOn: 'render',
            rippleEffect: {
              scale: 4, // 波纹的最大缩放比例
              brushType: 'stroke'
            },
            hoverAnimation: true,
            label: {
              normal: {
                show: true,
                formatter: '{b}',
                position: 'right',
                fontWeight: 500,
                fontSize: 14
              }
            },
            itemStyle: {
              normal: {
                // color: '#00e3ff',
                color: 'yellow',
                shadowBlur: 5,
                shadowColor: '#333'
              }
            },
            emphasis: {
              itemStyle: {
                color: '#f4e925' // 高亮颜色
              }
            },
            zlevel: 1
          },
          // 飞线的配置
          {
            type: 'lines',
            coordinateSystem: 'geo',
            zlevel: 1,
            effect: { // 飞机的特效配置
              show: true,
              period: 5,
              trailLength: 0,
              symbol: 'image:src/assets/airplane.svg',
              color: 'yellow',
              symbolSize: 8
            },
            lineStyle: {
              normal: {
                width: 1.2,
                opacity: 0.6,
                curveness: 0.2,
                color: '#FFB800'
              }
            },
            data: linesCoord
          }
        ]
      }
      myChart.setOption(option)
    }
  }
}
</script>
  <style lang="scss" scoped>
  .map{
  width: 900px;
  height: 900px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  // background-image: url("../assets/bg.jpg");
  }
  h2{
    left: 35%;
  top: 15%;
    padding-top: 40px;
    color: #fff;
    font-size:22px;
    // top: 200px;
    position: absolute;
  }

.content {
    width: 800px;
    height: 800px;
    top: 200px;
    position: absolute;
    // height: 100vh;

}
</style>