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

CoffeX 發(fā)布于2019-08-23 11:56 / 2452人閱讀

摘要：所以筆者選擇了，為什么會(huì)選擇一是因?yàn)樗前⒗锍銎罚?jīng)歷了一年左右的打磨已經(jīng)完全適應(yīng)在使用其次是它支持自由定制，不會(huì)像那樣高度封裝，所以在開發(fā)復(fù)雜圖表的時(shí)候會(huì)更加得心應(yīng)手。只是阿里圖表庫(kù)中的一員。

實(shí)際上，在數(shù)據(jù)可視化這一塊筆者并沒有很多的開發(fā)經(jīng)歷和經(jīng)驗(yàn)，不過(guò)正是因?yàn)檫@個(gè)問題筆者才決定學(xué)習(xí)一門數(shù)據(jù)可視化框架來(lái)彌補(bǔ)自己在這一方面的不足。
在這個(gè)“大數(shù)據(jù)統(tǒng)治”的時(shí)代，數(shù)據(jù)能給我們提供前所未有的便捷和認(rèn)知；感覺在這個(gè)時(shí)代沒有大數(shù)據(jù)解決不了的事情，雖然有點(diǎn)夸張的嫌疑，但是大數(shù)據(jù)的力量都是有目共睹的。不過(guò)遺憾的是我們前端領(lǐng)域并不能處理大數(shù)據(jù)，但是我們可以有目的得將數(shù)據(jù)以美觀、明確、可靠的方式通過(guò)頁(yè)面的形式展示出來(lái)，將枯燥的數(shù)據(jù)轉(zhuǎn)換成一個(gè)個(gè)精美的圖表。從另一方面講，很多重要的自然定理、很多重要的決策不都是來(lái)源于圖表嗎？數(shù)據(jù)可視化，相當(dāng)于將數(shù)據(jù)的力量和圖表的力量結(jié)合起來(lái)從而達(dá)到1+1>2的效果。
幸運(yùn)的是，前端數(shù)據(jù)可視化工作并不需要我們從頭造輪子，目前能做這份工作的第三方框架很多，比如復(fù)雜而強(qiáng)大的D3.js、久負(fù)盛名的Echarts等等，不過(guò)本系列筆者并不打算從它們中挑選一個(gè)出來(lái)學(xué)習(xí)研究，因?yàn)榫W(wǎng)上相關(guān)的資料多如牛毛。所以筆者選擇了BizCharts，為什么會(huì)選擇BizCharts？一是因?yàn)樗前⒗锍銎罚?jīng)歷了一年左右的打磨已經(jīng)完全適應(yīng)在React使用；其次是它支持自由定制，不會(huì)像Echarts那樣高度封裝，所以在開發(fā)復(fù)雜圖表的時(shí)候會(huì)更加得心應(yīng)手。當(dāng)然這只是它最重要的兩個(gè)優(yōu)點(diǎn)，更多的優(yōu)點(diǎn)我們后面慢慢體會(huì)。
這里大概說(shuō)一下阿里的圖表庫(kù)。BizCharts只是阿里圖表庫(kù)(AntV)中的一員。大概的產(chǎn)品組織框架如下：

AntV
    --G2
        --BizCharts ?
        --Viser-react
        --Viser-ng
        --Viser-vue
    --G6
    --F2

從這個(gè)圖中我們可以看出本博客所說(shuō)的BizCharts隸屬于G2，而BizCharts則是基于G2的React版本封裝(原因是阿里前端大部分都是使用React技術(shù)棧而且經(jīng)常涉及到圖表一類的業(yè)務(wù)需求，因此基于G2這種強(qiáng)大的圖表底層引擎而封裝的React可用的圖表庫(kù)就產(chǎn)生了)；當(dāng)然我們還能看到Viser-*系列的庫(kù)，從名字就能明白分別是基于G2的React版本封裝、基于G2的Angular版本封裝和基于G2的Vue版本封裝；可以看出阿里圖標(biāo)庫(kù)對(duì)目前比較主流的框架支持的都非常好。
當(dāng)然本系列終究說(shuō)的還是BizCharts，所以我們繼續(xù)聊它。
前面說(shuō)到BizCharts已經(jīng)完全適應(yīng)在React使用的原因在于BizCharts將圖表拆解成多個(gè)部分并且封裝成獨(dú)立的組件，與React的組件化原則完全契合，比如：代表提示信息，代表坐標(biāo)系，代表坐標(biāo)軸，代表幾何標(biāo)記對(duì)象等等，這就意味著我們開發(fā)一個(gè)圖表完全可以通過(guò)組合各個(gè)組件來(lái)達(dá)到預(yù)期目的，可以說(shuō)在使用上是高度可控、自由度非常高。

本篇就是簡(jiǎn)單聊一下數(shù)據(jù)可視化以及相應(yīng)的實(shí)現(xiàn)方式算是給這個(gè)系列開個(gè)頭。