三大图表库:ECharts BizCharts 和 G2,该如何选择?
Posted shaoshuai0305
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三大图表库:ECharts BizCharts 和 G2,该如何选择?相关的知识,希望对你有一定的参考价值。
最近阿里正式开源的BizCharts图表库基于React技术栈,各个图表项皆采用了组件的形式,贴近React的使用特点。同时BizCharts基于G2进行封装,Bizcharts也继承了G2相关特性。公司目前统一使用的是ECharts图表库,下文将对3种图表库进行分析比对。
BizCharts
文档地址:BizCharts
一、安装
通过 npm/yarn 引入
npm install bizcharts --save
yarn 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="genre*sold" 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‘, // 标题的位置,**新增** } }
效果预览:
三、DataSet
BizCharts中可以通过dataset(数据处理模块)来对图标数据进行处理,该方法继承自G2,在下文中将对此进行详细分析。
G2
BizCharts基于G2进行开发,在研究BizCharts的过程中也一起对G2进行了实践。
一、安装
和BizCharts一样,可以通过 npm/yarn 引入
npm install @antv/g2 --save
yarn 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(‘genre*sold‘).color(‘genre‘); chart.render(); } render() { return ( <div id="c1" className="charts"> </div> ); } } export default g2;
效果图:
三、DataSet
DataSet 主要有两方面的功能,解析数据(Connector)&加工数据(Transform)。
官方文档描述得比较详细,可以参考官网的分类:
源数据的解析,将csv, dsv,geojson 转成标准的JSON,查看Connector
加工数据,包括 filter,map,fold(补数据) 等操作,查看Transform
统计函数,汇总统计、百分比、封箱 等统计函数,查看 Transform
特殊数据处理,包括 地理数据、矩形树图、桑基图、文字云 的数据处理,查看 Transform
// step1 创建 dataset 指定状态量 const ds = new DataSet({ state: { year: ‘2010‘ } }); // step2 创建 DataView const dv = ds.createView().source(data); dv.transform({ type: ‘filter‘, callback(row) { return row.year === ds.state.year; } }); // step3 引用 DataView chart.source(dv); // step4 更新状态量 ds.setState(‘year‘, ‘2012‘);
以下采用官网文档给出的示例进行分析
示例一
该表格里面的数据是美国各个州不同年龄段的人口数量,表格数据存放在类型为CVS的文件中
数据链接(该链接中为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 |
... | ... | ... | ... | ... | ... | ... | ... |
初始化数据处理模块
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初始化加工过的数据dvForAll c1.source(dvForAll); // 配置图表图例 c1.legend({ position: ‘top‘, }); // 设置坐标轴配置,该方法返回 chart 对象,以下代码表示将坐标轴属性为人口的数据,转换为M为单位的数据 c1.axis(‘population‘, { label: { formatter: val => { return val / 1000000 + ‘M‘; } } }); c1.intervalStack() .position(‘state*population‘) .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();
ECharts
ECharts是一个成熟的图表库, 使用方便、图表种类多、容易上手。文档资源也比较丰富,在此不做赘述。
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} sca`enter code here`le={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处理交互逻辑相对更有优势。
以上是关于三大图表库:ECharts BizCharts 和 G2,该如何选择?的主要内容,如果未能解决你的问题,请参考以下文章