Bootstrap

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>
;