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

更新日期: 2018-10-11阅读: 3.4k标签: echarts

最近阿里正式开源的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岁及以上
WY3825360890293145398013733814727965614
DC3635250439252257556919355714004370648
VT3263562538337576167915541918859386649

初始化数据处理模块

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


链接: https://www.fly63.com/article/detial/1136

关于ECharts内存泄漏问题

最近使用websocket加ECharts做了一个实时监控的功能,发现了一个比较严重的问题,就是浏览器运行一段时间就会非常卡,之前在ECharts官网运行官方实例“动态数据 + 时间坐标轴”时

关于echarts图表在tab页中width:100%失效的问题

使用echarts时,写在tab页中的图表宽度明明设成了100%,但是在页面上实际却只有100px宽。解决办法:找一个在tab页的切换操作中不会隐藏的父容器,把它的宽度的具体值取出后在初始化图表之前直接赋给图表

微信小程序不支持Echarts中tooltip的解决方法

Echarts官方文档明确指出自己不支持微信小程序中使用Tooltip这个功能。但是只要做过图表设计的人都知道,Tooltip这个功能有多么重要,尤其是对于line图而言。那么如何解决或者说间接实现tooltip呢?

echarts是什么_echart.js学习和使用

什么是Echarts?简单来说呢它就是一个商业级数据图表,一个纯JavaScript的图标库。可以兼容绝大部分的浏览器,可以为前端开发提供一个直观、生动、可交互、可高度个性化定制的数据可视化图表。

如何在 Vue 项目中使用 echarts

数据的重要性我们大家都知道,就算再小的项目中都可能使用几个图表展示,我最近在做项目的过程中也是需要用到图表,最后选择了echarts 图表库,废话不多说,那我们就看看如何在 Vue 的项目中使用 echarts。

基于echarts 灵活封装react柱形图组件

现在各种框架各种库都很强大,但是也因为功能强大,导致很多配置都过于繁重,真正有用的就那么几个,今天就基于echarts封装一个通用柱形图!想要了解其他的组件可以看下我之前封装的其他组件有好的思路或者其他的也会分享出来的

echarts的使用注意要点

在公司做了一版dashboard,对echarts有了大量的实践。坚果图,日历图,折线图,地理图。难易程度排名为坚果图,折线图,日历图,地理图。总结了以下几点注意事项:

vue中使用ECharts实现折线图和饼图

在开发后台管理项目时,需要统计后台用户数据,以折现图和饼图的形式显示,这边采用apache-echarts来实现需求。

在vue项目中封装echarts的正确姿势

可能有一些开发者忘记考虑echarts更新数据的特性,以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新,窗口缩放引起echarts图形变形问题

解决echarts设置100%但只有100px的问题

具体问题是,设置echarts宽度width为100%,结果出来的时候就变成了100px;这种情况一般都是 echarts所在的div一开始是display:none,在一开始初始化执行js的时候找不到这个元素

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!