最近阿裡正式開源的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';
<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 主要有兩方面的功能，解析資料（Connector）&加工資料（Transform）。
官方文檔描述得比較詳細，可以參考官網的分類：
源資料的解析，将csv, dsv,geojson 轉成标準的JSON，檢視 Connector 加工資料，包括 filter,map,fold(補資料) 等操作，檢視 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>
配置：
// 集中在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>
G2:
chart.tooltip({
triggerOn: '...'
showTitle: {boolean}, // 是否展示 title，預設為 true
crosshairs: {
...
style: {
...
}
}
});
事件：
ECharts:
事件 api文檔myChart.on('click', function (params) {
console.log(params);
});
BizCharts:
<chart
onEvent={e => {
//do something
}}
/>
chart.on('mousedown', ev => {});
總結
對比以上3種圖表，ECharts和BizCharts相對容易使用，尤其ECharts的配置非常清晰，BizCharts與其也有一定相似之處。BizCharts優勢在于元件化的形式使得dom結構相對清晰，按需引用。G2比較适合需要大量圖表互動時引用，其豐富的api處理互動邏輯相對更有優勢。
廣而告之
本文釋出于
薄荷前端周刊，歡迎Watch & Star ，轉載請注明出處。
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)