ECharts數(shù)據(jù)可視化-教學(xué)大綱

《ECharts數(shù)據(jù)可視化》課程教學(xué)大綱（課程英文名稱）課程編號：學(xué)分：學(xué)分課時：57課時（其中：講課41課時上機(jī)16課時）先修課程：計算機(jī)基礎(chǔ)、計算機(jī)網(wǎng)絡(luò)、HTML、CSS、JavaScript適用專業(yè)：信息技術(shù)及其計算機(jī)相關(guān)專業(yè)一、課程的性質(zhì)與目標(biāo)ECharts數(shù)據(jù)可視化是一門面向Web前端開發(fā)人員的課程，用于快速掌握ECharts的開發(fā)。本課程以任務(wù)驅(qū)動模式，循序漸進(jìn)地講解了ECharts的相關(guān)知識，包括初識ECharts、ECharts基礎(chǔ)知識、折線圖、餅圖、柱狀圖、散點(diǎn)圖、雷達(dá)圖、旭日圖、關(guān)系圖、儀表盤和漏斗圖和折現(xiàn)樹圖等內(nèi)容以及一個綜合項目“電商數(shù)據(jù)可視化系統(tǒng)”。另外，本課程秉承立德樹人理念，在案例中融入了許多思政元素。通過本課程的學(xué)習(xí)，不僅可以讓學(xué)生掌握ECharts的核心知識，還可以培養(yǎng)學(xué)生的家國情懷、責(zé)任擔(dān)當(dāng)、敬業(yè)精神。二、課程設(shè)計思路和教學(xué)要求課程設(shè)計理念：通過學(xué)習(xí)本課程，使學(xué)生掌握如何將ECharts與項目開發(fā)相結(jié)合。按照學(xué)習(xí)的難易程度及先后順序安排具體的內(nèi)容，可以有效地將學(xué)生所學(xué)的內(nèi)容串聯(lián)起來，從而培養(yǎng)學(xué)生分析問題和解決問題的能力。課程設(shè)計思路：本課程根據(jù)知識點(diǎn)難易的先后順序進(jìn)行講解。采用任務(wù)驅(qū)動式體例，主要包括“任務(wù)分析”“知識儲備”“任務(wù)實現(xiàn)”等，在每個任務(wù)中，先對任務(wù)進(jìn)行需求分析，然后在知識儲備中講解實現(xiàn)這個任務(wù)需要使用到的知識，并結(jié)合示例代碼幫助學(xué)生理解，最后通過任務(wù)實現(xiàn)達(dá)到學(xué)以致用的目標(biāo)。學(xué)完ECharts的基礎(chǔ)知識后，通過一個項目實戰(zhàn)將所學(xué)內(nèi)容全部串聯(lián)起來，培養(yǎng)學(xué)生分析和解決問題的能力。操作系統(tǒng)：Windows10或更高版本開發(fā)工具：VisualStudioCode、Chrome、Node.js三、課程的主要內(nèi)容及基本要求第1章初識ECharts學(xué)習(xí)單元初識ECharts課時4課時學(xué)習(xí)目標(biāo)了解數(shù)據(jù)可視化的概念，能夠描述數(shù)據(jù)可視化的基本流程和應(yīng)用場景了解常見的數(shù)據(jù)可視化工具，能夠說出數(shù)據(jù)可視化工具ECharts、D3、Highcharts和AntV的區(qū)別了解ECharts的基本概念，能夠說出什么是ECharts熟悉ECharts5的新特性，能夠歸納ECharts5的主要特性掌握ECharts的獲取方式，能夠獨(dú)立完成ECharts的獲取掌握VisualStudioCode編輯器的下載和安裝，能夠獨(dú)立安裝VisualStudioCode掌握中文語言擴(kuò)展的安裝，能夠在VisualStudioCode編輯器中安裝中文語言擴(kuò)展掌握VisualStudioCode編輯器的使用方法，能夠在項目中創(chuàng)建HTML5文檔學(xué)習(xí)內(nèi)容知識點(diǎn)掌握程度重點(diǎn)難點(diǎn)數(shù)據(jù)可視化概述了解數(shù)據(jù)可視化應(yīng)用場景了解常見的數(shù)據(jù)可視化工具了解ECharts基本概念了解ECharts5的新特性熟悉ECharts獲取方式掌握√下載和安裝VisualStudioCode編輯器掌握安裝中文語言擴(kuò)展掌握使用VisualStudioCode編輯器掌握√第2章折線圖和餅圖學(xué)習(xí)單元折線圖和餅圖課時11課時學(xué)習(xí)目標(biāo)熟悉引入并配置ECharts的方法，能夠歸納引入并配置ECharts的步驟掌握坐標(biāo)軸組件的使用方法，能夠設(shè)置圖表的x軸、y軸掌握系列組件、標(biāo)題組件、圖例組件的使用方法，能夠設(shè)置圖表的系列、標(biāo)題、圖例掌握數(shù)據(jù)堆疊的使用方法，能夠設(shè)置數(shù)據(jù)堆疊掌握折線圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等掌握區(qū)域填充樣式的設(shè)置方法，能夠設(shè)置區(qū)域填充樣式掌握網(wǎng)格組件、提示框組件、工具欄組件的使用方法，能夠設(shè)置圖表的網(wǎng)格、提示框、工具欄掌握數(shù)據(jù)集組件的使用方法，能夠使用數(shù)據(jù)集定義數(shù)據(jù)掌握平滑曲線圖的設(shè)置方法，能夠?qū)D表設(shè)置為平滑曲線圖掌握餅圖半徑的使用方法，能夠設(shè)置餅圖的半徑掌握餅圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等掌握南丁格爾圖的設(shè)置方法，能夠?qū)D表設(shè)置為南丁格爾圖掌握折線圖的繪制，能夠完成基礎(chǔ)折線圖、堆疊折線圖、區(qū)域面積圖、堆疊面積折線圖、階梯折線圖和平滑曲線圖等的繪制掌握餅圖的繪制，能夠完成基礎(chǔ)餅圖和南丁格爾圖的繪制學(xué)習(xí)內(nèi)容知識點(diǎn)掌握程度重點(diǎn)難點(diǎn)引入并配置ECharts熟悉坐標(biāo)軸組件掌握√√系列組件掌握√√標(biāo)題組件掌握√任務(wù)2.1.1繪制基礎(chǔ)折線圖掌握初識堆疊折線圖了解圖例組件掌握√數(shù)據(jù)堆疊掌握折線圖的文本標(biāo)簽掌握√任務(wù)2.1.2繪制堆疊折線圖掌握初識區(qū)域面積圖了解區(qū)域填充樣式掌握網(wǎng)格組件掌握√任務(wù)2.1.3繪制區(qū)域面積圖掌握初識堆疊面積折線圖了解提示框組件掌握√任務(wù)2.1.4繪制堆疊面積折線圖掌握初識階梯折線圖了解工具欄組件掌握√任務(wù)2.1.5繪制階梯折線圖掌握初識平滑曲線圖了解數(shù)據(jù)集組件掌握√√平滑曲線的設(shè)置掌握任務(wù)2.1.6繪制平滑曲線圖掌握初識基礎(chǔ)餅圖了解餅圖的半徑掌握餅圖的文本標(biāo)簽掌握√任務(wù)2.2.1繪制基礎(chǔ)餅圖掌握初識南丁格爾圖了解南丁格爾圖的設(shè)置掌握任務(wù)2.2.2繪制南丁格爾圖掌握第3章柱狀圖和散點(diǎn)圖學(xué)習(xí)單元柱狀圖和散點(diǎn)圖課時9課時學(xué)習(xí)目標(biāo)掌握柱條背景樣式的設(shè)置方法，能夠設(shè)置柱條的背景色、背景描邊色、背景描邊類型等掌握柱狀圖標(biāo)線的使用方法，能夠設(shè)置最大值標(biāo)線、最小值標(biāo)線、平均值標(biāo)線等熟悉柱條寬度和間距的設(shè)置方法，能夠總結(jié)柱條寬度、最大寬度、最小寬度、間距的用法掌握圖形和標(biāo)簽高亮樣式的設(shè)置方法，能夠設(shè)置圖形和標(biāo)簽高亮樣式掌握柱條樣式的設(shè)置方法，能夠設(shè)置柱條的顏色、描邊線寬、描邊色、陰影、不透明度等掌握柱狀圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等掌握柱狀圖標(biāo)注樣式的使用方法，能夠設(shè)置標(biāo)注信息掌握坐標(biāo)軸組件中分隔線的使用方法，能夠設(shè)置x軸、y軸的分隔線掌握坐標(biāo)軸組件中不顯示零刻度的設(shè)置，能夠?qū)崿F(xiàn)x軸、y軸上零刻度的顯示與隱藏掌握漣漪動畫的相關(guān)配置，能夠設(shè)置漣漪動畫的大小、顏色、周期等掌握漣漪動畫顯示時機(jī)的設(shè)置，能夠控制漣漪動畫何時開始顯示掌握常見柱狀圖的繪制，能夠完成基礎(chǔ)柱狀圖、堆疊柱狀圖、階梯瀑布圖和堆疊條形圖的繪制掌握常見散點(diǎn)圖的繪制，能夠完成基礎(chǔ)散點(diǎn)圖、帶有漣漪動畫的散點(diǎn)圖、氣泡圖的繪制學(xué)習(xí)內(nèi)容知識點(diǎn)掌握程度重點(diǎn)難點(diǎn)初識基礎(chǔ)柱狀圖了解柱條的背景樣式掌握√任務(wù)3.1.1繪制基礎(chǔ)柱狀圖掌握初識堆疊柱狀圖了解柱狀圖的標(biāo)線掌握√√柱條的寬度熟悉柱條的間距熟悉圖形和標(biāo)簽高亮樣式掌握√任務(wù)3.1.2繪制堆疊柱狀圖掌握初識階梯瀑布圖了解柱條的樣式掌握√柱狀圖的文本標(biāo)簽掌握√√任務(wù)3.1.3繪制階梯瀑布圖掌握初識堆疊條形圖了解柱狀圖的標(biāo)注樣式掌握√任務(wù)3.1.4繪制堆疊條形圖掌握初識基礎(chǔ)散點(diǎn)圖了解坐標(biāo)軸組件的分隔線掌握坐標(biāo)軸組件不顯示零刻度掌握任務(wù)3.2.1繪制基礎(chǔ)散點(diǎn)圖掌握初識帶有漣漪動畫的散點(diǎn)圖了解漣漪動畫的相關(guān)配置掌握√漣漪動畫的顯示時機(jī)掌握任務(wù)3.2.2繪制帶有漣漪動畫的散點(diǎn)圖掌握初識氣泡圖了解任務(wù)3.2.3繪制氣泡圖掌握第4章雷達(dá)圖、旭日圖和關(guān)系圖學(xué)習(xí)單元雷達(dá)圖、旭日圖和關(guān)系圖課時7課時學(xué)習(xí)目標(biāo)掌握雷達(dá)圖坐標(biāo)系組件的使用方法，能夠設(shè)置雷達(dá)圖坐標(biāo)系掌握雷達(dá)圖指示器名稱、坐標(biāo)軸軸線、坐標(biāo)軸分隔線的設(shè)置方法，能夠設(shè)置雷達(dá)圖中的指示器名稱、坐標(biāo)軸軸線、坐標(biāo)軸分隔線熟悉單擊旭日圖節(jié)點(diǎn)后的行為，能夠總結(jié)單擊旭日圖節(jié)點(diǎn)后的行為掌握旭日圖數(shù)據(jù)的使用方法，能夠設(shè)置旭日圖中所需的數(shù)據(jù)掌握旭日圖文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽的顯示狀態(tài)、位置等熟悉旭日圖半徑的設(shè)置方法，能夠總結(jié)旭日圖半徑的正確使用方法掌握旭日圖扇形塊樣式的設(shè)置方法，能夠設(shè)置旭日圖中扇形塊的樣式掌握旭日圖的多層樣式的設(shè)置方法，能夠設(shè)置不同層的樣式掌握關(guān)系圖數(shù)據(jù)的使用方法，能夠設(shè)置關(guān)系圖中所需的數(shù)據(jù)掌握關(guān)系圖節(jié)點(diǎn)標(biāo)記大小的設(shè)置方法，能夠設(shè)置節(jié)點(diǎn)標(biāo)記大小掌握關(guān)系圖節(jié)點(diǎn)間關(guān)系數(shù)據(jù)的使用方法，能夠設(shè)置節(jié)點(diǎn)間的關(guān)系數(shù)據(jù)掌握關(guān)系圖邊兩端標(biāo)記的使用方法，能夠設(shè)置關(guān)系圖邊兩端標(biāo)記掌握關(guān)系圖邊的標(biāo)簽的使用方法，能夠設(shè)置邊的標(biāo)簽掌握雷達(dá)圖的繪制，能夠完成基礎(chǔ)雷達(dá)圖和自定義雷達(dá)圖的繪制掌握旭日圖的繪制，能夠完成旭日圖和圓角旭日圖的繪制掌握關(guān)系圖的繪制，能夠完成關(guān)系圖的繪制學(xué)習(xí)內(nèi)容知識點(diǎn)掌握程度重點(diǎn)難點(diǎn)初識基礎(chǔ)雷達(dá)圖了解雷達(dá)圖坐標(biāo)系組件掌握√√任務(wù)4.1.1繪制基礎(chǔ)雷達(dá)圖掌握雷達(dá)圖指示器名稱掌握雷達(dá)圖坐標(biāo)軸軸線掌握√雷達(dá)圖坐標(biāo)軸分隔線掌握任務(wù)4.1.2繪制自定義雷達(dá)圖掌握初識旭日圖了解單擊旭日圖節(jié)點(diǎn)后的行為熟悉旭日圖的數(shù)據(jù)掌握√√任務(wù)4.2.1繪制旭日圖掌握旭日圖扇形塊的文本標(biāo)簽樣式掌握√旭日圖的半徑熟悉旭日圖扇形塊的樣式掌握旭日圖的多層樣式掌握√任務(wù)4.2.2繪制圓角旭日圖掌握初識關(guān)系圖了解關(guān)系圖的數(shù)據(jù)掌握√√關(guān)系圖節(jié)點(diǎn)標(biāo)記大小掌握關(guān)系圖節(jié)點(diǎn)間的關(guān)系數(shù)據(jù)掌握√關(guān)系圖邊兩端的標(biāo)記掌握關(guān)系圖邊的標(biāo)簽掌握任務(wù)4.2.3繪制關(guān)系圖掌握第5章儀表盤、漏斗圖和折線樹圖學(xué)習(xí)單元儀表盤、漏斗圖和折線樹圖課時7課時學(xué)習(xí)目標(biāo)掌握儀表盤的相關(guān)配置，能夠設(shè)置儀表盤的半徑、軸線、刻度、分隔線等掌握儀表盤的指針、指針固定點(diǎn)、刻度標(biāo)簽的使用方法，能夠設(shè)置圖表指針、指針固定點(diǎn)、刻度標(biāo)簽等掌握漏斗圖樣式的設(shè)置方法，能夠設(shè)置漏斗圖的數(shù)據(jù)排列順序、漏斗圖每部分的間距、漏斗圖每部分的名稱等掌握漏斗圖的文本標(biāo)簽和視覺引導(dǎo)線的使用方法，能夠設(shè)置圖表的文本標(biāo)簽和視覺引導(dǎo)線掌握折線樹圖的使用方法，能夠設(shè)置圖表數(shù)據(jù)的定義和樣式等掌握常見儀表盤的繪制，能夠完成進(jìn)度儀表盤和時鐘儀表盤的繪制掌握常見漏斗圖的繪制，能夠完成標(biāo)準(zhǔn)漏斗圖和對比漏斗圖的繪制掌握常見折線樹圖的繪制，能夠完成折線樹圖的繪制學(xué)習(xí)內(nèi)容知識點(diǎn)掌握程度重點(diǎn)難點(diǎn)初識儀表盤了解儀表盤的相關(guān)配置掌握√√任務(wù)5.1.1繪制進(jìn)度儀表盤掌握儀表盤指針掌握√儀表盤指針固定點(diǎn)掌握√儀表盤刻度標(biāo)簽掌握√任務(wù)5.1.2繪制時鐘儀表盤掌握初識基礎(chǔ)漏斗圖了解漏斗圖的樣式掌握漏斗圖的文本標(biāo)簽樣式掌握√任務(wù)5.2.1繪制基礎(chǔ)漏斗圖掌握初識對比漏斗圖了解漏斗圖文本標(biāo)簽的視覺引導(dǎo)線掌握任務(wù)5.2.2繪制對比漏斗圖掌握初識折線樹圖了解折線樹圖的實現(xiàn)掌握√√任務(wù)5.2.3繪制折線樹圖掌握第6章ECharts的高級使用（上）學(xué)習(xí)單元ECharts的高級使用（上）課時7課時學(xué)習(xí)目標(biāo)掌握顏色主題的使用方法，能夠設(shè)置全局顏色主題掌握調(diào)色盤的使用方法，能夠設(shè)置圖形、系列的顏色掌握自定義顏色主題的使用方法，能夠根據(jù)需求快速生成配置文件并使用所定義的顏色主題掌握坐標(biāo)軸索引的使用方法，能夠設(shè)置x、y軸的索引掌握x、y軸偏移的設(shè)置方法，能夠設(shè)置x、y軸相對于默認(rèn)位置的偏移掌握富文本標(biāo)簽的使用方法，能夠設(shè)置文本標(biāo)簽樣式掌握多圖表聯(lián)動的設(shè)置方法，能夠?qū)崿F(xiàn)多圖表聯(lián)動掌握ECharts顏色主題的設(shè)置，能夠更改顏色主題、自定義顏色主題掌握圖表混搭和多圖表聯(lián)動的設(shè)置，能夠?qū)崿F(xiàn)折線圖和柱狀圖的混搭、柱狀圖和餅圖的混搭、柱狀圖和餅圖的聯(lián)動學(xué)習(xí)內(nèi)容知識點(diǎn)掌握程度重點(diǎn)難點(diǎn)顏色主題掌握調(diào)色盤掌握√任務(wù)6.1.1更改圖表顏色主題掌握自定義顏色主題掌握√任務(wù)6.1.2自定義圖表顏色主題掌握坐標(biāo)軸的索引掌握√x、y軸的偏移掌握任務(wù)6.2.1折線圖和柱狀圖的混搭掌握富文本標(biāo)簽掌握√任務(wù)6.2.2柱狀圖和餅圖的混搭掌握多圖表聯(lián)動掌握√√任務(wù)6.2.3柱狀圖和餅圖的聯(lián)動掌握第7章ECharts的高級使用（下）學(xué)習(xí)單元ECharts的高級使用（下）課時6課時學(xué)習(xí)目標(biāo)了解了解事件的概念，能夠說出事件的3要素掌握鼠標(biāo)事件的使用方法，能夠?qū)崿F(xiàn)單擊、雙擊、鼠標(biāo)指針移入、鼠標(biāo)指針移出等效果掌握圖表自適應(yīng)的設(shè)置方法，能夠使用resize()方法實現(xiàn)圖表的自適應(yīng)效果掌握行為事件的使用方法，能夠根據(jù)組件交互行為靈活運(yùn)用相應(yīng)的事件掌握代碼觸發(fā)ECharts中組件的行為的設(shè)置方法，能夠調(diào)用dispatchAction()方法模擬觸發(fā)圖表的某些行為掌握LiveServer擴(kuò)展的使用設(shè)置方法，能夠創(chuàng)建本地服務(wù)器來預(yù)覽網(wǎng)頁掌握異步加載數(shù)據(jù)的設(shè)置方法，能夠通過Ajax操作方法加載圖表數(shù)據(jù)掌握加載動畫的使用方法，能夠設(shè)置加載動畫的顯示或隱藏掌握增量動畫的使用方法，能夠通過setOption()方法實現(xiàn)數(shù)據(jù)改變的動畫效果掌握動畫配置的相關(guān)方法，能夠使用動畫的相關(guān)屬性設(shè)置圖表初始動畫效果和數(shù)據(jù)更新動畫效果掌握事件與行為的使用方法，能夠根據(jù)不同需求使用鼠標(biāo)事件、行為事件掌握數(shù)據(jù)異步加載的設(shè)置方法與動畫的使用方法，能夠異步加載圖表的數(shù)據(jù)，并為圖表設(shè)置動畫學(xué)習(xí)內(nèi)容知識點(diǎn)掌握程度重點(diǎn)難點(diǎn)事件概述了解用戶鼠標(biāo)操作事件掌握√√圖表自適應(yīng)掌握任務(wù)7.1.1鼠標(biāo)事件掌握組件交互的行為事件掌握√代碼觸發(fā)ECharts中組件的行為掌握任務(wù)7.1.2行為事件掌握LiveServer擴(kuò)展掌握異步加載數(shù)據(jù)掌握√任務(wù)7.2.1異步加載圖表的數(shù)據(jù)掌握加載動畫掌握增量動畫掌握動畫的配置掌握任務(wù)7.2.2為圖表設(shè)置動畫掌握第8章項目實戰(zhàn)——電商數(shù)據(jù)可視化系統(tǒng)學(xué)習(xí)單元項目實戰(zhàn)——電商數(shù)據(jù)可視化系統(tǒng)課時6課時學(xué)習(xí)目標(biāo)熟悉項目的整體結(jié)構(gòu)，能夠歸納項目的整體結(jié)構(gòu)掌握用戶數(shù)量及同比增長率圖表的開發(fā)，能夠獨(dú)立完成代碼掌握青年消費(fèi)者的需求分布圖表的開發(fā)，能夠獨(dú)立完成代碼掌握用戶狀態(tài)分布圖表的開發(fā)，能夠獨(dú)立完成代碼掌握用戶分類圖表的開發(fā)，能夠獨(dú)立完成代碼掌握年度銷售額圖表的開發(fā)，能夠獨(dú)立完成代碼掌握月度銷售額圖表的開發(fā)，能夠獨(dú)立完成代碼掌握平臺轉(zhuǎn)化率圖表的開發(fā)，能夠獨(dú)立完成代碼掌握各地區(qū)銷售分析圖表的開發(fā)，能夠獨(dú)立完成代碼掌握單日訂單量圖表的開發(fā)，能夠獨(dú)立完成代碼掌握不同訂單狀態(tài)下的訂單數(shù)量圖表的開發(fā)，能夠獨(dú)立完成代碼掌握各地區(qū)訂單量分布情況圖表的開發(fā)，能夠獨(dú)立完成代碼掌握訂單配送方式分布情況圖表的開發(fā)，能夠獨(dú)立完成代碼學(xué)習(xí)內(nèi)容知識點(diǎn)掌握程度重點(diǎn)難點(diǎn)項目介紹熟悉項目初始化掌握任務(wù)8.3.1用戶數(shù)量及同比增長率掌握√任務(wù)8.3.2青年消費(fèi)者的需求分布掌握任務(wù)8.3.3用戶狀態(tài)分布掌握任務(wù)8.3.4用戶分類掌握任務(wù)8.3.5年度銷