echarts地图数据信息流向图效果

先看效果：

前提

npm i echarts

下面代码可直接食用：

代码：

<template>
  <div class="echarts">
    <div :style="{height:'500px',width:'500px'}" ref="myEchart"></div>
  </div>
</template>
<script>
import echarts from "echarts";
var geoCoordMap = {
   
  ww: [100, 100],
  xx: [200.00461, 200.01165],
  zz: [400.00461, 300.08395],
  cc: [300.8432, 300.08395],
  zjq: [400.8432, 100.08395],
  yy: [250, 500]
};
export default {
   
  mounted() {
   
    this.chinaConfigure();
  },
  methods: {
   
    chinaConfigure() {
   
      let myChart = echarts.init(this.$refs.myEchart); //这里是为了获得容器所在位置
      window.onresize = myChart.resize;
      myChart.setOption({
   
        backgroundColor: "#000079",
        geo: {
   
          map: "zjq"
        },
        series: [
          {
   
            type: "lines",
            zlevel: 1,
            effect: {
   
              show: true,
              period: 5, //箭头指向速度，值越小速度越快
              trailLength: 0.2, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 6 //图标大小
            },
            lineStyle: {
   
              normal: {
   
                color: "#a6c84c",
                width: 0.2, //尾迹线条宽度
                opacity: 0.2, //尾迹线条透明度
                curveness: 0.3 //尾迹线条曲直度
              },
              emphasis: {
   
                width: 3,
                opacity: 0.5
              }
            },
            data: [
              {
   
                coords: [geoCoordMap["yy"], geoCoordMap["xx"]]
              },
              {
   
                coords: [geoCoordMap["yy"], geoCoordMap["ww"]]
              },
              {
   
                coords: [geoCoordMap["yy"], geoCoordMap["zz"]]
              },
              {
   
                coords: [geoCoordMap["yy"], geoCoordMap["cc"]]
              },
              {
   
                coords: [geoCoordMap["yy"], geoCoordMap["zjq"]]
              }
            ]
          }
        ]
      });
    }
  }
};
</script>
<style scoped>
.echarts {
   
  height: 100%;
  width: 100%;
  display: block;
}
</style>