Vue+Echarts 实现迁徒图

做了一个echarts的迁徒图，主要是通过 echarts 还有依赖 echarts-extension-amap完成

效果如下：

该功能需要下载依赖 

npm install echarts-extension-amap --save

npm install echarts 

话不多说直接上代码

<template>
  //设置容器盒子一定要给宽高
  <div ref="mapchart" class="mapchart"></div>
</template>

<script>
import "echarts-extension-amap";

export default {
data() {
    return {
      mychart: null,
    };
  },
},
  mounted() {
    // 初始化地图
    this.MapInit();
    // this.chartinit()
  },
 methods: {
    MapInit() {
      this.mychart = null;
      //我是把echarts挂载到vue了  没挂载页面需要单独引入 import * as echarts from 'echarts';
      this.mychart = this.$echarts.init(this.$refs.mapchart);
      // 流线起始点
      let flyLine = [
       //前面的点位为中心流动点
        {
          coords: [
            [118.33688, 30.91969],
            [123.499706, 41.857793],
          ],
        },
        {
          coords: [
            [118.33688, 30.91969],
            [86.113232, 43.684254],
          ],
        },
        {
          coords: [
            [118.33688, 30.91969],
            [87.343701, 35.720308],
          ],
        },
        {
          coords: [
            [118.33688, 30.91969],
            [101.406201, 24.177443],
          ],
        },
        {
          coords: [
            [118.33688, 30.91969],
            [111.249951, 24.976714],
          ],
        },
        {
          coords: [
            [118.33688, 30.91969],
            [107.206982, 33.843608],
          ],
        },
        {
          coords: [
            [118.33688, 30.91969],
            [115.468701, 43.557002],
          ],
        },
        {
          coords: [
            [118.33688, 30.91969],
            [107.031201, 37.134586],
          ],
        },
      ];
      // 点集
      let goals = [
        [123.499706, 41.857793],
        [86.113232, 43.684254],
        [87.343701, 35.720308],
        [101.406201, 24.177443],
        [111.249951, 24.976714],
      ];
      let _this = this;
      let option = {
        // 加载 amap 组件
        amap: {
          // 高德地图中心经纬度
          center: [118.33688, 30.91969], //中心点
          // 高德地图缩放
          zoom: 5,
          zoomEnable: true,
          dragEnable: true,
          // 启用resize
          resizeEnable: false,
          // 自定义地图样式主题
          mapStyle: "amap://styles/bb7f5165253f57515d7ba226b25ad7ec", //地图主题
          viewMode:'3D',//开启3D视图,默认为关闭
          expandZoomRange:true,
          zooms:[3,10],
          pitch: 0
        },
        tooltip: {
          trigger: "item",
          show: false,
        },
        animation: false,
        series: [
          // 流线
          {
            coordinateSystem: "amap", // 该系列使用的坐标系是高德地图的坐标系
            type: "lines", // 该类型用于地图上路线的绘制
            zlevel: 1, // 相当于z-index
            map: "china",
            label: {
              show: true,
            },
            roam: true,
            effect: {
              // 线特效的配置
              show: true, // 是否显示特效
              period: 5, // 特效动画的时间
              trailLength: 0.1, // 特效尾迹的长度 0-1
              color: "red", // 特效的颜色
              symbolSize: 6, // 特效的大小
            },
            lineStyle: {
              // 线的颜色
              normal: {
                color: "green",
                width: 2,
                curveness: 0.2,
                // 虚线
                type: "dashed",
              },
            },
            data: flyLine,
          },
          // 目标点
          {
            name: "目标点",
            type: "scatter",
            // 使用高德地图坐标系
            coordinateSystem: "amap",
            // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
            data: goals,
            symbolSize: 3,
            encode: {
              value: 2,
            },
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false,
              },
              emphasis: {
                show: true,
              },
            },
            itemStyle: {
              normal: {
                color: "rgba(98,122,200,0.78)",
              },
            },
          },
        ],
      };
      option && this.mychart.setOption(option);
    },
</script>