如何用 echart 做迁徙图（相关配置，简单记录）

安装echarts

npm install echarts --save

我使用的echarts版本。据说，低版本的echarts并没有地图相关数据。

"echarts": "^4.9.0",

引入echarts和地图数据

import echarts from "echarts";
import "echarts/map/js/china.js";

准备数据

 // 准备数据
const data = [
    {
      fromName: "湖南",
      toName: "上海",
      value: 100,
    },
    {
      fromName: "湖南",
      toName: "广东",
      value: 50,
    },
    {
      fromName: "湖南",
      toName: "北京",
      value: 30,
    },
    {
      fromName: "湖南",
      toName: "江西",
      value: 5,
    },
    {
      fromName: "湖南",
      toName: "广西",
      value: 30,
    },
];

获取地图数据

/*获取地图数据*/
var geoCoordMap = {};
var mapName = "china";
var mapFeatures = echarts.getMap(mapName).geoJson.features;
mapFeatures.forEach(function (v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});

转换数据

const convertData = function (data) {
    const res = [];
    for (let i = 0; i < data.length; i++) {
      const fromCoord = geoCoordMap[data[i].fromName];
      const toCoord = geoCoordMap[data[i].toName];
      if (fromCoord && toCoord) {
        res.push({
          fromName: data[i].fromName,
          toName: data[i].toName,
          coords: [fromCoord, toCoord],
        });
      }
    }
    return res;
};

初始化echarts

<div ref="myEchart"></div>
//初始化
this.chart = echarts.init(this.$refs.myEchart);
this.chart.setOption(option);

option选项配置

const option = {
    geo: {
      map: "china", // 地图类型
      roam: true, // 是否开启缩放和拖拽
      zoom: 1.2, // 地图初始缩放比例
      label: {
        show: true, // 是否显示标签
        textStyle: {
          color: "#000", // 标签字体颜色
          fontSize: 12, // 标签字体大小
        },
      },
      itemStyle: {
        areaColor: "#f2f2f2", // 地图区域颜色
        borderColor: "#999", // 地图区域边框颜色
      },
    },
    series: [
      {
        type: "lines", // 系列类型：迁徙图
        zlevel: 2, // 图层深度，越大越靠上
        effect: {
          color: "#FCE931", // 特效颜色
          show: true, // 是否开启特效
          period: 10, // 特效动画时间，单位为 s
          trailLength: 0, // 特效尾迹的长度，值越大尾迹越长
          symbol: "arrow", // 特效标记类型
          // symbol: 'image://' + require('@/assets/img/screen/mario.png'),  // require引入图片路径
          // symbol: 'image://' + require('@/assets/img/screen/rocket.svg'),  // require引入图片路径
          symbolSize: 10, // 特效标记大小
        },
        lineStyle: {
          normal: {
            // color: "#0fff17", // 线条颜色
            color: "#FCE931", //线条颜色
            width: 2, //线条宽度
            opacity: 0.5, //线条透明度
            curveness: 0.1, //线条曲度
          },
        },
        data: convertData(data), // 数据
      },
    ],
};

特效标记类型

可以通过 symbol 配置一个自定义图片，譬如：

symbol: 'image://' + require('@/assets/img/screen/rocket.svg'),