ECharts在數(shù)據(jù)可視化中的應(yīng)用

崔蓬

摘 ?要：目前人們?cè)诟鱾€(gè)領(lǐng)域面對(duì)海量數(shù)據(jù)，需要借助數(shù)據(jù)可視化技術(shù)把海量數(shù)據(jù)轉(zhuǎn)換為動(dòng)態(tài)圖像或圖形，并利用交互手段幫助人們進(jìn)行理解數(shù)據(jù)，以便完成進(jìn)一步的數(shù)據(jù)分析。在教師專業(yè)發(fā)展領(lǐng)域中鮮有聚焦數(shù)據(jù)可視化的研究。本文按照可視化的基本流程，探索了基于ECharts平臺(tái)的可視化開(kāi)發(fā)方法，以教師專業(yè)發(fā)展數(shù)據(jù)的可視化系統(tǒng)為例，重點(diǎn)敘述了ECharts圖表在客戶端的構(gòu)建方法、交互組件在可視化中的應(yīng)用，展示了通過(guò)Ajax技術(shù)實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)繪制的過(guò)程。

關(guān)鍵詞：數(shù)據(jù)可視化;ECharts;動(dòng)態(tài)數(shù)據(jù)加載

中圖分類號(hào)：TP311.5 ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A

Abstract：At present，people are facing massive data in various fields.It is necessary to transform massive data into dynamic images or graphs with the help of data visualization technology，helping people understand the data with interactive means so as to conduct further data analysis.In the field of teacher professional development，few studies are focused on data visualization.In accordance with the basic process of visualization，this paper explores the visualization development method based on the ECharts platform.Taking the visualization system of teacher professional development data as an example，this paper focuses on the construction method of ECharts charts on the client side and the application of interactive components in visualization，demonstrating the process of dynamic data rendering through Ajax technology.

Keywords：data visualization;ECharts;dynamic data loading

1 ? 引言（Introduction）

在這個(gè)互聯(lián)網(wǎng)時(shí)代的大背景下，當(dāng)人們面對(duì)海量數(shù)據(jù)的時(shí)候[1]，僅僅通過(guò)單純的文本數(shù)據(jù)表達(dá)方式和分析手段來(lái)快速高效地處理和使用數(shù)據(jù)已經(jīng)是非常困難的事，想通過(guò)人工去分析這些數(shù)據(jù)，從而得以深刻地理解，并進(jìn)一步形成正確的概念和看法幾乎不可能。對(duì)數(shù)據(jù)的可視化可以把晦澀難懂的傳統(tǒng)數(shù)據(jù)在屏幕上直觀形象生動(dòng)地表達(dá)出來(lái)[2]，大大加強(qiáng)了人們對(duì)于數(shù)據(jù)的理解交互力度[3]，并允許通過(guò)交互手段控制數(shù)據(jù)的抽取和畫面的顯示，使隱含于數(shù)據(jù)之中不可見(jiàn)的現(xiàn)象成為可見(jiàn)[4]，為人們分析、理解數(shù)據(jù)、形成概念、找出規(guī)律提供了強(qiáng)有力的手段。

在教師專業(yè)發(fā)展領(lǐng)域中鮮有聚焦數(shù)據(jù)可視化的研究。本文將以教師專業(yè)發(fā)展數(shù)據(jù)的可視化為例，基于ECharts技術(shù)，闡述數(shù)據(jù)可視化系統(tǒng)的開(kāi)發(fā)與應(yīng)用。

2 ?可視化的基本框架（Basic framework for visualization）

2.1 ? 可視化通用流程

總的來(lái)說(shuō)，可視化流程可以分為三個(gè)階段：采集、處理、呈現(xiàn)，如圖1所示?？梢暬杉臄?shù)據(jù)都是從基于數(shù)據(jù)背后的自然現(xiàn)象或社會(huì)現(xiàn)象抽象出來(lái)的數(shù)據(jù)。數(shù)據(jù)類型、數(shù)據(jù)結(jié)構(gòu)均會(huì)根據(jù)可視化任務(wù)的不同而改變。數(shù)據(jù)采集后要對(duì)數(shù)據(jù)進(jìn)行數(shù)據(jù)清洗、規(guī)范、分析[5]，形成具有一定組織形式和規(guī)范的存儲(chǔ)結(jié)構(gòu)，采用合適的數(shù)據(jù)處理方法，將所需數(shù)據(jù)信息映射到不同的視覺(jué)通道，在制作或?qū)懘a過(guò)程中，再不斷調(diào)整和迭代，最后呈現(xiàn)出想要的結(jié)果。

