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

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

BizCharts

文档地址：BizCharts

http://bizcharts.net/index

一、安装

通过 npm/yarn 引入

npm install bizcharts --saveyarn 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岁及以上

WY3825360890293145398013733814727965614

DC3635250439252257556919355714004370648

VT3263562538337576167915541918859386649

........................

初始化数据处理模块

使用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://bizcharts.net/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处理交互逻辑相对更有优势。