成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

Yangder / 3521人閱讀

摘要：寫在前面阿里巴巴于去年開放了它的內(nèi)部圖表庫初版，在這一年的時(shí)間里，新增了許多特性，并對(duì)渲染細(xì)節(jié)及渲染性能進(jìn)行大幅度的調(diào)優(yōu)。在阿里內(nèi)部多個(gè)部門多條業(yè)務(wù)線里反復(fù)打磨了兩年之久后，于去年年底對(duì)外開源。

寫在前面

阿里巴巴于去年開放了它的內(nèi)部圖表庫 Bizcharts 初版，在這一年的時(shí)間里，Bizcharts 新增了許多特性，并對(duì)渲染細(xì)節(jié)及渲染性能進(jìn)行大幅度的調(diào)優(yōu)。

本文將簡(jiǎn)單的介紹阿里開源圖表庫 Bizcharts，主要分為以下幾個(gè)方面：

它的由來

適合什么業(yè)務(wù)場(chǎng)景？

如何使用？

未來的規(guī)劃

它的由來？

目前阿里基本上絕大部分業(yè)務(wù)的前端用的都是 React 技術(shù)棧，而在業(yè)務(wù)場(chǎng)景中又經(jīng)常會(huì)有圖表繪制的需求，所以一個(gè) 基于 React 技術(shù)棧的圖表庫 就顯得非常必要，而在阿里內(nèi)部又有像 G2 這樣非常強(qiáng)大的圖表底層引擎，所以在該引擎之上做一層封裝是一件很自然而然的事情，而 Bizcharts 就是基于 G2 引擎的 React 版本的封裝。

Bizcharts 的語法設(shè)計(jì)非常貼切 React 的使用方式，圖表的各個(gè)部分都拆分成了獨(dú)立的 React 類，如： 代表提示信息， 代表坐標(biāo)軸。 所有圖表的配置項(xiàng)皆為組件的 props 。

Bizcharts 在最新的 3.x 版本中，支持 Canvas 及 SVG 兩種模式的圖表渲染。如果單就圖表庫的視角來看，選擇 Canvas 和 SVG 各有千秋，Bizcharts 兩種方式都支持，適用于各種復(fù)雜的業(yè)務(wù)場(chǎng)景。

Bizcharts 在阿里內(nèi)部多個(gè)部門多條業(yè)務(wù)線里反復(fù)打磨了兩年之久后，于去年年底對(duì)外開源。在開源的半年時(shí)間里，做了大量的迭代優(yōu)化，現(xiàn)在功能及性能已經(jīng)做了大量的優(yōu)化，非常推薦在正式環(huán)境使用。

適合什么業(yè)務(wù)場(chǎng)景？

阿里內(nèi)部的業(yè)務(wù)非常復(fù)雜：電商業(yè)務(wù)，后臺(tái)系統(tǒng)，業(yè)務(wù)大屏等等，這些業(yè)務(wù)對(duì)圖表都有大量定制化的需求，并非簡(jiǎn)單的折線圖柱狀圖就能滿足，這也決定了 Bicharts 其中一個(gè)特性：支持自由定制化。同時(shí)，上文也介紹了阿里 95% 以上的業(yè)務(wù)前端用的都是 React 技術(shù)棧，所以總的來說 Bizcharts 適用的業(yè)務(wù)場(chǎng)景是『使用React 技術(shù)棧并有圖表繪制需求場(chǎng)景』，從這個(gè)角度來說，Bizcharts 適用的業(yè)務(wù)場(chǎng)景是非常廣的。相較于 Echarts 圖表框架的高度封裝，Bizcharts 能滿足更多業(yè)務(wù)定制化需求。

如何使用？

Bizcharts 的 API 為 React 量身定制，使用起來就像搭積木的感覺一般。下面我們以畫一個(gè)基礎(chǔ)的柱狀圖為例講解：

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

// 數(shù)據(jù)源
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: "銷售量" }, // 數(shù)據(jù)字段別名映射
  genre: { alias: "游戲種類" }
};

// 渲染圖表
ReactDOM.render((
  
    {/* X 軸 */}
    
    {/* Y 軸 */}
    
    
    
    
  
), document.getElementById("mountNode"));

下圖是上述代碼片段的渲染結(jié)果：

圖表的每一塊都是一個(gè)組件，需要什么就加什么，使用起來非常方便，再也不用擔(dān)心產(chǎn)品經(jīng)理需求實(shí)現(xiàn)不了了。

未來的規(guī)劃

