三大图表库: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的文件中
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:
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 ★,转载请注明出处。
欢迎讨论,点个赞再走吧 。◕‿◕。 ~
下一篇: AMD官方揭秘Zen 3和Zen 4架构