最近正式開源的BizCharts圖表庫基於React技術棧，各個圖表項皆採用了組件的形式，貼近React的使用特點。同時BizCharts基於G2進行封裝，Bizcharts也繼承了G2相關特性。公司目前統一使用的是ECharts圖表庫，下文將對3種圖表庫進行分析比對。
BizCharts
文檔地址：BizCharts
http://bizcharts.net/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://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處理交互邏輯相對更有優勢。