Canvas

SVG

WebGl

Three.js

Echart/G2/D3

Echart

• 简述

该库为百度团队开发，因其开源免费又容易手上，所以很快流行起来。

正如其名 Echarts，亦如其它的 xxCharts 类库一样，该库中封装了绝大多数常规 chart，用户通过配置 options 参数，就可很容易绘制指定图表。

• 优势：

容易上手：其语法类似 css 的参数配置型语法，学习门槛较低。

图表种类较丰富：因其发布较早且有百度团队维护，其提供的图表类型已能满足绝大部分常规性的业务需求。

• 劣势：

自由度差：参数配置型语法库的本质是调用现成的绘图函数，所以此类库的通病就是定制化能力差，想做出开发者未封装的图表非常难。

代码复用率低：因为此类库封装程度已非常高，所以很难对其进一步抽象和封装。

• 产品受众：

无数据可视化知识的前端工程师

G2

• 简述：

该库由蚂蚁金服 antV 团队开发，其设计理念更有学术性，走出了一条与 echarts 不同的产品线路。

正如其名 The Grammar of Graphics -可视化图形语法，该库有着被称为可视化圣经的《The Grammar of Graphics》作理论支撑，将可视化理论与web技术做了非常好的结合。

• 优势：

自由度较高：由可视化理论做基础，没有类似 Echart 的 chart 概念，可用“可视化语法”绘制想要的图表，非常灵活。

例如一根堆积柱形图的坐标系由笛卡尔坐标系改为极坐标系，堆积柱形图就变为了圆环图。

代码复用率较高：因其有一套完善的可视化语法，所以团队或公司可根据自己的 UI 需求，用 g2 做底层库，封装自己的 charts 库。

• 劣势：

学习成本稍高：g2 有理论的加持既是优势也是劣势；优势是更高效了，却也提高了可视化小白的使用门槛。

比如理解 g2 的绘图原理至少要知道数据可视化的五种“视觉通道”：数据可以映射到 position, size, color, shape, opacity 五个维度等等。

• 产品受众：

数据可视化工程师 希望向数据可视化领域发展的前端工程师

D3

简述：

该库几乎凭 Mike Bostock 一人之力完成，且在学术界、专业团队中享有极大声誉。(想自学 D3 的同学请戳 《如何自学 D3》)

该库更接近底层，与 g2、echarts 不同，d3 能直接操作 svg，所以拥有极大的自由度，几乎可以实现任何 2d 的设计需求。

正如其名 Data Driven Documents，其本质是将数据与 DOM 绑定，并将数据映射至 DOM 属性上(这时视觉通道、比例尺转换等理论就可发挥作用喽～)。

同时，如下图，d3 长于可视化，而不止于可视化，还提供了数据处理、数据分析、DOM 操作等诸多功能。

• 优势：

掌握 d3 后，限制作品水平的只会是想象力而不再是技术。

• 劣势：

学习门槛较高，对用户的 web 技术、可视化理论、数学逻辑都一定要求。

• 产品受众：

希望向中高水平进阶的可视化工程师

希望向中高水平进阶的前端工程师