最近正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点。同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性。公司目前统一使用的是ECharts图表库,下文将对3种图表库进行分析比对。
文档地址:BizCharts
http://bizcharts.net/index
通过 npm/yarn 引入
npm install bizcharts --save
yarn add bizcharts --save
成功安装完成之后,即可使用 import 或 require 进行引用。
例子:
该示例中,图表的数据配置单独存入了其他js文件中,避免页面太过冗杂
效果预览:
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 主要有两方面的功能,解析数据(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文档
对比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处理交互逻辑相对更有优势。