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

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

它的由來？

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

Bizcharts 的語法設計非常貼切React 的使用方式，圖表的各個部分都拆分成了獨立的React 類，如： 代表提示訊息， 代表座標軸。所有圖表的設定項均為組件的 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(&#39;mountNode&#39;));

下圖是上述程式碼片段的渲染結果：

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

未來的規劃

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

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

以上是阿里巴巴圖表庫 Bizcharts 正式開源的詳細內容。更多資訊請關注PHP中文網其他相關文章！