摘要：最近阿里正式開源的圖表庫(kù)基于技術(shù)棧，各個(gè)圖表項(xiàng)皆采用了組件的形式，貼近的使用特點(diǎn)。相關(guān)文檔組件化阿里的圖表組件手拉手，用開發(fā)動(dòng)態(tài)刷新組件文檔地址一安裝通過引入二引用成功安裝完成之后，即可使用或進(jìn)行引用。

最近阿里正式開源的BizCharts圖表庫(kù)基于React技術(shù)棧，各個(gè)圖表項(xiàng)皆采用了組件的形式，貼近React的使用特點(diǎn)。同時(shí)BizCharts基于G2進(jìn)行封裝，Bizcharts也繼承了G2相關(guān)特性。公司目前統(tǒng)一使用的是ECharts圖表庫(kù)，下文將對(duì)3種圖表庫(kù)進(jìn)行分析比對(duì)。

相關(guān)文檔

• Vuejs2.X組件化-阿里的G2圖表組件


• 手拉手，用Vue開發(fā)動(dòng)態(tài)刷新Echarts組件

BizCharts

文檔地址：BizCharts

一、安裝

通過 npm/yarn 引入

npm install bizcharts --save

yarn add bizcharts  --save

二、引用

成功安裝完成之后，即可使用 import 或 require 進(jìn)行引用。

例子：

import { Chart, Geom, Axis, Tooltip, Legend } from "bizcharts";
import chartConfig from "./assets/js/chartConfig";


    
      
      
      

      
      
    

該示例中，圖表的數(shù)據(jù)配置多帶帶存入了其他js文件中，避免頁(yè)面太過冗雜

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: "銷售量" }, // 數(shù)據(jù)字段別名映射
        genre: { alias: "游戲種類" }
    },
    title : {
        autoRotate: true, // 是否需要自動(dòng)旋轉(zhuǎn)，默認(rèn)為 true
        textStyle: {
          fontSize: "12",
          textAlign: "center",
          fill: "#999",
          fontWeight: "bold",
          rotate: 30
        }, // 坐標(biāo)軸文本屬性配置
        position:"center", // 標(biāo)題的位置，**新增**
    }
}

效果預(yù)覽：

三、DataSet

BizCharts中可以通過dataset(數(shù)據(jù)處理模塊)來對(duì)圖標(biāo)數(shù)據(jù)進(jìn)行處理，該方法繼承自G2，在下文中將對(duì)此進(jìn)行詳細(xì)分析。

快速跳轉(zhuǎn)

G2

BizCharts基于G2進(jìn)行開發(fā)，在研究BizCharts的過程中也一起對(duì)G2進(jìn)行了實(shí)踐。

一、安裝

和BizCharts一樣，可以通過 npm/yarn 引入

npm install @antv/g2 --save

yarn add @antv/g2 --save

與BizCharts不同，G2初始化數(shù)據(jù)并非以組件的形式引入，而是需要獲取需要在某個(gè)DOM下初始化圖表。獲取該DOM的唯一屬性id之后，通過chart()進(jìn)行初始化。

二、引用

示例：

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 (
          

          
        );
    }
}
export default g2;

效果圖：

三、DataSet

DataSet 主要有兩方面的功能，解析數(shù)據(jù)（Connector）&加工數(shù)據(jù)（Transform）。

官方文檔描述得比較詳細(xì)，可以參考官網(wǎng)的分類：

源數(shù)據(jù)的解析，將csv, dsv,geojson 轉(zhuǎn)成標(biāo)準(zhǔn)的JSON，查看Connector
加工數(shù)據(jù)，包括 filter,map,fold(補(bǔ)數(shù)據(jù)) 等操作，查看Transform
統(tǒng)計(jì)函數(shù)，匯總統(tǒng)計(jì)、百分比、封箱 等統(tǒng)計(jì)函數(shù)，查看 Transform
特殊數(shù)據(jù)處理，包括 地理數(shù)據(jù)、矩形樹圖、桑基圖、文字云 的數(shù)據(jù)處理，查看 Transform

// step1 創(chuàng)建 dataset 指定狀態(tài)量
const ds = new DataSet({
 state: {
    year: "2010"
 }
});

// step2 創(chuàng)建 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 更新狀態(tài)量
ds.setState("year", "2012");

以下采用官網(wǎng)文檔給出的示例進(jìn)行分析

示例一

該表格里面的數(shù)據(jù)是美國(guó)各個(gè)州不同年齡段的人口數(shù)量，表格數(shù)據(jù)存放在類型為CVS的文件中
數(shù)據(jù)鏈接（該鏈接中為json類型的數(shù)據(jù)）

初始化數(shù)據(jù)處理模塊

import DataSet from "@antv/data-set";

