【原】三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？【面试+工作】

最近阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相关特性。公司目前统一使用的是ECharts图表库，下文将对3种图表库进行分析比对。

BizCharts

文档地址：BizCharts  

http:///index

一、安装

通过 npm/yarn 引入

npm install bizcharts --save yarn add bizcharts --save

二、引用

成功安装完成之后，即可使用 import 或 require 进行引用。

例子：

该示例中，图表的数据配置单独存入了其他js文件中，避免页面太过冗杂

效果预览：

三、DataSet

BizCharts中可以通过dataset(数据处理模块)来对图标数据进行处理，该方法继承自G2，在下文中将对此进行详细分析。

G2

BizCharts基于G2进行开发，在研究BizCharts的过程中也一起对G2进行了实践。

一、安装

和BizCharts一样，可以通过 npm/yarn 引入

npm install @antv/g2 --saveyarn add @antv/g2 --save

与BizCharts不同，G2初始化数据并非以组件的形式引入，而是需要获取需要在某个DOM下初始化图表。获取该DOM的唯一属性id之后，通过chart()进行初始化。

二、引用

示例：

效果图：

三、DataSet

DataSet 主要有两方面的功能，解析数据（Connector）&加工数据（Transform）。

官方文档描述得比较详细，可以参考官网的分类：

源数据的解析，将csv, dsv,geojson 转成标准的JSON，查看Connector  https://antv.alipay.com/zh-cn/g2/3.x/api/connector.html

加工数据，包括 filter,map,fold(补数据) 等操作，查看Transform  https://antv.alipay.com/zh-cn/g2/3.x/api/transform.html

统计函数，汇总统计、百分比、封箱 等统计函数，查看 Transform https://antv.alipay.com/zh-cn/g2/3.x/api/transform.html

特殊数据处理，包括 地理数据、矩形树图、桑基图、文字云 的数据处理，查看 Transform  https://antv.alipay.com/zh-cn/g2/3.x/api/transform.html

以下采用官网文档给出的示例进行分析

示例一

该表格里面的数据是美国各个州不同年龄段的人口数量，表格数据存放在类型为CVS的文件中
数据链接（该链接中为json类型的数据）  https://antv.alipay.com/assets/data/population-by-age.json

State	小于5岁	5至13岁	14至17岁	18至24岁	25至44岁	45至64岁	65岁及以上
WY	38253	60890	29314	53980	137338	147279	65614
DC	36352	50439	25225	75569	193557	140043	70648
VT	32635	62538	33757	61679	155419	188593	86649
...	...	...	...	...	...	...	...

初始化数据处理模块

使用G2绘图
G2-chart Api文档  https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html

ECharts

ECharts是一个成熟的图表库， 使用方便、图表种类多、容易上手。文档资源也比较丰富，在此不做赘述。
ECharts文档

ECharts & BizCharts & G2 对比

对比BizCharts和G2两种图表库，BizCharts主要是进行了一层封装，使得图表可以以组件的形式进行调用，按需加载，使用起来更加方便。
简单对比一下三个图表库的区别：

初始化图表：
ECharts：

BizCharts：

G2：

配置：

ECharts：

BizCharts：

G2:

事件：

ECharts:事件 api文档  

http://echarts.baidu.com/api.html#events

BizCharts:事件 api文档  

http:///products/bizCharts/api/chart#event

G2: 事件 api文档  

https://antv.alipay.com/zh-cn/g2/3.x/api/chart.html#_%E4%BA%8B%E4%BB%B6

总结

对比以上3种图表，ECharts和BizCharts相对容易使用，尤其ECharts的配置非常清晰，BizCharts与其也有一定相似之处。BizCharts优势在于组件化的形式使得dom结构相对清晰，按需引用。G2比较适合需要大量图表交互时引用，其丰富的api处理交互逻辑相对更有优势。