AntV/G2Plot v2.0 技术架构思考

G2Plot v2 版本，从今年 8 月开始开发，目前差不多已经快 4 个月了，达成：

• 25+ 常用的统计图表
• 80% 图表在复杂 BI，LowCode 产品中使用验证
• 97% 代码单测覆盖率
• 5+ 积极的社区同学参数

后续我们会继续在几个方面深入：

1. 按照业务需求去提升，图表丰富度（桑基图、矩阵树图等），并在复杂业务系统去实践和应用
2. 文档、场景 DEMO，降低使用者的门槛和成本

那么，本文会介绍 G2Plot 2.0 版本开发，从业务到技术架构的一个思考，可能比较混乱，轻喷！

---

首先自我介绍一下，我是蚂蚁大数据部门的前端，主要负责 DeepInsight 这个 BI 产品的数据分析能力，同时会做 AntV 统计图表 G2，G2Plot 的开发和迭代。

从 BI 的角度出发，我们可以理解一下这一张图。

数据可视化对于我们 BI 产品来说，非常重要，并且随着时间的推移，数据量的堆积，可视化能力对于任何一个互联网产品，都是非常重要的。

问题

为了描述 G2Plot 新架构的内容，必须先说一下旧架构存在或者带来的问题。

• 业务问题

去年我们在 G2Plot v1 基础上，做了不少图表体验优化的事情，但是因为代码架构、质量问题，导致我们在业务中只能锁死版本，很难持续迭代。虽然基于 G2Plot，我们解决了很多问题，但是也带来了其他更多的业务迭代问题。

• 架构问题

G2Plot 架构设计上，没有完全依赖 G2，创建一个图表没有一个明显的模式。这个带来的问题是：

1. 和 G2 并行发展，不利于积累 G2 的能力
2. 代码杂乱，新手参入门槛高，难以贡献代码。1 + 1 远小于 2
3. 稳定性、质量难以保障，维护性问题（这一点也和单测不完备有关）

• 开放能力问题

业务上使用 G2 做业务定制图表，或者直接用 G2Plot，都存在一个问题是：如何去做定制、定制的体验优化？目前部分的优化都是 hack 的方式。急需打破隔离

1. G2 是否有足够开放的能力，给 G2Plot 或者业务做体验优化？
2. G2Plot 是否有足够的配置和配置扩展能力，去做业务自定义？

上手简单 和 灵活扩展能力 两者是一个平衡和取舍，对于业务开发的同学来说，这个就显得非常重要了。

架构设计

新架构的几个宗旨：

• G2Plot 层轻量化

G2Plot 是基于 G2 能力，进行组装成一个一个单独的常用业务统计图表。主要原因有二：

1. 常用的统计图表使用量超过 80%
2. 便于 G2 层能力的沉淀和提升，包括布局、图形、交互、动画等能力
3. G2 基于图形语法，没有图表的概念，无法针对性的图表优化，G2Plot 基于图表分类学，可以进行针对性的处理。

• 配置式 API 使用方式

继续延续 v1 的配置式的使用方式，一方面是确实可以降低用户的入门和使用成本，另一方面是保证大版本之间的相对兼容性。

整体梳理的架构图如下所示：

架构解读

本质上，G2Plot 这一层是非常简单和轻量的，它做的事情主要包含有三个点：

Schema & Adaptor

定义不同图形的 schema 配置，然后开发 Adaptor 代码片段，将 schema 配置转化成 G2 的 API。例如对于折线图：

{ xField: 'year', yField: 'sale', data: [ / .../ ], }

转成 G2 的代码即为：

chart.data(data); chart.line().position(${xField}*${yField});

而这其中，legend、tooltip、axis 都直接延续 G2，不会增加任何其他的概念。

图表分类和定制

针对不同图表的一些体验优化逻辑，例如对于 label 重叠，我们可以针对不同的图形去加载不同的布局函数片段。比如：

• point-adjust-position
• limit-in-canvas
• ...

开放扩展机制

暴露 G2 灵活的自定义能力，提供开发扩展机制。G2Plot 内置的是常用的统计图表，而对于不常用的定制图表，可以方便的通过扩展机制去基于 G2 自定义。

我们将 G2Plot 基于 G2 开发图表的 Adaptor 模式直接开放出来，业务同学可以基于这一个模式去使用 G2 封装定制图表，如果需要给其他业务复用，直接发包，在 G2Plot 的模式上去使用。举个例子：

以上是一个真实的基于 G2 按照 G2Plot 的模式开发一个 QRCode 图形能力，整体代码 100 行左右。基于这样的模式，参考文档开发自定义扩展图表去进行自定义的业务封装和复用。

最后

目前我们最重要的事情是，让 G2Plot 成为一个业务可用的可视化图表库。主要包含：

1. 尽可能的通过技术手段，去降低 G2 图形语法的使用成本，同时科普可视化技术知识
2. 尽可能的提高底层模块的质量、稳定性，不然底层技术模块阻碍业务迭代，甚至给业务代码不稳定因素

欢迎对于可视化技术感兴趣的同学，加入到 G2Plot 后续的持续迭代中，你可以：

• 文档、DEMO、翻译等相对门槛低的事情入门
• G2Plot 的内置图表研发和迭代
• 基于 G2Plot 的开放开放机制，扩展周边非通用图表

感谢！对了，还有项目开源地址：https://github.com/antvis/G2Plot ✨✨✨。更多关于 G2Plot 的文章看这里。