阿里巴巴圖表庫 Bizcharts 正式開源

寫在前面

阿里巴巴於去年開放了它的內部圖表庫 Bizcharts 第一版，在這一年的時間裏，Bizcharts 新增了許多特性，並對渲染細節及渲染性能進行大幅度的調優。

本文將簡單的介紹阿里開源圖表庫 Bizcharts，主要分爲如下幾個方面：

1. 它的由來
2. 適合什麼業務場景？
3. 如何使用？
4. 將來的規劃

它的由來？

目前阿里基本上絕大部分業務的前端用的都是 React 技術棧，而在業務場景中又常常會有圖表繪製的需求，因此一個 基於 React 技術棧的圖表庫 就顯得很是必要，而在阿里內部又有像 G2 這樣很是強大的圖表底層引擎，因此在該引擎之上作一層封裝是一件很天然而然的事情，而 Bizcharts 就是基於 G2 引擎的 React 版本的封裝。

Bizcharts 的語法設計很是貼切 React 的使用方式，圖表的各個部分都拆分紅了獨立的 React 類，如：<Tooltip /> 表明提示信息， <Axis /> 表明座標軸。 全部圖表的配置項皆爲組件的 props 。

Bizcharts 在最新的 3.x 版本中，支持 Canvas 及 SVG 兩種模式的圖表渲染。若是單就圖表庫的視角來看，選擇 Canvas 和 SVG 各有千秋，Bizcharts 兩種方式都支持，適用於各類複雜的業務場景。

Bizcharts 在阿里內部多個部門多條業務線裏反覆打磨了兩年之久後，於去年年末對外開源。在開源的半年時間裏，作了大量的迭代優化，如今功能及性能已經作了大量的優化，很是推薦在正式環境使用。

適合什麼業務場景？

阿里內部的業務很是複雜：電商業務，後臺系統，業務大屏等等，這些業務對圖表都有大量定製化的需求，並不是簡單的折線圖柱狀圖就能知足，這也決定了 Bicharts 其中一個特性：支持自由定製化。同時，上文也介紹了阿里 95% 以上的業務前端用的都是 React 技術棧，因此總的來講 Bizcharts 適用的業務場景是『使用React 技術棧並有圖表繪製需求場景』，從這個角度來講，Bizcharts 適用的業務場景是很是廣的。相較於 Echarts 圖表框架的高度封裝，Bizcharts 能知足更多業務定製化需求。

如何使用？

Bizcharts 的 API 爲 React 量身定製，使用起來就像搭積木的感受通常。下面咱們以畫一個基礎的柱狀圖爲例講解：

import React from 'react';
import ReactDOM from 'react-dom';
import { Chart, Geom, Axis, Tooltip, Legend, Coord } from 'bizcharts';

// 數據源
const data = [
  { 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 }
];

// 定義度量
const cols = {
  sold: { alias: '銷售量' }, // 數據字段別名映射
  genre: { alias: '遊戲種類' }
};

// 渲染圖表
ReactDOM.render((
  <Chart width={600} height={400} data={data} scale={cols}>
    {/* X 軸 */}
    <Axis name="genre" />
    {/* Y 軸 */}
    <Axis name="sold" />
    <Legend position="top" dy={-20} />
    <Tooltip />
    <Geom type="interval" position="genre*sold" color="genre" />
  </Chart>
), document.getElementById('mountNode'));
複製代碼

下圖是上述代碼片斷的渲染結果：

圖表的每一塊都是一個組件，須要什麼就加什麼，使用起來很是方便，不再用擔憂產品經理需求實現不了了。

將來的規劃

Bizcharts 自己自帶了大量的 Demo，能夠知足絕大部分的通用使用場景，使用的時候，只須要把 Demo 中的數據替換成本身業務中的數據便可，但即使如此，也沒法徹底覆蓋到高度定製化的場景。固然，使用 Bizcharts 的用戶能夠經過查閱 官網 API 文檔 來實現需求，但這樣無形中加大了用戶的學習成本。由於可能整個網站上只有一個簡單的折現圖，並且時間很是緊，須要快速實現，這個時候讓用戶去學習一個類庫/框架的使用是很是蛋疼的。

根據上述狀況，Bizcharts 接下來會推出一款產品：Chartmaker。簡單來說，它可以幫助你可視化的配置出你想要的圖表：所見即所得，同時還能輸出代碼。有了 Chartmaker 後，就可以幫助數據可視化小白用戶快速的實現本身想要的圖表，無任何學習成本。目前 Chartmaker 正在緊張的開發中，預計十月初對外開源。

寫在最後

Bizcharts 目前處於快速發展中，很是歡迎給項目提 Pull Request。對於那些已經在項目中使用到 Bizcharts 或準備使用 Bizcharts 的同窗，請掃描咱們下面的官方羣釘釘二維碼，使用過程當中碰到的問題咱們會第一時間幫忙解決：