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

57

最近阿里正式开源的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', // 标题的位置,**新增**
    }
}

效果预览:
BizCharts示例

三、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;

效果图:
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 ★,转载请注明出处。

欢迎讨论,点个赞再走吧 。◕‿◕。 ~

你可能感兴趣的

12 条评论
夜聆风 · 9月21日

echarts 精装, g2 简装, d3 毛坯

+3 回复

三刀流海贼王 · 9月20日

我觉得D3更强大

+2 回复

Jenny · 9月20日

感谢分享!章节标题建议使用 一/二/三 级标题以便生成目录索引,此文已协助修改
建议学习 Markdown 语法,传送门:https://segmentfault.com/mark...
但G2部分好像有内容遗漏,请检查下

回复

1

谢谢提醒,已修改。

薄荷前端 作者 · 9月20日
多啦A梦 · 9月21日

厉害了,学习到了

回复

xmchyabi · 9月21日

用过好几个图表插件,最后还是用了d3.js
echarts看似很强大,但是如果图表上面的自定义需求一多,就很难扩展了。
d3的API又少又简单。还是很好用的。

回复

william · 9月22日

我记得gayhub上最热门的数据可视化框架是d3吧,这里为什么没有D3呢

回复

dailyvuejs · 9月23日

推荐一个 http://www.chartjs.org/ 轻量

回复

邓毕成 · 9月24日

1111

回复

8点10分 · 9月27日

bizcharts页面上数据点比较多时效率不太好 ,就换echarts
当然也可能是我方式不对,没深入研究。

回复

moon007 · 10月12日

大佬,还有一个叫highcharts是吧

回复

0

是的

薄荷前端 作者 · 6 天前
载入中...