周勇 葉剛

摘要

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

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

1 動態(tài)生成圖表頁面設(shè)計

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

處理，在頁面上顯示出來，根據(jù)數(shù)據(jù)源不同在此分為靜態(tài)數(shù)據(jù)與動態(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："}]，

}

以下是動態(tài)生成圖表設(shè)計：

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

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

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

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

1.3 動態(tài)生成圖表頁面整合設(shè)計

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

2 圖表屬性動態(tài)管理設(shè)計

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

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

3 動態(tài)生成圖表實現(xiàn)

3.1 動態(tài)生成圖表實現(xiàn)

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

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

bar.clear（）;

bar.dispose（）;

bar.setOption（option）;

3.2 圖表屬性動態(tài)管理實現(xiàn)

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

4 總結(jié)

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

參考文獻

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

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

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

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