鄭戟明　柳青

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

關鍵詞：數據可視化;Echarts;JavaScript;圖表;課堂教學

中圖分類號：G642? ? ? ? 文獻標識碼：A

文章編號：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 概述

數據可視化主要是通過各種視覺形式，清晰又直觀地展現復雜數據。簡單說，即利用圖形化手段，來傳遞與交流信息。數據可視化的目的其實就是借助圖形化的手段，讓人們更直觀生動的了解數據。

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

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

數據可視化課程重點是嘗試引入各種先進的工具來實現數據展示、數據分析。在教學過程中，教師教學重點是把數據可視化工具如何合理的融入教學之中，讓學生在運用可視化工具基礎上去理解和掌握數據可視化概念和相關知識。這樣的學習方式使學生感到有新鮮感，對教學內容產生興趣，對學習知識產生動力，也為數據可視化課程教學嘗試一種新的教學方法。

2 百度ECharts簡介

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

3 Echarts在數據可視化課程中的應用

百度ECharts數據可視化是通過JavaScript來實現的。JavaScript是一種屬于網絡的腳本語言，JavaScript腳本是通過嵌入在HTML中來實現自身的功能的。對于沒有程序設計基礎的學生，要運用JavaScript來實現數據可視化會存在一定的困難，所以需要結合本課程的特點，采用合適的教學手段與方法來完成教學任務。

3.1 數據可視化任務分解

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

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

所以教學的第一階段的主要任務是實現ECharts的數據可視化基本功能。

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

<！DOCTYPE html>

...

...

（2） 引入ECharts圖表庫（echarts.js文件）。

ECharts只需要像普通JavaScript庫一樣用script 標簽引入。

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

（4） 通過 echarts.init 方法初始化一個echarts 實例。

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

（5） 通過參數option完成圖形樣式、數據等配置。

var option = {…};

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

（6） ECharts使用setOption 方法實現加載div 容器中各類數據，生成需要的圖表類型。

myChart.setOption（option）;

在這一學習過程中，將一個個任務像搭積木按步驟完成，就可以實現ECharts的數據可視化基本功能。

3.2 數據可視化功能加入

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

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

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

3.3 數據可視化綜合能力訓練

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

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

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

4 結束語

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

參考文獻：

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

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

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

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

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

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

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

[8] 付長軍，喬宏章. 大數據可視化技術探析[J]. 無線電通信技術，2017（5）：1-5.

【通聯編輯：王力】