2.2 ? 可視化循環(huán)模型

循環(huán)模型由Card等人提出[5]，把線性的可視化流程升級(jí)改進(jìn)為循環(huán)回路模型[6]，用戶在這種模型下可以加入和控制流程中的任何一個(gè)階段，如圖2所示。目前，大多數(shù)可視化流程都是基于循環(huán)模型的。

3 ?基于ECharts平臺(tái)的可視化開(kāi)發(fā)（Visualization development based on ECharts）

3.1 ? ECharts的主要特點(diǎn)

ECharts是百度推出的一款可視化開(kāi)源開(kāi)發(fā)框架[7]。它使用JavaScript技術(shù)，底層依賴輕量級(jí)的矢量圖形庫(kù)ZRender，主要的圖表繪制方式為Canvas繪圖，提供直觀的數(shù)據(jù)可視化圖表庫(kù)?；贓Charts的可視化圖表可以在多終端設(shè)備上流暢運(yùn)行，兼容桌面系統(tǒng)移動(dòng)端，瀏覽器兼容性強(qiáng)。ECharts的引入簡(jiǎn)單，通過(guò)配置項(xiàng)的設(shè)置，就可以控制數(shù)據(jù)呈現(xiàn)形式和視覺(jué)效果。ECharts通過(guò)豐富組件和高度個(gè)性化的可視化解決方案，實(shí)現(xiàn)用戶和數(shù)據(jù)的交互，從而增強(qiáng)用戶獲取知識(shí)、優(yōu)化數(shù)據(jù)分析的能力[8]。

3.2 ? ECharts在客戶端的構(gòu)建和圖表實(shí)現(xiàn)

3.2.1 ? 客戶端引入ECharts圖表庫(kù)

ECharts圖表的構(gòu)建和實(shí)現(xiàn)，按照如圖3所示流程進(jìn)行。

ECharts在客戶端的引入是比較簡(jiǎn)單的，ECharts3版本開(kāi)始，不再使用內(nèi)置AMD加載器，只需要在前端頁(yè)面中的head部分，使用script標(biāo)簽直接引入ECharts的依賴js庫(kù)，。

3.2.2 ? 初始化圖表實(shí)例和數(shù)據(jù)配置

在繪制圖標(biāo)前，需要為ECharts準(zhǔn)備一個(gè)具備一定寬高的DOM容器，能夠放下所需要的圖表。使用getElementById（）函數(shù)，獲取DOM容器，使用ECharts.init（）方法，基于這個(gè)DOM容器，完成對(duì)圖表的初始化。

<！doctype html>

完成圖表的初始化以后，再使用setOption方法實(shí)現(xiàn)DOM容器中數(shù)據(jù)的渲染，并使用Option參數(shù)配置圖表數(shù)據(jù)，最后使用通用的通過(guò)setOption方法生成需要的圖表類型。

option={

title：{

text：'分專業(yè)課題項(xiàng)目級(jí)別'

}，

tooltip：{

trigger：'axis'

}，

legend：{

data：['國(guó)家級(jí)'，'省級(jí)'，'地市級(jí)'，'校級(jí)']

}，

xAxis：{

type：'category'，

data：['動(dòng)漫制作技術(shù)'，'嵌入式技術(shù)與應(yīng)用'，'計(jì)算機(jī)應(yīng)用技術(shù)'，'計(jì)算網(wǎng)絡(luò)技術(shù)'，'軟件技術(shù)']

}，

yAxis：{

type：'value'

}，

series：[{

name：'國(guó)家級(jí)'，

data：[4，0，2，0，0，]，

type：'bar'，

}，{

name：'省級(jí)'，

data：[8，2，1，0，0，]，

type：'bar'，

}，{

name：'地市級(jí)'，

data：[3，0，0，0，1，]，

type：'bar'，

}，{

name：'校級(jí)'，

data：[51，7，3，1，1，]，

type：'bar'，

}

]};

myChart.setOption（option）;

常見(jiàn)配置項(xiàng)說(shuō)明見(jiàn)表1。

