本文已参加「新人创作礼」活动，一起开启掘金创作之路

一、效果

二、功能点

1. 有两个固定模块，模块内节点数<=5，可动态配置
2. 连线颜色根据等级变化
3. 多条同source同target的线条会合并，由箭头数表示线条数
4. 地图为热力图

三、流图所使用Echarts的API

1. 绘制热力图图例(visualMap)

visualMap 是视觉映射组件，用于进行『视觉编码』，也就是将数据映射到视觉元素（视觉通道）。 visualMap

• 为了均分三段颜色，需要进行步长计算，并赋值给pieces属性

// 步长为最大值除3取整
let step = Math.floor(max / 3);
// 设置visualMap属性
visualMap: {
  type: 'piecewise',// 类型为分段型
  splitNumber: 3,// 自动平均切分成3段
  pieces: [
    {
      min: 1,
      max: step,
      color: '#71bffe'// 自定义颜色一
    },
    {
      min: step,
      max: 2 * step,
      color: '#437dd4'// 自定义颜色二
    },
    {
      min: 2 * step,
      max: 3 * step,
      color: '#285395'// 自定义颜色三
    }
  ]
};

2. 绘制地图坐标系(geo)

地理坐标系组件用于地图的绘制，支持在地理坐标系上绘制散点图、线集。 geo

• 为了绘制带有涟漪特效动画的散点，需提前建立地图坐标系

worldNameMap.js

geo: {
  map: 'world',
  nameMap: worldNameMap, // 地图名称映射表
  zlevel: 3, // 与map叠加，处于垂直的第三层级
}

3. 绘制流向线条(series-lines)

用于带有起点和终点信息的线数据的绘制，主要用于地图上的航线，路线的可视化。 series-lines

• 为了使线条流畅、分布均匀，设置贝塞尔二次曲线的曲度

const curvenessMap = {
  1: 0.1,
  2: 0.1,
  3: -0.1,
  4: 0.2,
  5: -0.2,
  6: 0.3,
  7: -0.3,
  8: 0.4,
  9: -0.4,
  10: 0.5,
  11: 0.01
};
lineStyle: {
  curveness: curvenessMap[index] // 自定义贝塞尔二次曲线曲度
}

• 绘制线条

series: {
  type: "lines",
  coordinateSystem: "geo",
  zlevel: 4, // 处于垂直的最高层级
  data: linesData,
  effect: {
    show: true,
    constantSpeed: 50,
    symbol: "arrow", // 箭头
    symbolSize: 10,
    trailLength: 0,
  }
}

4. 绘制涟漪状散点(series-effectScatter)

带有涟漪特效动画的散点（气泡）图。利用动画特效可以将某些想要突出的数据进行视觉突出。

ECharts 2.x 中在地图上通过 markPoint 实现地图特效在 ECharts 3 中建议通过地理坐标系上的 effectScatter 实现。 series-effectScatter

• 已提前在第2点中建立地图坐标系，可直接绘制

{
  type: 'effectScatter',
  coordinateSystem: 'geo',
  zlevel: 4,
  symbol: 'circle',
  symbolSize: nowSize(7),
  data: scatterData,
}

5. 绘制热力图(series-map)

地图主要用于地理区域数据的可视化，配合 visualMap 组件用于展示不同区域的人口分布密度等数据。 series-map

• 绘制地图数据 worldNameMap.js

{
  zlevel: 2, //层级位于地图坐标系之下，不遮挡
  type: "map",
  map: "world",
  nameMap: worldNameMap,
  data: mapData,
}

6. 绘制模块及模块内节点(series-map.markPoint)

图表标注。 series-map.markPoint

• 为了连线的准确性，将元素使用markPoint绘制在海上，即地图主体的空白区域

{
  tooltip: {
    show: false,
  },
  coord: item,
  // mapBorder为图片地址
  symbol: "image://" + mapBorder,
  // 指定坐标
  coord: TEXT_COORD_LIST[i],
  itemStyle: {
    opacity: 1
  },
}

四、注意事项

• 由于有双地图(geo和series-map)的叠加，所以不允许移动或缩放
• 数据需经过处理之后再赋值给data
• 动态绘制贝塞尔曲线也需要经过一系列的计算，以source-target为一组，作为key
• 需要抽取多个函数确保逻辑清晰，各司其职