ECharts在數據可視化中的應用

崔蓬

摘 ?要：目前人們在各個領域面對海量數據，需要借助數據可視化技術把海量數據轉換為動態圖像或圖形，并利用交互手段幫助人們進行理解數據，以便完成進一步的數據分析。在教師專業發展領域中鮮有聚焦數據可視化的研究。本文按照可視化的基本流程，探索了基于ECharts平臺的可視化開發方法，以教師專業發展數據的可視化系統為例，重點敘述了ECharts圖表在客戶端的構建方法、交互組件在可視化中的應用，展示了通過Ajax技術實現動態數據繪制的過程。

關鍵詞：數據可視化;ECharts;動態數據加載

中圖分類號：TP311.5 ? ? ?文獻標識碼：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）

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

在教師專業發展領域中鮮有聚焦數據可視化的研究。本文將以教師專業發展數據的可視化為例，基于ECharts技術，闡述數據可視化系統的開發與應用。

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

2.1 ? 可視化通用流程

總的來說，可視化流程可以分為三個階段：采集、處理、呈現，如圖1所示。可視化采集的數據都是從基于數據背后的自然現象或社會現象抽象出來的數據。數據類型、數據結構均會根據可視化任務的不同而改變。數據采集后要對數據進行數據清洗、規范、分析[5]，形成具有一定組織形式和規范的存儲結構，采用合適的數據處理方法，將所需數據信息映射到不同的視覺通道，在制作或寫代碼過程中，再不斷調整和迭代，最后呈現出想要的結果。

2.2 ? 可視化循環模型

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

3 ?基于ECharts平臺的可視化開發（Visualization development based on ECharts）

3.1 ? ECharts的主要特點

ECharts是百度推出的一款可視化開源開發框架[7]。它使用JavaScript技術，底層依賴輕量級的矢量圖形庫ZRender，主要的圖表繪制方式為Canvas繪圖，提供直觀的數據可視化圖表庫。基于ECharts的可視化圖表可以在多終端設備上流暢運行，兼容桌面系統移動端，瀏覽器兼容性強。ECharts的引入簡單，通過配置項的設置，就可以控制數據呈現形式和視覺效果。ECharts通過豐富組件和高度個性化的可視化解決方案，實現用戶和數據的交互，從而增強用戶獲取知識、優化數據分析的能力[8]。

3.2 ? ECharts在客戶端的構建和圖表實現

3.2.1 ? 客戶端引入ECharts圖表庫

ECharts圖表的構建和實現，按照如圖3所示流程進行。

ECharts在客戶端的引入是比較簡單的，ECharts3版本開始，不再使用內置AMD加載器，只需要在前端頁面中的head部分，使用script標簽直接引入ECharts的依賴js庫，。

3.2.2 ? 初始化圖表實例和數據配置

在繪制圖標前，需要為ECharts準備一個具備一定寬高的DOM容器，能夠放下所需要的圖表。使用getElementById（）函數，獲取DOM容器，使用ECharts.init（）方法，基于這個DOM容器，完成對圖表的初始化。

<！doctype html>

完成圖表的初始化以后，再使用setOption方法實現DOM容器中數據的渲染，并使用Option參數配置圖表數據，最后使用通用的通過setOption方法生成需要的圖表類型。

option={

title：{

text：'分專業課題項目級別'

}，

tooltip：{

trigger：'axis'

}，

legend：{

data：['國家級'，'省級'，'地市級'，'校級']

}，

xAxis：{

type：'category'，

data：['動漫制作技術'，'嵌入式技術與應用'，'計算機應用技術'，'計算網絡技術'，'軟件技術']

}，

yAxis：{

type：'value'

}，

series：[{

name：'國家級'，

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

type：'bar'，

}，{

name：'省級'，

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

type：'bar'，

}，{

name：'地市級'，

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

type：'bar'，

}，{

name：'校級'，

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

type：'bar'，

}

]};

myChart.setOption（option）;

常見配置項說明見表1。

