echarts地图涟漪、线集效果

<template>
  <div id="container"></div>
</template>

<script>
import * as echarts from "echarts";
// 地图的json数据
import { china } from "./china";
export default {
  mounted() {
    this.$nextTick(() => {
      this.getMap();
    });
    console.log(china, "json数据");
  },
  methods: {
    getMap() {
      var dom = document.getElementById("container");
      var myChart = echarts.init(dom);
      var option;
      var geoJson = china;
      myChart.showLoading();
      myChart.hideLoading();
      console.log(geoJson, "geoJson");
      echarts.registerMap("china", geoJson);
      myChart.setOption(
        (option = {
          geo: {
            type: "map",
            map: "china",
            top: "5%",
            bottom: "5%",
            label: {
              show: true,
              fontFamily: " Microsoft YaHei",
              fontSize: 12,
              color: "#fff",
              // rotate: -35,
              // https://echarts.apache.org/zh/option.html#geo.label.rich
            },

            itemStyle: {
              //每一块区域的样式
              areaColor: "#0593A3",
              borderColor: "#9FCFFD",
              borderWidth: 0.5,
            },
            emphasis: {
              disabled: false, //取消鼠标经过高亮
              itemStyle: {
                areaColor: "#31C6BC",
              },
            },
          },

          backgroundColor: "#071510",
          //地理坐标系组件。地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图，线集。
          series: [
            {
              type: "lines",
              coordinateSystem: "geo",
              zlevel: 5,
              effect: {
                show: true,
                period: 2, //箭头指向速度，值越小速度越快
                trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
                symbol: "triangle", //箭头图标
                symbolSize: 5, //图标大小
                color: "#37F6E0", // 图标颜色
              },
              lineStyle: {
                normal: {
                  show: true,
                  width: 1, //尾迹线条宽度
                  opacity: 1, //尾迹线条透明度
                  curveness: 0.3, //尾迹线条曲直度
                  color: "#37F6E0", // 飞线颜色
                },
                color: "#37F6E0",
              },
              data: [
                {
                  coords: [
                    [102.712251, 25.040609], // 起点  云南
                    [103.823557, 36.058039], // 终点  甘肃
                  ],
                },
              ],
            },
            {
              type: "effectScatter",
              coordinateSystem: "geo",
              effectType: "ripple", //涟漪特效
              showEffectOn: "render",
              // 散点样式
              rippleEffect: {
                color: "#37F6E0",
                period: 2, // 涟漪特效的动画周期
                scale: 3, // 涟漪特效动画中波纹的最大缩放比例
                brushType: "fill", // 涟漪特效的波纹绘制方式
              },
              // 散点大小
              symbolSize: 15,
              hoverAnimation: true,
              // 标志的样式
              itemStyle: {
                color: "rgba(55,246,224, .7)",
              },
              zlevel: 3,
              data: [
                { name: "云南", value: [102.712251, 25.040609] },
                { name: "甘肃", value: [103.823557, 36.058039] },
              ],
            },
          ],
        })
      );
    },
  },
};
</script>

<style>
#container {
  width: 770px;
  height: 600px;
}
</style>