Bizcharts 本身自帶了大量的 Demo，可以滿足絕大部分的通用使用場(chǎng)景，使用的時(shí)候，只需要把 Demo 中的數(shù)據(jù)替換成自己業(yè)務(wù)中的數(shù)據(jù)即可，但即便如此，也無法完全覆蓋到高度定制化的場(chǎng)景。當(dāng)然，使用 Bizcharts 的用戶可以通過查閱 官網(wǎng) API 文檔
來實(shí)現(xiàn)需求，但這樣無形中加大了用戶的學(xué)習(xí)成本。因?yàn)榭赡苷麄€(gè)網(wǎng)站上只有一個(gè)簡(jiǎn)單的折現(xiàn)圖，而且時(shí)間非常緊，需要快速實(shí)現(xiàn)，這個(gè)時(shí)候讓用戶去學(xué)習(xí)一個(gè)類庫/框架的使用是非常蛋疼的。

根據(jù)上述情況，Bizcharts 接下來會(huì)推出一款產(chǎn)品：Chartmaker。簡(jiǎn)單來講，它能夠幫助你可視化的配置出你想要的圖表：所見即所得，同時(shí)還能輸出代碼。有了 Chartmaker 后，就能夠幫助數(shù)據(jù)可視化小白用戶快速的實(shí)現(xiàn)自己想要的圖表，無任何學(xué)習(xí)成本。目前 Chartmaker 正在緊張的開發(fā)中，預(yù)計(jì)十月初對(duì)外開放。

寫在最后

Bizcharts 目前處于快速發(fā)展中，非常歡迎給項(xiàng)目提 Pull Request。對(duì)于那些已經(jīng)在項(xiàng)目中使用到 Bizcharts 或準(zhǔn)備使用 Bizcharts 的同學(xué)，請(qǐng)掃描我們下面的官方群釘釘二維碼，使用過程中碰到的問題我們會(huì)第一時(shí)間幫忙解決：

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97170.html

相關(guān)文章

  • Iceworks 2.7.0 發(fā)布，海量圖表供你選擇

    摘要：發(fā)布，海量圖表供你選擇，豐富模板一鍵創(chuàng)建，提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求輕松操作頁面管理，海量物料自由搭配，頁面組合可視化操作更得心應(yīng)手開發(fā)調(diào)試一體化，集成運(yùn)行環(huán)境零配置運(yùn)行，開箱即用。 Iceworks 2.7.0 發(fā)布，海量圖表供你選擇 Iceworks，豐富模板一鍵創(chuàng)建，提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求；輕松操作頁...

    gitmilk 評(píng)論0 收藏0

  • Iceworks 2.7.0 發(fā)布，海量圖表供你選擇

    摘要：發(fā)布，海量圖表供你選擇，豐富模板一鍵創(chuàng)建，提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求輕松操作頁面管理，海量物料自由搭配，頁面組合可視化操作更得心應(yīng)手開發(fā)調(diào)試一體化，集成運(yùn)行環(huán)境零配置運(yùn)行，開箱即用。 Iceworks 2.7.0 發(fā)布，海量圖表供你選擇 Iceworks，豐富模板一鍵創(chuàng)建，提供多種垂直領(lǐng)域模板，快速創(chuàng)建項(xiàng)目，支持風(fēng)格切換，滿足個(gè)性化需求；輕松操作頁...

    ymyang 評(píng)論0 收藏0

  • 三大圖表庫：ECharts 、 BizCharts 和 G2，該如何選擇？

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

    draveness 評(píng)論0 收藏0

  • [BizCharts學(xué)習(xí)筆記] --- 數(shù)據(jù)可視化

    摘要：所以筆者選擇了，為什么會(huì)選擇一是因?yàn)樗前⒗锍銎?，?jīng)歷了一年左右的打磨已經(jīng)完全適應(yīng)在使用其次是它支持自由定制，不會(huì)像那樣高度封裝，所以在開發(fā)復(fù)雜圖表的時(shí)候會(huì)更加得心應(yīng)手。只是阿里圖表庫中的一員。 實(shí)際上，在數(shù)據(jù)可視化這一塊筆者并沒有很多的開發(fā)經(jīng)歷和經(jīng)驗(yàn)，不過正是因?yàn)檫@個(gè)問題筆者才決定學(xué)習(xí)一門數(shù)據(jù)可視化框架來彌補(bǔ)自己在這一方面的不足。在這個(gè)大數(shù)據(jù)統(tǒng)治的時(shí)代，數(shù)據(jù)能給我們提供前所未有的便捷...

    CoffeX 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<