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

鄭戟明　柳青

摘要：數(shù)據(jù)可視化作為一種數(shù)據(jù)展示和分析的工具已廣泛應(yīng)用各個(gè)領(lǐng)域。文章根據(jù)數(shù)據(jù)可視化課程的特點(diǎn)，有機(jī)結(jié)合了Echarts的基本功能、參數(shù)配置以及實(shí)現(xiàn)手段等內(nèi)容，并把這些內(nèi)容通過(guò)分階段有效地運(yùn)用到課堂教學(xué)的各個(gè)環(huán)節(jié)中。在課堂教學(xué)中展示了數(shù)據(jù)可視化的實(shí)現(xiàn)過(guò)程。文章表明了，通過(guò)一系列的訓(xùn)練，學(xué)生掌握了運(yùn)用數(shù)據(jù)可視化工具的方法，同時(shí)學(xué)生的綜合應(yīng)用能力也得到了很大的提升。

關(guān)鍵詞：數(shù)據(jù)可視化;Echarts;JavaScript;圖表;課堂教學(xué)

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

文章編號(hào)：1009-3044（2020）02-0009-03

Abstract： As a tool for data display and analysis， data visualization has been widely used in various fields. According to the characteristics of data visualization course， this paper combines Echarts' basic functions， parameter configuration and implementation methods， and these contents can be effectively applied to classroom teaching. The realization process of data visualization is shown in classroom teaching. The article shows that through a series of training， students have mastered the method of using data visualization tools， and their comprehensive application ability has been improved.

Key words： data visualization; Echarts; JavaScript; charts; classroom teaching

1 概述

數(shù)據(jù)可視化主要是通過(guò)各種視覺(jué)形式，清晰又直觀地展現(xiàn)復(fù)雜數(shù)據(jù)。簡(jiǎn)單說(shuō)，即利用圖形化手段，來(lái)傳遞與交流信息。數(shù)據(jù)可視化的目的其實(shí)就是借助圖形化的手段，讓人們更直觀生動(dòng)的了解數(shù)據(jù)。

在大數(shù)據(jù)時(shí)代的背景下，人們不可避免地要面對(duì)海量數(shù)據(jù)，所以如果通過(guò)傳統(tǒng)的數(shù)據(jù)表達(dá)方式來(lái)處理和使用數(shù)據(jù)已經(jīng)是幾乎不可能的。數(shù)據(jù)可視化則提供了一條比較便捷和有效的途徑，讓人們能更好地運(yùn)用數(shù)據(jù)去解決一些實(shí)際問(wèn)題。

數(shù)據(jù)可視化工具以可視化、圖形化的形式展示數(shù)據(jù)，是進(jìn)行數(shù)據(jù)分析不容忽視的重要組成部分，如通過(guò)柱狀圖、餅圖、熱圖、直方圖、雷達(dá)/蜘蛛圖等工具可以簡(jiǎn)單地展示分析數(shù)據(jù)。數(shù)據(jù)可視化工具可以幫助用戶實(shí)現(xiàn)人機(jī)交互性、嵌入數(shù)據(jù)、數(shù)據(jù)采集與共享、數(shù)據(jù)挖掘和人工智能等功能。常用的數(shù)據(jù)可視化工具有入門級(jí)Microsoft Excel;功能強(qiáng)大的Tableau、Microsoft PowerBI、百度ECharts;數(shù)據(jù)挖掘編程語(yǔ)言Python等。

數(shù)據(jù)可視化課程重點(diǎn)是嘗試引入各種先進(jìn)的工具來(lái)實(shí)現(xiàn)數(shù)據(jù)展示、數(shù)據(jù)分析。在教學(xué)過(guò)程中，教師教學(xué)重點(diǎn)是把數(shù)據(jù)可視化工具如何合理的融入教學(xué)之中，讓學(xué)生在運(yùn)用可視化工具基礎(chǔ)上去理解和掌握數(shù)據(jù)可視化概念和相關(guān)知識(shí)。這樣的學(xué)習(xí)方式使學(xué)生感到有新鮮感，對(duì)教學(xué)內(nèi)容產(chǎn)生興趣，對(duì)學(xué)習(xí)知識(shí)產(chǎn)生動(dòng)力，也為數(shù)據(jù)可視化課程教學(xué)嘗試一種新的教學(xué)方法。

2 百度ECharts簡(jiǎn)介

