動(dòng)態(tài)生成圖表的設(shè)計(jì)與實(shí)現(xiàn)

周勇 葉剛

摘要

在系統(tǒng)的開(kāi)發(fā)過(guò)程當(dāng)中，對(duì)于數(shù)據(jù)的操作有時(shí)不僅僅在于用表格展示，很多業(yè)務(wù)數(shù)據(jù)需要對(duì)數(shù)據(jù)庫(kù)中每條記錄的特定項(xiàng)（可以單項(xiàng)也可以是多項(xiàng)）進(jìn)行數(shù)據(jù)分析與統(tǒng)計(jì)，進(jìn)而將數(shù)據(jù)統(tǒng)計(jì)的結(jié)果展示出來(lái)。對(duì)于上述數(shù)據(jù)統(tǒng)計(jì)結(jié)果的展示，在開(kāi)發(fā)的過(guò)程中經(jīng)常用圖表或者表格在頁(yè)面上展示出來(lái)，有時(shí)甚至二者同時(shí)使用根據(jù)圖表的特性，他可以很直觀的顯示結(jié)果中的關(guān)鍵數(shù)據(jù)，所以在開(kāi)發(fā)過(guò)程圖表中大量使用。鑒于圖表開(kāi)發(fā)過(guò)程有很多重復(fù)性的工作，本文通過(guò)對(duì)單類(lèi)型的Echart圖表（餅狀圖，柱形圖，折線(xiàn)圖等單類(lèi)型先圖表，未涉及類(lèi)型混合圖表）的動(dòng)態(tài)化設(shè)計(jì)，可視化的操作，數(shù)據(jù)化的管理，來(lái)避免開(kāi)發(fā)者的重復(fù)工作。

【關(guān)鍵詞】EchartMysq1 可視化

1 動(dòng)態(tài)生成圖表頁(yè)面設(shè)計(jì)

動(dòng)態(tài)生成圖表指的是根據(jù)Echart的Option常用屬性，對(duì)不同類(lèi)型的圖表的屬性進(jìn)行設(shè)值，通過(guò)調(diào)用后臺(tái)

處理，在頁(yè)面上顯示出來(lái)，根據(jù)數(shù)據(jù)源不同在此分為靜態(tài)數(shù)據(jù)與動(dòng)態(tài)數(shù)據(jù)生成圖表。Option常用屬性的數(shù)據(jù)格式：{

title：{text："，subtext："}，

tooltip：ftrigger：'axis'），

toolbox：{show：false，feature：{magicType：{show：true，type：['line'，'bar']}}}，

xAxis：[{type：'category'，data：['1月'，'2月'，'3月'，'4月'，'5月'，'6月'，'7月'，'8月'，'9月'，'10月'，'11月'，'12月']}]，

yAxis：[{type：'value'，name："}]，

}

以下是動(dòng)態(tài)生成圖表設(shè)計(jì)：

1.1 靜態(tài)數(shù)據(jù)生成圖表頁(yè)面設(shè)計(jì)

靜態(tài)數(shù)據(jù)生成圖表顧名思義就是Echart的Option屬性是靜態(tài)的常量數(shù)據(jù)，靜態(tài)圖表數(shù)據(jù)生成可以幫助完成圖表實(shí)例，在前期開(kāi)發(fā)過(guò)程中對(duì)不熟悉圖表的開(kāi)發(fā)者或者說(shuō)不知道圖表將要設(shè)計(jì)成什么樣提供大大的便利。根據(jù)圖表類(lèi)型將該圖表的特有屬性進(jìn)行頁(yè)面設(shè)計(jì)，填入所屬靜態(tài)數(shù)據(jù)，檢驗(yàn)數(shù)據(jù)格式，傳入后臺(tái)，后臺(tái)調(diào)用數(shù)據(jù)展示圖表。

1.2 動(dòng)態(tài)數(shù)據(jù)生成圖表頁(yè)面設(shè)計(jì)

動(dòng)態(tài)數(shù)據(jù)圖表生設(shè)計(jì)與靜態(tài)數(shù)據(jù)圖表設(shè)計(jì)相當(dāng)類(lèi)似，唯一區(qū)別接入的數(shù)據(jù)不能直接使用，后臺(tái)需要根據(jù)地址獲取數(shù)據(jù)，同時(shí)后臺(tái)需要實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)的接口方法。

1.3 動(dòng)態(tài)生成圖表頁(yè)面整合設(shè)計(jì)

根據(jù)上述設(shè)計(jì)，我們可以對(duì)靜態(tài)數(shù)據(jù)圖表與動(dòng)態(tài)數(shù)據(jù)圖表頁(yè)面合二為一，取之相同的屬性，然后根據(jù)數(shù)據(jù)源類(lèi)型不同進(jìn)行。

2 圖表屬性動(dòng)態(tài)管理設(shè)計(jì)

為了避免開(kāi)發(fā)者手動(dòng)的書(shū)寫(xiě)重復(fù)的圖表代碼，我們需要在生成圖表設(shè)計(jì)上對(duì)其進(jìn)行數(shù)據(jù)化的管理。每一張圖表對(duì)應(yīng)著mysq1數(shù)據(jù)庫(kù)中的一條記錄，圖表的屬性對(duì)應(yīng)著關(guān)系表（圖表屬性表）的項(xiàng)目，此處需要說(shuō)明，表結(jié)構(gòu)的設(shè)計(jì)需要圖表類(lèi)型屬性，對(duì)于不同圖表特有的屬性，需要在關(guān)系表中作為單獨(dú)的項(xiàng)目，同時(shí)根據(jù)數(shù)據(jù)源類(lèi)型不同需要增添該項(xiàng)的標(biāo)識(shí)項(xiàng)，以此區(qū)分。此處的設(shè)計(jì)，可以借助關(guān)系表圖表屬性進(jìn)行可視化設(shè)計(jì)，方便屬性的編輯以及預(yù)覽圖表。

數(shù)據(jù)化的管理圖表屬性是第一步，這只是方便管理屬性，還未達(dá)到避免代碼的重復(fù)工作。我們需要在生成圖表設(shè)計(jì)的時(shí)候，獲取完整的Echart的Option格式的數(shù)據(jù)，根據(jù)圖表屬性表的主鍵以及該數(shù)據(jù)形成一張Option的關(guān)系表，至此完成動(dòng)態(tài)生成Echart的Option數(shù)據(jù)格式設(shè)計(jì)。

3 動(dòng)態(tài)生成圖表實(shí)現(xiàn)

3.1 動(dòng)態(tài)生成圖表實(shí)現(xiàn)

根據(jù)頁(yè)面設(shè)計(jì)將不同類(lèi)型圖表的常用屬性通過(guò)組件表現(xiàn)在頁(yè)面上，通過(guò)組件控制指定類(lèi)型圖表的屬性的組件的展示，完成頁(yè)面開(kāi)發(fā)。后臺(tái)通過(guò)]s完成圖表屬性設(shè)值，調(diào)用圖表方法實(shí)現(xiàn)圖表生成功能，以下為主要代碼：

