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

它的由來？

目前阿里基本上絕大部分業務的前端用的都是 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 正在緊張的開發中，預計十月初對外開源。

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com