三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

最近阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相关特性。公司目前统一使用的是ECharts图表库，下文将对3种图表库进行分析比对。BizCharts文档地址：BizCharts一、安装通过 npm/yarn 引入npm install bizcharts –saveyarn add bizcharts –save二、引用成功安装完成之后，即可使用 import 或 require 进行引用。例子：import { Chart, Geom, Axis, Tooltip, Legend } from ‘bizcharts’;import chartConfig from ‘./assets/js/chartConfig’;<div className=“App”> <Chart width={600} height={400} data={chartConfig.chartData} scale={chartConfig.cols}> <Axis name=“genre” title={chartConfig.title}/> <Axis name=“sold” title={chartConfig.title}/> <Legend position=“top” dy={-20} /> <Tooltip /> <Geom type=“interval” position=“genresold” color=“genre” /> </Chart></div>该示例中，图表的数据配置单独存入了其他js文件中，避免页面太过冗杂module.exports = { chartData : [ { genre: ‘Sports’, sold: 275, income: 2300 }, { genre: ‘Strategy’, sold: 115, income: 667 }, { genre: ‘Action’, sold: 120, income: 982 }, { genre: ‘Shooter’, sold: 350, income: 5271 }, { genre: ‘Other’, sold: 150, income: 3710 } ], // 定义度量 cols : { sold: { alias: ‘销售量’ }, // 数据字段别名映射 genre: { alias: ‘游戏种类’ } }, title : { autoRotate: true, // 是否需要自动旋转，默认为 true textStyle: { fontSize: ‘12’, textAlign: ‘center’, fill: ‘#999’, fontWeight: ‘bold’, rotate: 30 }, // 坐标轴文本属性配置 position:‘center’, // 标题的位置，新增 }}效果预览：三、DataSetBizCharts中可以通过dataset(数据处理模块)来对图标数据进行处理，该方法继承自G2，在下文中将对此进行详细分析。快速跳转G2BizCharts基于G2进行开发，在研究BizCharts的过程中也一起对G2进行了实践。一、安装和BizCharts一样，可以通过 npm/yarn 引入npm install @antv/g2 –saveyarn add @antv/g2 –save与BizCharts不同，G2初始化数据并非以组件的形式引入，而是需要获取需要在某个DOM下初始化图表。获取该DOM的唯一属性id之后，通过chart()进行初始化。二、引用示例：import React from ‘react’;import G2 from ‘@antv/g2’; class g2 extends React.Component {constructor(props) { super(props); this.state = { data :[ { genre: ‘Sports’, sold: 275 }, { genre: ‘Strategy’, sold: 115 }, { genre: ‘Action’, sold: 120 }, { genre: ‘Shooter’, sold: 350 }, { genre: ‘Other’, sold: 150 } ] }; } componentDidMount() { const chart = new G2.Chart({ container: ‘c1’, // 指定图表容器 ID width: 600, // 指定图表宽度 height: 300 // 指定图表高度 }); chart.source(this.state.data); chart.interval().position(‘genresold’).color(‘genre’); chart.render(); } render() { return ( <div id=“c1” className=“charts”> </div> ); }}export default g2;效果图：三、DataSetDataSet 主要有两方面的功能，解析数据（Connector）&加工数据（Transform）。官方文档描述得比较详细，可以参考官网的分类：源数据的解析，将csv, dsv,geojson 转成标准的JSON，查看Connector加工数据，包括 filter,map,fold(补数据) 等操作，查看Transform统计函数，汇总统计、百分比、封箱 等统计函数，查看 Transform特殊数据处理，包括 地理数据、矩形树图、桑基图、文字云 的数据处理，查看 Transform// step1 创建 dataset 指定状态量const ds = new DataSet({ state: { year: ‘2010’ }});// step2 创建 DataViewconst dv = ds.createView().source(data);dv.transform({ type: ‘filter’, callback(row) { return row.year === ds.state.year; }});// step3 引用 DataViewchart.source(dv);// step4 更新状态量ds.setState(‘year’, ‘2012’);以下采用官网文档给出的示例进行分析 示例一该表格里面的数据是美国各个州不同年龄段的人口数量，表格数据存放在类型为CVS的文件中数据链接（该链接中为json类型的数据）State小于5岁5至13岁14至17岁18至24岁25至44岁45至64岁65岁及以上WY3825360890293145398013733814727965614DC3635250439252257556919355714004370648VT3263562538337576167915541918859386649……………………初始化数据处理模块import DataSet from ‘@antv/data-set’;const ds = new DataSet({//state表示创建dataSet的状态量，可以不进行设置 state: { currentState: ‘WY’ }});const dvForAll = ds// 在 DataSet 实例下创建名为 populationByAge 的数据视图 .createView(‘populationByAge’) // source初始化图表数据，data可为http请求返回的数据结果 .source(data, { type: ‘csv’, // 使用 CSV 类型的 Connector 装载 data，如果是json类型的数据，可以不进行设置，默认为json类型});/**trnasform对数据进行加工处理，可通过type设置加工类型，具体参考上文api文档加工过后数据格式为[{state:‘WY’,key:‘小于5岁’，value:38253},{state:‘WY’,key:‘5至13岁’，value:60890},]/ dvForAll.transform({ type: ‘fold’, fields: [ ‘小于5岁’,‘5至13岁’,‘14至17岁’,‘18至24岁’,‘25至44岁’,‘45至64岁’,‘65岁及以上’ ], key: ‘age’, value: ‘population’});//其余transform操作const dvForOneState = ds .createView(‘populationOfOneState’) .source(dvForAll); // 从全量数据继承，写法也可以是.source(‘populationByAge’) dvForOneState .transform({ // 过滤数据，筛选出state符合的地区数据 type: ‘filter’, callback(row) { return row.state === ds.state.currentState; }}) .transform({ type: ‘percent’, field: ‘population’, dimension: ‘age’, as: ‘percent’ });使用G2绘图G2-chart Api文档import G2 from ‘@antv/g2’;// 初始化图表，id指定了图表要插入的dom，其他属性设置了图表所占的宽高const c1 = new G2.Chart({ id: ‘c1’, forceFit: true, height: 400,});// chart初始化加工过的数据dvForAllc1.source(dvForAll);// 配置图表图例c1.legend({ position: ’top’,});// 设置坐标轴配置，该方法返回 chart 对象，以下代码表示将坐标轴属性为人口的数据，转换为M为单位的数据c1.axis(‘population’, { label: { formatter: val => { return val / 1000000 + ‘M’; } }});c1.intervalStack() .position(‘statepopulation’) .color(‘age’) .select(true, { mode: ‘single’, style: { stroke: ‘red’, strokeWidth: 5 } }); //当tooltip发生变化的时候，触发事件,修改ds的state状态量，一旦状态量改变，就会触发图表的更新，所以c2饼图会触发改变c1.on(’tooltip:change’, function(evt) { const items = evt.items || []; if (items[0]) { //修改的currentState为鼠标所触及的tooltip的地区 ds.setState(‘currentState’, items[0].title); }});// 绘制饼图const c2 = new G2.Chart({ id: ‘c2’, forceFit: true, height: 300, padding: 0,});c2.source(dvForOneState);c2.coord(’theta’, { radius: 0.8 // 设置饼图的大小});c2.legend(false);c2.intervalStack() .position(‘percent’) .color(‘age’) .label(‘age*percent’,function(age, percent) { percent = (percent * 100).toFixed(2) + ‘%’; return age + ’ ’ + percent; });c1.render();c2.render();EChartsECharts是一个成熟的图表库， 使用方便、图表种类多、容易上手。文档资源也比较丰富，在此不做赘述。ECharts文档ECharts & BizCharts & G2 对比对比BizCharts和G2两种图表库，BizCharts主要是进行了一层封装，使得图表可以以组件的形式进行调用，按需加载，使用起来更加方便。简单对比一下三个图表库的区别：初始化图表：ECharts：// 基于准备好的dom，初始化ECharts实例var myChart = echarts.init(document.getElementById(‘main’));BizCharts：// 以组件的形式，组合调用import { Chart, Geom, Axis, … } from ‘bizcharts’;<Chart width={600} height={400} data={data}> …</Chart>G2：// 基于准备好的dom，配置之后进行初始化const chart = new G2.Chart({ container: ‘c1’, // 指定图表容器 ID width: 600, // 指定图表宽度 height: 300 // 指定图表高度});chart.source(data);chart.render(); <div id=“c1” className=“charts”></div>配置：ECharts：// 集中在options中进行配置myChart.setOption({ title: { … }, tooltip: {}, xAxis: { data: […] }, yAxis: {}, series: [{ … }]});BizCharts：// 根据组件需要，配置参数之后进行赋值const cols = {…};const data = {…};<Chart width={600} height={400} data={data} scaenter code herele={cols}> …</Chart>G2:chart.tooltip({ triggerOn: ‘…’ showTitle: {boolean}, // 是否展示 title，默认为 true crosshairs: { … style: { … } }});事件：ECharts:事件 api文档myChart.on(‘click’, function (params) { console.log(params);});BizCharts:事件 api文档<chart onEvent={e => { //do something }}/>G2: 事件 api文档chart.on(‘mousedown’, ev => {});总结对比以上3种图表，ECharts和BizCharts相对容易使用，尤其ECharts的配置非常清晰，BizCharts与其也有一定相似之处。BizCharts优势在于组件化的形式使得dom结构相对清晰，按需引用。G2比较适合需要大量图表交互时引用，其丰富的api处理交互逻辑相对更有优势。广而告之本文发布于薄荷前端周刊，欢迎Watch & Star ★，转载请注明出处。欢迎讨论，点个赞再走吧 ｡◕‿◕｡ ～