ECharts & BizCharts & G2 对比

ECharts & BizCharts & G2 对比

BizCharts

npm install bizcharts --save

yarn add bizcharts  --save

官网

1. BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相关特性。
2. BizCharts中可以通过dataset(数据处理模块)来对图标数据进行处理，该方法继承自G2，在下文中将对此进行详细分析。

G2

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

ECharts

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

对比

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

1. 初始化图表：
   1. ECharts 基于准备好的dom，初始化ECharts 实例
   2. 比BizCharts 以组件的形式，组合调用
   3. G2 基于准备好的dom,配置之后进行初始化
2. 配置：
   1. ECharts 集中在options中进行配置
   2. BizCharts
      根据组件需要，配置参数之后进行赋值
   3. G2
3. 事件

总结

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

参考链接