《ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)》教學(xué)大綱課程名稱：《ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)》課程類別：必修適用專業(yè)：計(jì)算機(jī)科學(xué)與技術(shù)、大數(shù)據(jù)技術(shù)類、商務(wù)數(shù)據(jù)分析與應(yīng)用、電子商務(wù)等相關(guān)專業(yè)總學(xué)時：64學(xué)時（其中理論31學(xué)時，實(shí)驗(yàn)33學(xué)時）總學(xué)分：4.0學(xué)分課程性質(zhì)隨著云計(jì)算與物聯(lián)網(wǎng)的興起，大數(shù)據(jù)時代已經(jīng)到來，ChatGPT的方興未艾，在商業(yè)、經(jīng)濟(jì)及其他領(lǐng)域中基于數(shù)據(jù)分析以動態(tài)地展示數(shù)據(jù)起來越重要。Web數(shù)據(jù)可視化技術(shù)將幫助企業(yè)用戶在動態(tài)地展示數(shù)據(jù)，為企業(yè)經(jīng)營決策積極的幫助。Web數(shù)據(jù)可視化技術(shù)作為一門前沿技術(shù)，廣泛應(yīng)用于物聯(lián)網(wǎng)、云計(jì)算、移動互聯(lián)網(wǎng)等戰(zhàn)略新興產(chǎn)業(yè)。有實(shí)踐操作經(jīng)驗(yàn)的Web數(shù)據(jù)可視化人才已經(jīng)成為各企業(yè)爭奪的熱門人才。為了推動我國大數(shù)據(jù)，云計(jì)算，人工智能行業(yè)的發(fā)展，滿足日益增長的數(shù)據(jù)可視化技術(shù)人才需求。特開設(shè)Web數(shù)據(jù)可視化技術(shù)與應(yīng)用課程。課程任務(wù)通過本課程的學(xué)習(xí)，使學(xué)生了解數(shù)據(jù)可視化的概念、方法、工具和流程，能夠熟練使用ECharts進(jìn)行數(shù)據(jù)可視化的圖表制作，能夠?qū)⒗碚撆c實(shí)踐相結(jié)合。能綜合利用ECharts圖表工具、Vue.js、Element-UI、Vue路由、Axios組件等常用的前端工具解決實(shí)際問題，為將來從事數(shù)據(jù)可視化分析與展示奠定堅(jiān)實(shí)基礎(chǔ)。課程學(xué)時分配學(xué)時分配表課程章節(jié)理論學(xué)時實(shí)驗(yàn)學(xué)時第1章認(rèn)識數(shù)據(jù)可視化22第2章ECharts最常用圖表66第3章ECharts官方文檔及常用組件44第4章ECharts其它圖表66第5章ECharts的高級使用44第6章Vue.js項(xiàng)目開發(fā)基礎(chǔ)66第7章項(xiàng)目實(shí)戰(zhàn)：專業(yè)群發(fā)展監(jiān)測平臺44課時匯總3232教學(xué)內(nèi)容及學(xué)時安排1、理論教學(xué)序號章節(jié)名稱主要內(nèi)容教學(xué)目標(biāo)學(xué)時1認(rèn)識數(shù)據(jù)可視化認(rèn)識數(shù)據(jù)可視化。認(rèn)識ECharts。開發(fā)工具。了解數(shù)據(jù)可視化的基本概念。熟悉數(shù)據(jù)可視化的基本流程。了解常用的數(shù)據(jù)可視化工具。了解ECharts發(fā)展歷程和ECharts5.x的特性。掌握開發(fā)工具VSCode的下載和使用。22ECharts最常用圖表快速上手第一個ECharts實(shí)例。繪制各種柱狀圖。繪制各種折線圖。繪制各種餅圖。掌握創(chuàng)建ECharts圖表方法。掌握ECharts中各種柱狀圖繪制方法。掌握ECharts中各種折線圖繪制方法。掌握ECharts中各種餅圖繪制方法。63ECharts官方文檔及常用組件ECharts官方文檔、基礎(chǔ)架構(gòu)及常用術(shù)語。直角坐標(biāo)系下的網(wǎng)格及坐標(biāo)軸。標(biāo)題組件與圖例組件。工具箱組件與詳情提示框組件。標(biāo)記線與標(biāo)記點(diǎn)。掌握ECharts官方文檔的查詢方法。了解ECharts的基礎(chǔ)架構(gòu)及常用術(shù)語。掌握ECharts的直角坐標(biāo)系下的網(wǎng)格及坐標(biāo)軸的使用。掌握ECharts中的標(biāo)題組件與圖例組件的使用。掌握ECharts中的工具箱組件與詳情提示框組件使用。掌握ECharts中的標(biāo)記線與標(biāo)記點(diǎn)的使用。44ECharts的其他圖表繪制散點(diǎn)圖。繪制氣泡圖。繪制儀表盤。繪制漏斗圖。繪制雷達(dá)圖。繪制詞云圖。繪制矩形樹圖。掌握ECharts中散點(diǎn)圖繪制方法。掌握ECharts中氣泡圖繪制方法。掌握ECharts中儀表盤繪制方法。掌握ECharts中漏斗圖（金字塔）的繪制方法。掌握ECharts中雷達(dá)圖繪制方法。掌握ECharts中詞云圖繪制方法。掌握ECharts中矩形樹圖繪制方法。65ECharts的高級功能ECharts圖表混搭及多表聯(lián)動。ECharts主題切換及自定義主題。ECharts中的事件和行為。ECharts中異步數(shù)據(jù)加載和顯示加載動畫。掌握ECharts的圖表混搭及多表聯(lián)動。掌握ECharts主題切換及自定義主題。掌握ECharts中的事件和行為。掌握ECharts中異步數(shù)據(jù)加載和顯示加載動畫。46Vue.js項(xiàng)目開發(fā)基礎(chǔ)Vue下載和引用、創(chuàng)建第一個Vue實(shí)例。Vue常用指令。Vue生命周期。Vue路由的搭建。Axios框架獲取后臺數(shù)據(jù)。Vue的下載和引用、創(chuàng)建第一個Vue實(shí)例。掌握Vue常用指令。了解Vue生命周期。掌握Vue路由的搭建。掌握Axios框架獲取后臺數(shù)據(jù)。67項(xiàng)目實(shí)戰(zhàn)Vue-cli腳手架工具創(chuàng)建Vue項(xiàng)目。項(xiàng)目的設(shè)計(jì)思路。學(xué)校數(shù)據(jù)可視化分析大屏的設(shè)計(jì)與實(shí)現(xiàn)。登錄頁的設(shè)計(jì)與實(shí)現(xiàn)。在學(xué)校大屏中柱狀圖、折線圖、餅圖和雷達(dá)圖的制作。使用Vue-cli腳手架工具創(chuàng)建Vue項(xiàng)目。項(xiàng)目的設(shè)計(jì)思路。學(xué)校數(shù)據(jù)可視化分析大屏的設(shè)計(jì)與實(shí)現(xiàn)。登錄頁的設(shè)計(jì)與實(shí)現(xiàn)。在學(xué)校大屏中柱狀圖、折線圖、餅圖和雷達(dá)圖的制作。42、實(shí)驗(yàn)教學(xué)序號實(shí)驗(yàn)項(xiàng)目名稱實(shí)驗(yàn)要求學(xué)時1搭建ECharts可視化開發(fā)環(huán)境在Windows系統(tǒng)上搭建ECharts的開發(fā)環(huán)境；掌握VSCode軟件的常用插件。22ECharts最常用圖表下載ECharts庫文件。下載并配置VSCode軟件。繪制標(biāo)準(zhǔn)折線圖。繪制堆積面積圖。繪制堆積折線圖。繪制階梯圖。繪制雙折線圖。繪制標(biāo)準(zhǔn)餅圖。繪制圓環(huán)圖。繪制嵌套餅圖。繪制南丁格爾玫瑰圖。63ECharts官方文檔及常用組件44ECharts中的其它圖表繪制1個系列及2個系列的散點(diǎn)圖。繪制散點(diǎn)圖的漣漪特效。繪制氣泡圖實(shí)例：人均壽命與GDP。繪制簡單儀表盤。繪制多儀表盤。繪制漸變色儀表盤。使用visualMap組件。繪制北上廣空氣指標(biāo)。繪制簡單儀表盤。繪制多儀表盤的方法。繪制漸變色儀表盤。使用visualMap組件。繪制北上廣空氣指標(biāo)的實(shí)例。繪制漏斗圖（或金字塔）的方法。繪制多漏斗圖（多金字塔）。繪制雷達(dá)圖。繪制詞云圖。65ECharts的高級功能繪制折柱混搭雙y軸的ECharts圖表。掌握ECharts中的水印文字的設(shè)置。ECharts中的多圖表聯(lián)動的方法。ECharts中動態(tài)切換主題。使用主題在線構(gòu)建工具自定義ECharts主題。掌握ECharts中鼠標(biāo)事件的處理。掌握ECharts組件交互的行為事件的處理。掌握代碼觸發(fā)ECharts中組件的行為的處理。46Vue.js項(xiàng)目開發(fā)基礎(chǔ)在HTML文件中創(chuàng)建第一個Vue案例。輸出data對象的屬性值案例。使用簡單表達(dá)式關(guān)鍵案例。v-text指令與插值表達(dá)式案例。v-text與v-html指令及胡子語法案例。v-if指令案例。v-if&v-else指令案例。v-else-if指令案例。v-if/v-else-if/v-else指令案例。v-show指令案例。v-bind指令案例。v-for指令遍歷數(shù)組案例。v-on指令產(chǎn)生隨機(jī)數(shù)案例。v-on指令綁定方法案例。v-on指令-阻止冒泡案例。v-model指令-綁定單行文本框案例。v-model指令-文本框搜索圖書信息案例。v-model指令-綁定文本域案例。v-model指令-綁定文本域案例。v-model指令-綁定多個復(fù)選框案例。v-model指令-綁定單選下拉列表案例。生命周期函數(shù)案例。vue-router的使用案例。嵌套路由示例案例。query傳參案例。params傳參案例。router.goBack()后退按鈕案例。使用axios檢測用戶是否可用案例。67項(xiàng)目實(shí)戰(zhàn)Vue環(huán)境安裝。利用Element-UI設(shè)計(jì)靜態(tài)登錄頁。使用Axios技術(shù)，完成登錄頁面功能的具體實(shí)現(xiàn)。掌握在學(xué)校大屏中繪制折線圖的方法。掌握在學(xué)校大屏中繪制餅圖的方法。掌握在學(xué)校大屏中繪制雷達(dá)圖的方法。完成在學(xué)校大屏中繪制其它圖表的方法。4考核方式突出學(xué)生解決實(shí)際問題的能力，加強(qiáng)過程性考核。課程考核的成績構(gòu)成=平時作業(yè)（20%）+課堂參與（20%）+期末考核（60%）。期末考核建議采用開卷、機(jī)試形式；試題可包括柱狀圖、折線圖、餅圖、散點(diǎn)圖、氣泡圖、儀表盤、雷達(dá)圖、漏斗圖、詞云圖等圖表，圖表可包含坐標(biāo)軸、網(wǎng)格、標(biāo)題、提示框、圖例、數(shù)據(jù)區(qū)域縮放、值域漫游、工具箱、時間軸等組件模塊；也可根據(jù)需要包括Vue.js相關(guān)v-for、v-on等指令、Axios組件、Vue路由。題型以實(shí)際應(yīng)用場景的操作題為主。教材與參考資料教材范路橋，鄭述招，陳紅玲，等．ECharts數(shù)據(jù)可視化實(shí)戰(zhàn)[M]．西安：西安電子科技大學(xué)出版社．2023．參考資料范路橋，張良均，鄭述招，等[M].Web數(shù)據(jù)可視化(ECharts版).北京：人民郵電出版社，2021.黑馬程序員.Vue.js前端開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2020.師曉利，劉志遠(yuǎn)，杜琰琪.Vue.js前端開發(fā)實(shí)戰(zhàn)[M].北京：人民郵電出版社，2020.王鳳麗，豆連軍.Vue.js前端開發(fā)技術(shù)[M].北京：人民郵電出版社，2