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

npm install bizcharts --save

yarn add bizcharts  --save

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>

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', // 标题的位置，**新增**
    }
}

npm install @antv/g2 --save

yarn add @antv/g2 --save

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;

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

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初始化加工过的数据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();

// 基于准备好的dom，初始化ECharts实例
var myChart = echarts.init(document.getElementById('main'));

// 以组件的形式，组合调用
import { Chart, Geom, Axis, ... } from 'bizcharts';

<Chart width={600} height={400} data={data}>
	...
</Chart>

// 基于准备好的dom，配置之后进行初始化
const chart = new G2.Chart({
    container: 'c1', // 指定图表容器 ID
    width: 600, // 指定图表宽度
    height: 300 // 指定图表高度
});
chart.source(data);
chart.render();
 
<div id="c1" className="charts"></div>

// 集中在options中进行配置
myChart.setOption({
    title: {
        ...
    },
    tooltip: {},
    xAxis: {
        data: [...]
    },
    yAxis: {},
    series: [{
        ...
    }]
});

// 根据组件需要，配置参数之后进行赋值
const cols = {...};
const data = {...};
<Chart width={600} height={400} data={data} sca`enter code here`le={cols}>
	...
</Chart>

chart.tooltip({
  triggerOn: '...'
  showTitle: {boolean}, // 是否展示 title，默认为 true
  crosshairs: {
    ...
    style: {
      ...
    }
  }
});

myChart.on('click', function (params) {
    console.log(params);
});

<chart
  onEvent={e => {
    //do something
  }}
/>

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