const ds = new DataSet({
//state表示創(chuàng)建dataSet的狀態(tài)量，可以不進(jìn)行設(shè)置
 state: {
    currentState: "WY"
    }
});

const dvForAll = ds
// 在 DataSet 實(shí)例下創(chuàng)建名為 populationByAge 的數(shù)據(jù)視圖
    .createView("populationByAge") 
// source初始化圖表數(shù)據(jù)，data可為http請(qǐng)求返回的數(shù)據(jù)結(jié)果
    .source(data, {
      type: "csv", // 使用 CSV 類型的 Connector 裝載 data，如果是json類型的數(shù)據(jù)，可以不進(jìn)行設(shè)置，默認(rèn)為json類型
});

/**
trnasform對(duì)數(shù)據(jù)進(jìn)行加工處理，可通過type設(shè)置加工類型，具體參考上文api文檔
加工過后數(shù)據(jù)格式為
[
{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); // 從全量數(shù)據(jù)繼承，寫法也可以是.source("populationByAge")
 dvForOneState
     .transform({ // 過濾數(shù)據(jù)，篩選出state符合的地區(qū)數(shù)據(jù)
    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，其他屬性設(shè)置了圖表所占的寬高
const c1 = new G2.Chart({
  id: "c1",
  forceFit: true,
  height: 400,
});

// chart初始化加工過的數(shù)據(jù)dvForAll
c1.source(dvForAll);

// 配置圖表圖例
c1.legend({
  position: "top",
});

// 設(shè)置坐標(biāo)軸配置，該方法返回 chart 對(duì)象，以下代碼表示將坐標(biāo)軸屬性為人口的數(shù)據(jù)，轉(zhuǎn)換為M為單位的數(shù)據(jù)
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
    }
  });
  
//當(dāng)tooltip發(fā)生變化的時(shí)候，觸發(fā)事件,修改ds的state狀態(tài)量，一旦狀態(tài)量改變，就會(huì)觸發(fā)圖表的更新，所以c2餅圖會(huì)觸發(fā)改變
c1.on("tooltip:change", function(evt) {
  const items = evt.items || [];
  if (items[0]) {
  //修改的currentState為鼠標(biāo)所觸及的tooltip的地區(qū)
    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 // 設(shè)置餅圖的大小
});
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是一個(gè)成熟的圖表庫(kù)， 使用方便、圖表種類多、容易上手。文檔資源也比較豐富，在此不做贅述。
ECharts文檔

ECharts & BizCharts & G2 對(duì)比

對(duì)比BizCharts和G2兩種圖表庫(kù)，BizCharts主要是進(jìn)行了一層封裝，使得圖表可以以組件的形式進(jìn)行調(diào)用，按需加載，使用起來更加方便。
簡(jiǎn)單對(duì)比一下三個(gè)圖表庫(kù)的區(qū)別：

初始化圖表：
ECharts：

// 基于準(zhǔn)備好的dom，初始化ECharts實(shí)例
var myChart = echarts.init(document.getElementById("main"));

BizCharts：

// 以組件的形式，組合調(diào)用
import { Chart, Geom, Axis, ... } from "bizcharts";


    ...

G2：

// 基于準(zhǔn)備好的dom，配置之后進(jìn)行初始化
const chart = new G2.Chart({
    container: "c1", // 指定圖表容器 ID
    width: 600, // 指定圖表寬度
    height: 300 // 指定圖表高度
});
chart.source(data);
chart.render();
 

配置：

ECharts：

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

BizCharts：

// 根據(jù)組件需要，配置參數(shù)之后進(jìn)行賦值
const cols = {...};
const data = {...};

    ...

G2:

chart.tooltip({
  triggerOn: "..."
  showTitle: {boolean}, // 是否展示 title，默認(rèn)為 true
  crosshairs: {
    ...
    style: {
      ...
    }
  }
});

事件：

ECharts:事件 api文檔

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

BizCharts:事件 api文檔

 {
    //do something
  }}
/>

G2: 事件 api文檔

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

總結(jié)

對(duì)比以上3種圖表，ECharts和BizCharts相對(duì)容易使用，尤其ECharts的配置非常清晰，BizCharts與其也有一定相似之處。BizCharts優(yōu)勢(shì)在于組件化的形式使得dom結(jié)構(gòu)相對(duì)清晰，按需引用。G2比較適合需要大量圖表交互時(shí)引用，其豐富的api處理交互邏輯相對(duì)更有優(yōu)勢(shì)。

廣而告之

本文發(fā)布于薄荷前端周刊，歡迎Watch & Star ★，轉(zhuǎn)載請(qǐng)注明出處。

歡迎討論，點(diǎn)個(gè)贊再走吧 ????? ～