数据可视化前端项目开发 - 图表

图表

highchart vs g2plot

在 chart 库的选择上，项目先后使用了 highchart 和 g2plot。在我接手项目之前，用的是 highchart 库，但 highchart 有 3 点是让我挺难受的。

1. 无法直接将数据源转为 chart ，必须进行一轮复杂的数据转换去匹配 highchart 的配置方式。
2. 由于无法直接将数据源变成 chart，老系统非常粗暴的将整个 highchart 配置都交给后端来编写，前端侧无法控制 chart 呈现，而后端同学几经转手难以理解其中的配置，每每有 chart 改动需求都非常头疼。
3. 就我个人而言，highchart 的官方文档写的很差劲，看文档很累。

在我们前后端同学再 highchart 的泥潭中挣扎一段时间后，逐步使用蚂蚁的 g2plot 来替代。收益也很明显。

1. g2 和 g2plot 的文档和示例非常友好，很容易入手。
2. g2plot 的 chart 呈现是将数据源和 chart 配置分离的，后端同学只需要提供一串数据数组，chart 配置的事情都交给前端即可。
3. g2 的功能非常强大，目前项目已经基于 g2 实现了中国地图、折线图、双轴图、饼图、环图、柱状图、条形图以及更加复杂的组合图。

g2plot 在 Vue 中的封装

因为 g2plot 并没有特别针对 Vue 的封装，简单写了个组件用于 Vue 项目中。

中国地图数据占比图

在 g2plot 中并没有快捷的地图选项，这就得用到更强大的 g2 的地图了。做地图要注意几点：

1. 中国地图的 geo 数据 g2 并没有提供，我用的是 github 上的 china-geojson 库，里面包含了中国及各省市的经纬度信息。
2. 当时后端同学给我的省市名称是简写，如上海、新疆这种，而非全称。这样是无法匹配数据显示到地图上的。后端提供的数据源必须和地图 json 文件中的信息一致。

效果如下

map

复杂图表的实现

另外还有一种比较麻烦的图表是那种用户想要的定制化图表，比如下面两个：

组合条形图

组合双轴图

以上 chart 都可以通过 g2plot 的 多图层图表 Mix 来实现的。想要实现多图层图表其实并不复杂，只要将它拆分为最小单位的一个个图表，就像 PhotoShop 的图层一样堆叠实现就可以了。

不过多图层图表是有一些坑的：

• 多图层图表的 legend 图例并无法显示完全，暂时没有找到原因。我是通过异常 g2 的图例自己手写替代来绕过的。
• 多图层的图标 tooltip 提示信息在某些地方会出现不停闪烁的问题，暂时没有解决。
• 图表的标注属性 annotations 会出现在整个图表的最上层，而不是当前图表上层，会出现遮挡其他图层的图表的问题，暂时没有解决。

另外一些需求

• 在折线图上增加关键点的小旗标识（使用 g2 的绘图功能）。

G2.registerShape('point', 'flag-point', {
  draw(cfg, container) {
    const point = { x: cfg.x, y: cfg.y }
    const group = container.addGroup()
    if (cfg.data.operation_event && cfg.data.operation_event.length > 0) {
      group.addShape('image', {
        attrs: {
          x: point.x - 4,
          y: point.y - 20,
          img: FlagImg,
          width: 16,
          height: 16,
        },
      })
    }

    return group
  },
})

• 在 tooltip 中增加额外信息（使用 tooltip 的 customContent 方法）。
• 在折线图中将某一段标为虚线（使用 Line 的 annotations 属性）。