三大图表库:ECharts 、 BizCharts 和 G2,该如何选择?

63次阅读

共计 5997 个字符,预计需要花费 15 分钟才能阅读完成。

最近阿里正式开源的 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 处理交互逻辑相对更有优势。
广而告之
本文发布于薄荷前端周刊,欢迎 Watch & Star ★,转载请注明出处。
欢迎讨论,点个赞再走吧 。◕‿◕。 ~

正文完
 0