Axis表示直角坐標(biāo)系中的坐標(biāo)軸，下級(jí)參數(shù)data表示類目數(shù)據(jù)，在類目軸type：'category'中有效，數(shù)據(jù)可以簡(jiǎn)化為一個(gè)一維數(shù)組表示。Series是圖表中的數(shù)據(jù)核心，其下級(jí)data表示數(shù)據(jù)系列中的數(shù)據(jù)數(shù)組。數(shù)組項(xiàng)可以為單個(gè)數(shù)值，也可以是一個(gè)數(shù)組形式的數(shù)據(jù)，在異步動(dòng)態(tài)加載中，data一般是從后臺(tái)獲取的json形式數(shù)組。

3.3 ? ECharts的交互組件

可視化并不意味著呈現(xiàn)的畫面是靜態(tài)不變化的[9]，也不意味著用戶對(duì)于可視化的效果只能通過(guò)視覺(jué)去感受，數(shù)據(jù)的可視化還包括了用戶對(duì)可視化界面的操作和數(shù)據(jù)圖像反饋，包括了用戶的交互體驗(yàn)感。ECharts推出大量的交互組件[10]，這些交互組件都可在教師專業(yè)發(fā)展可視化領(lǐng)域加以利用，成為數(shù)據(jù)可視化促進(jìn)教師專業(yè)發(fā)展分析的重要輔助手段。在教師專業(yè)發(fā)展數(shù)據(jù)可視化項(xiàng)目中運(yùn)用了一些關(guān)鍵組件。

3.3.1 ? markPoint和markLine標(biāo)注點(diǎn)組件

markPoint用來(lái)增加標(biāo)注點(diǎn)，常常在數(shù)據(jù)呈現(xiàn)中標(biāo)注最大值和最小值，只要在代碼yAxis.series中增加markPoint。

markLine組件用于圖表標(biāo)線，在yAxis.series中增加markLine。

在教師發(fā)展數(shù)據(jù)可視化系統(tǒng)的專業(yè)論文類別顯示中，就是使用這兩個(gè)組件顯示獲取數(shù)據(jù)的最大值、最小值和平均值的，如圖4所示。

3.3.2 ? dataZoom區(qū)域縮放組件

ECharts的dataZoom組件為用戶提供了進(jìn)一步的數(shù)據(jù)交互能力，它的工作原理是通過(guò)數(shù)據(jù)過(guò)技術(shù)達(dá)到區(qū)域縮放的效果。使用這個(gè)組件，用戶能自由關(guān)注數(shù)據(jù)信息的細(xì)節(jié)，既能概覽數(shù)據(jù)整體、去除離散數(shù)據(jù)的影響[11]，又能通過(guò)鼠標(biāo)的動(dòng)作選取部分?jǐn)?shù)據(jù)，關(guān)注到局部數(shù)據(jù)的發(fā)展，有針對(duì)地掌握重要信息。dataZoom組件是對(duì)坐標(biāo)軸進(jìn)行數(shù)據(jù)窗口縮放或者窗口平移操作。dataZoom組件可以通過(guò)type屬性，決定數(shù)據(jù)是在窗口內(nèi)變化，還是在坐標(biāo)軸內(nèi)通過(guò)鼠標(biāo)滾輪操作進(jìn)行變化，在教師發(fā)展數(shù)據(jù)可視化系統(tǒng)設(shè)計(jì)中，由于專業(yè)較多，如果需要針對(duì)某一個(gè)或者幾個(gè)專業(yè)，關(guān)注數(shù)據(jù)信息的細(xì)節(jié)，就需要加入dataZoom組件進(jìn)行區(qū)域縮放，如圖5所示。

3.3.3 ? 圖例交互

圖例交互組件通過(guò)展現(xiàn)不同系列的標(biāo)記，用戶可以通過(guò)點(diǎn)擊具體圖例標(biāo)記顯示對(duì)應(yīng)數(shù)據(jù)系列，以便排除不必要的數(shù)據(jù)系列，幫助用戶進(jìn)一步把關(guān)注點(diǎn)集中在目標(biāo)數(shù)據(jù)上。在系統(tǒng)設(shè)計(jì)中，不同專業(yè)近三年的論文數(shù)據(jù)分別通過(guò)三個(gè)系列完成，如圖6所示，當(dāng)需要查看需要了解某一年的數(shù)據(jù)，就可以點(diǎn)擊圖例，進(jìn)行圖例交互，顯示單個(gè)圖例所對(duì)應(yīng)的系列數(shù)據(jù)。

3.4 ? 通過(guò)Ajax技術(shù)實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)繪制