Echarts是百度研發(fā)的開(kāi)源圖表庫(kù)，該庫(kù)提供了各種基本和專業(yè)可視化圖表，使能進(jìn)行直觀的展示，并能實(shí)現(xiàn)多種方式的數(shù)據(jù)交互，而且可根據(jù)用戶需求進(jìn)行個(gè)性化定制。Echarts以大部分常用瀏覽器作為運(yùn)行平臺(tái)，對(duì)于硬件設(shè)備，不管是個(gè)人電腦還是移動(dòng)設(shè)備，都能很好地運(yùn)行。ECharts通過(guò)直接引用Echarts.js文件，設(shè)置合適的DOM容器和配置一系列圖表參數(shù)即可以生成可視化圖表。

3 Echarts在數(shù)據(jù)可視化課程中的應(yīng)用

百度ECharts數(shù)據(jù)可視化是通過(guò)JavaScript來(lái)實(shí)現(xiàn)的。JavaScript是一種屬于網(wǎng)絡(luò)的腳本語(yǔ)言，JavaScript腳本是通過(guò)嵌入在HTML中來(lái)實(shí)現(xiàn)自身的功能的。對(duì)于沒(méi)有程序設(shè)計(jì)基礎(chǔ)的學(xué)生，要運(yùn)用JavaScript來(lái)實(shí)現(xiàn)數(shù)據(jù)可視化會(huì)存在一定的困難，所以需要結(jié)合本課程的特點(diǎn)，采用合適的教學(xué)手段與方法來(lái)完成教學(xué)任務(wù)。

3.1 數(shù)據(jù)可視化任務(wù)分解

ECharts數(shù)據(jù)可視化可以提供直觀，交互豐富，可高度個(gè)性化定制的復(fù)雜數(shù)據(jù)可視化圖表。這些圖表呈現(xiàn)在的學(xué)生面前的將是一個(gè)比較復(fù)雜的，且是較為龐大的問(wèn)題，同時(shí)還要基于JavaScript腳本語(yǔ)言來(lái)實(shí)現(xiàn)，這時(shí)很多學(xué)生會(huì)感覺(jué)到困難，產(chǎn)生了懼怕心理。解決這一問(wèn)題的最好方法，就是采用搭積木的形式，將原來(lái)較為煩瑣的案例基于知識(shí)點(diǎn)通過(guò)合理的方法進(jìn)行分解，在教學(xué)過(guò)程中分多個(gè)階段步驟去實(shí)現(xiàn)。針對(duì)分解后的案例，分階段和步驟去逐個(gè)找出實(shí)現(xiàn)的方法，最終完成整個(gè)案例。這樣可以有效地降低難度，便于分析和解決問(wèn)題。在課堂教學(xué)中引入了這一手段，將數(shù)據(jù)可視化過(guò)程進(jìn)行了相應(yīng)的簡(jiǎn)化。

在數(shù)據(jù)可視化課程教學(xué)過(guò)程中，教師把整個(gè)案例分解成多個(gè)任務(wù)，如獲取與引入ECharts、繪制簡(jiǎn)單的圖表、設(shè)置圖表的樣式、加入交互組件、事件和行為等。這樣學(xué)生面對(duì)的不再是包含大段代碼程序的整個(gè)煩瑣的案例，而是一段段相對(duì)容易理解的小程序，所以學(xué)生只需要像搭積木一樣將一段段小程序拼接起來(lái)，那么最終也就實(shí)現(xiàn)了整個(gè)案例的功能，同時(shí)也基本掌握了數(shù)據(jù)可視化的方法和過(guò)程。

所以教學(xué)的第一階段的主要任務(wù)是實(shí)現(xiàn)ECharts的數(shù)據(jù)可視化基本功能。

（1） 在引入 Echarts.js文件之前，先需要新建一個(gè)html文件。

<！DOCTYPE html>

...

...

（2） 引入ECharts圖表庫(kù)（echarts.js文件）。

ECharts只需要像普通JavaScript庫(kù)一樣用script 標(biāo)簽引入。

（3） 在繪圖前為ECharts設(shè)置放圖表的 DOM 容器，并設(shè)定該容器的寬和高。

（4） 通過(guò) echarts.init 方法初始化一個(gè)echarts 實(shí)例。

var myChart = echarts.init（document.getElementById（'chartmain'））;

（5） 通過(guò)參數(shù)option完成圖形樣式、數(shù)據(jù)等配置。

var option = {…};

在option中series 是生成圖表的核心，其中type參數(shù)表示圖表類型，data參數(shù)表示生成圖表的數(shù)據(jù)。

（6） ECharts使用setOption 方法實(shí)現(xiàn)加載div 容器中各類數(shù)據(jù)，生成需要的圖表類型。

myChart.setOption（option）;

在這一學(xué)習(xí)過(guò)程中，將一個(gè)個(gè)任務(wù)像搭積木按步驟完成，就可以實(shí)現(xiàn)ECharts的數(shù)據(jù)可視化基本功能。

3.2 數(shù)據(jù)可視化功能加入

