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

Posted 2021-01-11 lalalagq

最近阿里正式开源的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 ★，转载请注明出处。

欢迎讨论，点个赞再走吧 ????? ～