Axis表示直角坐標系中的坐標軸，下級參數data表示類目數據，在類目軸type：'category'中有效，數據可以簡化為一個一維數組表示。Series是圖表中的數據核心，其下級data表示數據系列中的數據數組。數組項可以為單個數值，也可以是一個數組形式的數據，在異步動態加載中，data一般是從后臺獲取的json形式數組。

3.3 ? ECharts的交互組件

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

3.3.1 ? markPoint和markLine標注點組件

markPoint用來增加標注點，常常在數據呈現中標注最大值和最小值，只要在代碼yAxis.series中增加markPoint。

markLine組件用于圖表標線，在yAxis.series中增加markLine。

在教師發展數據可視化系統的專業論文類別顯示中，就是使用這兩個組件顯示獲取數據的最大值、最小值和平均值的，如圖4所示。

3.3.2 ? dataZoom區域縮放組件

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

3.3.3 ? 圖例交互

圖例交互組件通過展現不同系列的標記，用戶可以通過點擊具體圖例標記顯示對應數據系列，以便排除不必要的數據系列，幫助用戶進一步把關注點集中在目標數據上。在系統設計中，不同專業近三年的論文數據分別通過三個系列完成，如圖6所示，當需要查看需要了解某一年的數據，就可以點擊圖例，進行圖例交互，顯示單個圖例所對應的系列數據。

3.4 ? 通過Ajax技術實現動態數據繪制

在數據可視化的實際數據繪制中，所需要顯示的數據不是靜態數據，而需要從服務器端讀取數據進行動態加載后呈現。基本流程如圖7所示。

3.4.1 ? 獲取后臺數據

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

$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 ? 將數據轉換成JSON數據

JSON是一種輕量級的文本數據交換格式，可以使用它進行前端和服務器端數據交換，也可以進行移動端和服務器端的數據交換。將PHP數據轉換成JSON格式，如圖8所示。使用內置函數json_encode（）進行格式轉換。轉換為JSON之后將結果賦值給變量$data，使用PHP中的echo語句輸出JSON數據。

3.4.3 ? 客戶端解析JSON數據

在數據可視化頁面，ECharts不能直接使用JSON數據，所以就需要使用Ajax技術解析JSON格式數據。因為數據是動態顯示的，因此option中的xAxis和yAxis里的data都應該先設置為空值。在解析完成后，用從服務器取回的數據作為data的值。

先初始化兩個數組zymc=[]，papernum=[]，分別用于存放專業名稱和論文數量，實際上這兩個數組分別用來存放X軸和Y軸的坐標值。再在客戶端頁面中發送Ajax請求，獲取JSON數據。當函數為真的時候就循環數據，把數據添加到創建的兩個數組里面，最后返回兩個數組。

varzymc=[]，papernum=[];//初始化兩個數組，存放從數據庫中獲取到的數據

functionget_zylwsl（） {

$.ajax（{//調用ajax來實現異步的加載數據

type："post"，//請求方式

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獲取服務器數據出錯了！"+errmsg）;

}}）;

returnzymc，papernum;

}

get_zylwsl（）;//執行異步請求

Ajax請求是寫在option外面，一次請求直接返回兩個數組，這樣就不會造成數據的冗余，專業名稱zymc放入X軸的data中，papernum放入series的data中。后臺數據庫中的數據的可視化結果就呈現在前端頁面中了，如圖9所示。

4 ? 結論（Conclusion）

本文介紹了ECharts在可視化開發中的基礎配置和使用方法，展示了數據可視化開發過程。

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

參考文獻（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] 胡瑞娟.大數據架構下的熱詞發現與可視化技術研究[J].軟件工程，2018，21（05）：1-3.

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

[6] 崔迪，郭小燕，陳為.大數據可視化的挑戰與最新進展[J].計算機應用，2017，37（07）：2044-2049;2056.

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

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

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

[10] 王子毅，張春海.基于ECharts的數據可視化分析組件設計實現[J].微型機與應用，2016，35（14）：46-48;51.

[11] 劉歡，湯維中，任友群.數據可視化促進教育決策科學化：內涵、策略與挑戰[J].教育發展研究，2018，38（05）：75-82.

作者簡介：

崔 ?蓬（1980-），女，碩士，講師.研究領域：虛擬現實，Web程序開發.