在數(shù)據(jù)可視化課程的初級(jí)階段，主要是要求學(xué)生掌握ECharts的數(shù)據(jù)可視化圖表創(chuàng)建的基本過(guò)程。通過(guò)這一階段的學(xué)習(xí)，學(xué)生對(duì)數(shù)據(jù)可視化方法和過(guò)程有了一定的了解。但是由于這一階段教學(xué)內(nèi)容只涉及基本的知識(shí)和概念，學(xué)生對(duì)于數(shù)據(jù)可視化知識(shí)和JavaScript腳本語(yǔ)言的掌握還是有所欠缺的，因此在掌握基于ECharts圖形庫(kù)創(chuàng)建基本可視化圖表的基礎(chǔ)上，有必要對(duì)學(xué)習(xí)內(nèi)容加以深入和擴(kuò)展，需要把數(shù)據(jù)可視化各種更為復(fù)雜的功能加入教學(xué)過(guò)程中。

在該階段中，教學(xué)的主要內(nèi)容是如何把與數(shù)據(jù)可視化功能相關(guān)的知識(shí)合理嵌入到課堂教學(xué)中，同時(shí)教師的課堂職能也需要有所轉(zhuǎn)變。教師的主要作用不再是對(duì)知識(shí)進(jìn)行全面細(xì)致的講解，而是將實(shí)現(xiàn)各種新功能所一些需要重視的關(guān)鍵點(diǎn)進(jìn)行解析和提示，培養(yǎng)學(xué)生獨(dú)立思考和解決問(wèn)題的能力，擺脫依賴心理。

在新增加的可視化功能中將涉及設(shè)置圖表標(biāo)題和圖例參數(shù)、交互參數(shù)、工具箱參數(shù)和樣式參數(shù)等內(nèi)容。這部分內(nèi)容涉及知識(shí)點(diǎn)較多，應(yīng)用到的函數(shù)和語(yǔ)句復(fù)雜程度和數(shù)量上有所增加。由于受課堂教學(xué)課時(shí)的限制，教師不能再以知識(shí)體系作為教學(xué)的主要思路和線索來(lái)實(shí)施教學(xué)，而是要結(jié)合數(shù)據(jù)可視化各種功能的實(shí)現(xiàn)，去講解所涉及的知識(shí)。如在樣式設(shè)置中，包含了itemStyle、lineStyle、areaStyle、label等各種參數(shù)設(shè)置，那么教師就需要有針對(duì)性的講解這些參數(shù)的作用、格式、使用對(duì)象等內(nèi)容，這樣學(xué)生對(duì)這些參數(shù)有了直觀的理解，而且可以在課堂就能設(shè)置和實(shí)現(xiàn)這些參數(shù)的功能。這種教學(xué)方式以應(yīng)用作為教學(xué)目的，讓所學(xué)知識(shí)相對(duì)容易接受和掌握，也提升了學(xué)生學(xué)習(xí)的積極性，教學(xué)效果比傳統(tǒng)教學(xué)有所提高。當(dāng)然對(duì)于另一些課堂教學(xué)中沒(méi)有涉及的，但又比較重要的可視化參數(shù)和功能，教師會(huì)提供一些資料和途徑，作為課外知識(shí)進(jìn)行拓展，培養(yǎng)學(xué)生自學(xué)的能力。

3.3 數(shù)據(jù)可視化綜合能力訓(xùn)練

經(jīng)過(guò)前面階段的訓(xùn)練和學(xué)習(xí)，學(xué)生應(yīng)該較好掌握了ECharts數(shù)據(jù)可視化的方法和過(guò)程。但是依舊存在一系列問(wèn)題，如教學(xué)內(nèi)容相對(duì)比較單一，只應(yīng)用了一些常用基本圖表，如折線圖、柱狀圖、散點(diǎn)圖、餅圖等，但缺乏專業(yè)圖表基本的應(yīng)用，如地圖、關(guān)系圖、熱力圖等;可視化參數(shù)也有限，而且涉及范圍也不廣，特別是在動(dòng)態(tài)數(shù)據(jù)展示方面更為欠缺;數(shù)據(jù)的應(yīng)用沒(méi)有實(shí)現(xiàn)與常用的后臺(tái)數(shù)據(jù)庫(kù)關(guān)聯(lián)，如MySQL等;后臺(tái)交互等更多的綜合應(yīng)用知識(shí)幾乎沒(méi)有涉及。