var bar=echarts.init（document.getElementByld（'d2'），e_macarons）;

bar.clear（）;

bar.dispose（）;

bar.setOption（option）;

3.2 圖表屬性動(dòng)態(tài)管理實(shí)現(xiàn)

根據(jù)圖表屬性動(dòng)態(tài)管理設(shè)計(jì)，設(shè)計(jì)圖表屬性表與Option代碼表，動(dòng)態(tài)生成的圖表，可以通過(guò)后臺(tái)講頁(yè)面上的圖表屬性值存入圖表屬性表中。后臺(tái)通過(guò)js將屬性轉(zhuǎn)變?yōu)镺ption格式的對(duì)象option，通過(guò)JSON.stringify（option）將對(duì)象轉(zhuǎn)變?yōu)樽址?，通過(guò)后臺(tái)存入Option代碼表中。至此，Echart的Option屬性與Option格式的數(shù)據(jù)通過(guò)關(guān)系表管理。至此，圖表屬性只需要通過(guò)頁(yè)面設(shè)置，對(duì)于動(dòng)態(tài)數(shù)據(jù)源只需要提供獲取數(shù)據(jù)方法的入口。開(kāi)發(fā)者不需要做重復(fù)的工作。另外，對(duì)于某些圖表的特有屬性，或者公共的不常用屬性亦可以在特定的頁(yè)面通過(guò)js加入Option代碼表中，不必?fù)?dān)心頁(yè)面屬性太過(guò)簡(jiǎn)單，無(wú)法實(shí)現(xiàn)圖表。

4 總結(jié)

動(dòng)態(tài)生成圖表的設(shè)計(jì)與實(shí)現(xiàn)為開(kāi)發(fā)者提供以下便利：通過(guò)數(shù)據(jù)化的管理圖表屬性，幫助開(kāi)發(fā)者提前預(yù)覽圖表的實(shí)現(xiàn)情況，對(duì)于需要做調(diào)整的地方亦可以通過(guò)頁(yè)面直接調(diào)整;為初次接觸圖表的開(kāi)發(fā)者或者靜態(tài)數(shù)據(jù)源的靜態(tài)圖表demo開(kāi)發(fā)提供了便利;對(duì)于需要分析大量業(yè)務(wù)數(shù)據(jù)，通過(guò)圖表展示結(jié)過(guò)的系統(tǒng)的開(kāi)發(fā)，直接調(diào)用Option代碼表中的數(shù)據(jù)，即可完成圖表的生成工作，大大提高了開(kāi)發(fā)者的工作效率。

參考文獻(xiàn)

[1]馬帥.論MySQL數(shù)據(jù)庫(kù)教程開(kāi)設(shè)的必要性[J].現(xiàn)代交際，2016（13）.

[2]溫立輝.Spring框架在模型層的應(yīng)用及原理[J].福建電腦，2017（05）.

[3]李杉，賈彥平，達(dá)虎.Mybatis逆向工程在JavaEE中的應(yīng)用[J].通訊世界，2017（24）.

[4]雷云鶴，祝智庭.基于預(yù)學(xué)習(xí)數(shù)據(jù)分析的精準(zhǔn)教學(xué)決策[J].中國(guó)電化教育，2016（06）.