VUE使用echarts实现中国地图航线动态展示

      由于echarts4以上版本不支持中国地图，所以需要下载一下china.json文件到自己的项目中，可在我的github上下载，地址：https://github.com/LuXiaoNa/chinaMap.git

     在vue项目中实现代码如下：

<template>
  <div>
    <div ref="mapEcharts" style="height: 420px; width: 680px"></div>
  </div>
</template>
<script>
import * as echarts from "echarts"; //使用echarts5.0以上的版本不支持地图，需要引入china.json
import dataJson from "@/utils/china.json"; //引入china.json
export default {
  name: "map",
  props: {   //该文件是子组件，父组件引用传值即可 
    chartData: {
      type: Array,
      default: () => [],
      required: true,
    },
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        echarts.registerMap("china", dataJson); //注册地图范围选择器
        this.chart = echarts.init(this.$refs.mapEcharts);
        window.onresize = this.chart.resize; //如果容器变大小，自适应从新构图
        this.setOptions(val);
      },
    },
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  data() {
    return {
      chart: null,
    };
  },
  methods: {
    setOptions(data = []) {
      this.chart.setOption({
        tooltip: {    //触摸地图悬浮显示的内容样式
          triggerOn: "mousemove", //mousemove、click
          padding: 8,
          borderWidth: 1,
          borderColor: "#409eff",
          backgroundColor: "rgba(255,255,255,0.7)",
          textStyle: {
            color: "#000000",
            fontSize: 13,
          },
        },
        geo: {
          // 地理坐标系组件,支持在地理坐标系上绘制散点图、线图
          map: "china",
          aspectScale: 0.75,
          zoom: 1.19, //地图的显示大小
          label: {
            //地图上的文字
            show: true,
            textStyle: {
              color: "#ABB4C2",
            },
          },
          roam: true /*是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启*/,
          itemStyle: {
            /*地图区域的多边形 图形样式*/
            normal: {
              areaColor: {
                // 地图区域的颜色
                type: "radial", // 径向渐变
                x: 0.2, // 圆心 x,y
                y: 0.6,
                r: 0.6, // 半径
                colorStops: [
                  {
                    offset: 0,
                    color: "#083d6b", // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "#0c1620", // 100% 处的颜色
                  },
                ],
                globalCoord: false, // 缺省为 false
              },
              borderColor: "rgba(147, 235, 248, 0.5)", // 图形的描边颜色
              borderWidth: 1, // 描边宽度 0表示无描边
              shadowColor: "rgba(128, 217, 248, 0.5)", // 阴影颜色
              shadowOffsetX: -1 /*阴影水平方向上的偏移距离。*/,
              shadowOffsetY: 1 /*阴影垂直方向上的偏移距离。*/,
              shadowBlur: 5, // 图形阴影的模糊大小
            },
            emphasis: {
              areaColor: "#073458", //触摸区域的背景颜色
              borderWidth: 0,
            },
          },
        },
        series: [
          // 地图的线路图动画效果相关设置
          {
            type: "lines",
            zlevel: 1,
            effect: {
              show: true,
              period: 15, //特效动画的时间，单位为 s。
              trailLength: 0, //特效尾迹的长度。取从 0 到 1 的值，数值越大尾迹越长
              scale: 0, //波纹圆环最大限制，值越大波纹越大 ,重要，否则显示越来越多
              symbol:
                "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", //线上的飞机图标，可直接复制使用
              symbolSize: 15, //图标的大小
            },
            lineStyle: {
              normal: {
                color: "#839b52",
                width: 2, //尾迹航线宽度
                opacity: 0.4,
                curveness: 0.2, //线的弯曲度
              },
            },
            data: data, 
          },
        ],
      });
    },
  },
};
</script>

其中数据结构是有地点的经纬度构成的三维数据，如下所示：

[[[113.811,22.639],[ 119.125,33.791]],[[118.128, 24.544],[ 119.125, 33.791]]]

实现效果如下图所示：