當(dāng)然上述一系列問(wèn)題不可能在課堂上全部解決，但教師可以通過(guò)一些教學(xué)手段，以及合理有效的引導(dǎo)學(xué)生，逐步去解決這些問(wèn)題，或者提供解決問(wèn)題的思路和方法。所以本階段在結(jié)合實(shí)現(xiàn)ECharts數(shù)據(jù)可視化基本功能的基礎(chǔ)上，再增加一些較為復(fù)雜，綜合應(yīng)用程度高的圖表功能，如數(shù)據(jù)標(biāo)注內(nèi)容設(shè)置;強(qiáng)調(diào)樣式設(shè)置;Echarts主題設(shè)置;樣式設(shè)置等。要實(shí)現(xiàn)上述功能，前階段所學(xué)的知識(shí)是不夠的，而要在課堂上詳細(xì)的講解這些功能也是不現(xiàn)實(shí)的，所以教師可以在課堂進(jìn)行一些簡(jiǎn)單的講解，然后提供一些相關(guān)資料，還有一些獲取資料的途徑，如參考書(shū)籍、參考文獻(xiàn)、相關(guān)網(wǎng)站論壇等等，引導(dǎo)學(xué)生在查詢資料的基礎(chǔ)上，組織小組討論，尋求實(shí)現(xiàn)上述圖表功能的方法。當(dāng)然在自學(xué)過(guò)程中，學(xué)生不可避免會(huì)產(chǎn)生各種各樣的問(wèn)題，但是教師采用這種教學(xué)手段的目的主要是培養(yǎng)學(xué)生思考探索問(wèn)題的過(guò)程，重點(diǎn)不在于的完成結(jié)果如何。在經(jīng)過(guò)學(xué)生自學(xué)這一過(guò)程后，教師在課堂要及時(shí)加以總結(jié)分析，對(duì)于積極思考，努力探索的學(xué)生給予表?yè)P(yáng)，對(duì)他們進(jìn)行鼓勵(lì)，從而培養(yǎng)學(xué)生獨(dú)立思考、團(tuán)隊(duì)合作、綜合素質(zhì)等多方面的能力。

由于受到多種因素的影響和限制，僅僅通過(guò)課堂教學(xué)是不可能對(duì)學(xué)生實(shí)現(xiàn)多方位多階段的培養(yǎng)。這些綜合素質(zhì)的培養(yǎng)，往往需要在學(xué)習(xí)各種基礎(chǔ)課程知識(shí)的基礎(chǔ)上，把學(xué)到的知識(shí)，與自己專業(yè)的知識(shí)有效地結(jié)合起來(lái)，盡可能運(yùn)用到實(shí)際的工作中，如學(xué)生將學(xué)到的知識(shí)應(yīng)用到各種課題和項(xiàng)目的研究開(kāi)發(fā)中。從具體實(shí)施情況來(lái)看，學(xué)生在各方面都得到了鍛煉，都感受到收獲巨大，這些收獲和鍛煉是課堂教學(xué)所無(wú)法給予的。

4 結(jié)束語(yǔ)

在當(dāng)前的大數(shù)據(jù)時(shí)代中，數(shù)據(jù)可視化不僅僅應(yīng)用于科學(xué)研究開(kāi)發(fā)領(lǐng)域中，在各種教學(xué)活動(dòng)中也已經(jīng)被廣泛地應(yīng)用。本文結(jié)合教學(xué)特點(diǎn)，介紹了ECharts融入數(shù)據(jù)可視化課程的方法，以及實(shí)施的步驟。從實(shí)際應(yīng)用效果來(lái)看，ECharts技術(shù)直觀地將數(shù)據(jù)呈現(xiàn)出來(lái)，在數(shù)據(jù)可視化教學(xué)中發(fā)揮了重要作用，讓教師和學(xué)生對(duì)數(shù)據(jù)有全面、正確、直觀的認(rèn)識(shí)，從而進(jìn)一步深入理解和運(yùn)用數(shù)據(jù)。

參考文獻(xiàn)：

[1] （美）Stephen A.Thomas. JavaScript數(shù)據(jù)可視化編程[M]. 北京：人民郵電出版，2017.

[2] 崔蓬. ECharts在數(shù)據(jù)可視化中的應(yīng)用[J]. 軟件工程，2019， 22（6）：42-46.

[3] 左圓圓，王媛媛，蔣珊珊，徐榕薈. 數(shù)據(jù)可視化分析綜述[J]. 科技與創(chuàng)新，2019（11）：82-83.

[4] 徐欣威. 基于ECharts的科技統(tǒng)計(jì)數(shù)據(jù)可視化設(shè)計(jì)與實(shí)現(xiàn)[J]. 天津科技，2019，46（3）：66-70.

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

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

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

[8] 付長(zhǎng)軍，喬宏章. 大數(shù)據(jù)可視化技術(shù)探析[J]. 無(wú)線電通信技術(shù)，2017（5）：1-5.

【通聯(lián)編輯：王力】