在數(shù)據(jù)可視化的實(shí)際數(shù)據(jù)繪制中，所需要顯示的數(shù)據(jù)不是靜態(tài)數(shù)據(jù)，而需要從服務(wù)器端讀取數(shù)據(jù)進(jìn)行動(dòng)態(tài)加載后呈現(xiàn)?；玖鞒倘鐖D7所示。

3.4.1 ? 獲取后臺(tái)數(shù)據(jù)

獲取后臺(tái)數(shù)據(jù)的方法很多，這里使用PHP技術(shù)讀取后臺(tái)數(shù)據(jù)。以讀取專業(yè)論文數(shù)量為例，首先定義SQL語(yǔ)句，按專業(yè)分組為查詢論文表、教師信息表、專業(yè)信息表三張表格，得到本專業(yè)教師的論文數(shù)量。使用mysql_query（）函數(shù)送出查詢到的結(jié)果，再使用mysql_fetch_assoc（）得到結(jié)果的聯(lián)數(shù)組形式。在這里定義了數(shù)組變量$array，在使用while語(yǔ)句循環(huán)出查詢結(jié)果后，將查詢結(jié)果從尾部插入$array數(shù)組中。

$respro_SQL="SELECT c.`zy_mc`AS'zy_name'，count（a.`lw_id`） AS'lw_num'

FROM`teachers_lunwen`a，`teachers_info`b，`zhuanye`c

WHERE b.`teachers_jgh`=a.`lw_jgh`

AND c.`zy_code`=b.`teachers_code`

GROUP BY b.`teachers_code`";

$result_respro=mysql_query（$respro_SQL）;

$array=array（）;

while（$row=mysql_fetch_assoc（$result_respro））{

array_push（$array，$row）;

}

3.4.2 ? 將數(shù)據(jù)轉(zhuǎn)換成JSON數(shù)據(jù)

JSON是一種輕量級(jí)的文本數(shù)據(jù)交換格式，可以使用它進(jìn)行前端和服務(wù)器端數(shù)據(jù)交換，也可以進(jìn)行移動(dòng)端和服務(wù)器端的數(shù)據(jù)交換。將PHP數(shù)據(jù)轉(zhuǎn)換成JSON格式，如圖8所示。使用內(nèi)置函數(shù)json_encode（）進(jìn)行格式轉(zhuǎn)換。轉(zhuǎn)換為JSON之后將結(jié)果賦值給變量$data，使用PHP中的echo語(yǔ)句輸出JSON數(shù)據(jù)。

3.4.3 ? 客戶端解析JSON數(shù)據(jù)

在數(shù)據(jù)可視化頁(yè)面，ECharts不能直接使用JSON數(shù)據(jù)，所以就需要使用Ajax技術(shù)解析JSON格式數(shù)據(jù)。因?yàn)閿?shù)據(jù)是動(dòng)態(tài)顯示的，因此option中的xAxis和yAxis里的data都應(yīng)該先設(shè)置為空值。在解析完成后，用從服務(wù)器取回的數(shù)據(jù)作為data的值。

先初始化兩個(gè)數(shù)組zymc=[]，papernum=[]，分別用于存放專業(yè)名稱和論文數(shù)量，實(shí)際上這兩個(gè)數(shù)組分別用來(lái)存放X軸和Y軸的坐標(biāo)值。再在客戶端頁(yè)面中發(fā)送Ajax請(qǐng)求，獲取JSON數(shù)據(jù)。當(dāng)函數(shù)為真的時(shí)候就循環(huán)數(shù)據(jù)，把數(shù)據(jù)添加到創(chuàng)建的兩個(gè)數(shù)組里面，最后返回兩個(gè)數(shù)組。

varzymc=[]，papernum=[];//初始化兩個(gè)數(shù)組，存放從數(shù)據(jù)庫(kù)中獲取到的數(shù)據(jù)

functionget_zylwsl（） {

$.ajax（{//調(diào)用ajax來(lái)實(shí)現(xiàn)異步的加載數(shù)據(jù)

type："post"，//請(qǐng)求方式

async：false，

url："app/get_zylwsl.php"，//json文件路徑

data：{}，

dataType："json"，

success：function（result）{

if（result）{

for（var i=0;i

zymc.push（result[i].zy_name）;

papernum.push（result[i].lw_num）;

}}}，

error：function（errmsg）{

alert（"Ajax獲取服務(wù)器數(shù)據(jù)出錯(cuò)了！"+errmsg）;

}}）;

returnzymc，papernum;

}

