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

阿里小前端發表於2019-03-03
阿里

寫在前面

阿里巴巴於去年開放了它的內部圖表庫 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 正式開源

圖表的每一塊都是一個元件，需要什麼就加什麼，使用起來非常方便，再也不用擔心產品經理需求實現不了了。

未來的規劃

Bizcharts 本身自帶了大量的 Demo，可以滿足絕大部分的通用使用場景，使用的時候，只需要把 Demo 中的資料替換成自己業務中的資料即可，但即便如此，也無法完全覆蓋到高度定製化的場景。當然，使用 Bizcharts 的使用者可以通過查閱 官網 API 文件
來實現需求，但這樣無形中加大了使用者的學習成本。因為可能整個網站上只有一個簡單的折現圖，而且時間非常緊，需要快速實現，這個時候讓使用者去學習一個類庫/框架的使用是非常蛋疼的。

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

寫在最後

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

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

相關文章