dataset的去重计数 g2_三大图表库：ECharts 、 BizCharts 和 G2，该如何选择？

最近阿里正式开源的BizCharts图表库基于React技术栈，各个图表项皆采用了组件的形式，贴近React的使用特点。同时BizCharts基于G2进行封装，Bizcharts也继承了G2相关特性。公司目前统一使用的是ECharts图表库，下文将对3种图表库进行分析比对。

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';

该示例中，图表的数据配置单独存入了其他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 (

);

}

}

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 创建 DataViewconst 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类型的数据)

初始化数据处理模块

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'

});

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('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';

...

G2：

// 基于准备好的dom，配置之后进行初始化

const chart = new G2.Chart({

container: 'c1', // 指定图表容器 ID

width: 600, // 指定图表宽度

height: 300 // 指定图表高度

});

chart.source(data);

chart.render();

配置：

ECharts：

// 集中在options中进行配置

myChart.setOption({

title: {

...

},tooltip:{},xAxis:{

data: [...]

},yAxis:{},series: [{

...

}]

});

BizCharts：

// 根据组件需要，配置参数之后进行赋值

const cols = {...};

const data = {...};

...

G2:

chart.tooltip({

triggerOn: '...'

showTitle: {boolean}, // 是否展示 title，默认为 truecrosshairs:{

...

style: {

...

}

}

});

事件：

ECharts:事件 api文档

myChart.on('click', function (params) {

console.log(params);

});

BizCharts:事件 api文档

onEvent={e => {

//do something

}}

/>

chart.on('mousedown', ev => {});

总结

对比以上3种图表，ECharts和BizCharts相对容易使用，尤其ECharts的配置非常清晰，BizCharts与其也有一定相似之处。BizCharts优势在于组件化的形式使得dom结构相对清晰，按需引用。G2比较适合需要大量图表交互时引用，其丰富的api处理交互逻辑相对更有优势。

小月儿