get_zylwsl（）;//執(zhí)行異步請(qǐng)求

Ajax請(qǐng)求是寫在option外面，一次請(qǐng)求直接返回兩個(gè)數(shù)組，這樣就不會(huì)造成數(shù)據(jù)的冗余，專業(yè)名稱zymc放入X軸的data中，papernum放入series的data中。后臺(tái)數(shù)據(jù)庫(kù)中的數(shù)據(jù)的可視化結(jié)果就呈現(xiàn)在前端頁(yè)面中了，如圖9所示。

4 ? 結(jié)論（Conclusion）

本文介紹了ECharts在可視化開(kāi)發(fā)中的基礎(chǔ)配置和使用方法，展示了數(shù)據(jù)可視化開(kāi)發(fā)過(guò)程。

通過(guò)對(duì)教師專業(yè)發(fā)展數(shù)據(jù)的可視化關(guān)鍵技術(shù)的闡述，可以看出，采用ECharts技術(shù)實(shí)現(xiàn)數(shù)據(jù)可視化后，數(shù)據(jù)呈現(xiàn)形式鮮明、直觀，能夠向用戶形象直觀地呈現(xiàn)數(shù)據(jù)，便于用戶對(duì)數(shù)據(jù)表進(jìn)行管理、總結(jié)和分析，能夠極大提高工作效率，在教師專業(yè)發(fā)展數(shù)據(jù)可視化開(kāi)發(fā)中發(fā)揮了重要作用，通過(guò)將教師教學(xué)、科研、教育積累的大量數(shù)據(jù)以適合的方式加以呈現(xiàn)，能促進(jìn)決策者全面、正確、深入理解數(shù)據(jù)，科學(xué)制定教師發(fā)展決策。也為當(dāng)下流行的數(shù)據(jù)挖掘、大數(shù)據(jù)分析提供了技術(shù)支持。

參考文獻(xiàn)（References）

[1] LauraE.Matzen，MichaelJ.Haass，KristinM.Divis，et al.Wilson.Data Visualization Saliency Model：A Tool for Evaluating Abstract Data Visualizations[J].IEEE Transactions on Visualization and Computer Graphics，2018，24（1）：563-573.

[2] Xuedi Qin，Yuyu Luo，Nan Tang，et al.DEEPEYE：An Automatic Big Data Visualization Framework[J].Big Data Mining and Analytics，2018，1（01）：75-82

[3] HumairaEhsan，MohamedA.Sharaf，PanosK.Chrysanthis.Efficient Recommendation of Aggregate Data Visualizations[J].IEEE Transactions on Knowledge and Data Engineering，2018，30（2）：263-277.

[4] 胡瑞娟.大數(shù)據(jù)架構(gòu)下的熱詞發(fā)現(xiàn)與可視化技術(shù)研究[J].軟件工程，2018，21（05）：1-3.

[5] 陳為，沈則潛.數(shù)據(jù)可視化[M].北京：電子工業(yè)出版社，2013：12.

[6] 崔迪，郭小燕，陳為.大數(shù)據(jù)可視化的挑戰(zhàn)與最新進(jìn)展[J].計(jì)算機(jī)應(yīng)用，2017，37（07）：2044-2049;2056.

[7] 王龍，王一男.基于ECharts的可視化高校綜合信息分析決策系統(tǒng)[J].現(xiàn)代電子技術(shù)，2017，40（06）：68-70.

[8] 沈漢威，張小龍，陳為，等.可視化及可視分析專題前言[J].軟件學(xué)報(bào)，2016，27（05）：1059-1060.

[9] 王龍，王一男.基于ECharts的可視化高校綜合信息分析決策系統(tǒng)[J].現(xiàn)代電子技術(shù)，2017，40（06）：68-70.

[10] 王子毅，張春海.基于ECharts的數(shù)據(jù)可視化分析組件設(shè)計(jì)實(shí)現(xiàn)[J].微型機(jī)與應(yīng)用，2016，35（14）：46-48;51.

[11] 劉歡，湯維中，任友群.數(shù)據(jù)可視化促進(jìn)教育決策科學(xué)化：內(nèi)涵、策略與挑戰(zhàn)[J].教育發(fā)展研究，2018，38（05）：75-82.

作者簡(jiǎn)介：

崔 ?蓬（1980-），女，碩士，講師.研究領(lǐng)域：虛擬現(xiàn)實(shí)，Web程序開(kāi)發(fā).