ECharts數(shù)據(jù)可視化 第1章 初識ECharts 教學(xué)設(shè)計(jì)

博學(xué)谷——讓IT教學(xué)更簡單，讓IT學(xué)習(xí)更有效PAGE12PAGE2《ECharts數(shù)據(jù)可視化）》教學(xué)設(shè)計(jì)課程名稱：授課年級：授課學(xué)期：教師姓名：年月課題名稱第1章初識ECharts計(jì)劃課時(shí)4課時(shí)教學(xué)引入隨著移動互聯(lián)網(wǎng)的廣泛應(yīng)用，人們的日常生活中產(chǎn)生了大量的數(shù)據(jù)，這些數(shù)據(jù)中蘊(yùn)藏著許多有價(jià)值的信息。如何將這些數(shù)據(jù)以直觀、形象、交互式的方式展示到網(wǎng)頁中，成了備受關(guān)注的焦點(diǎn)。我們可以借助數(shù)據(jù)可視化工具，實(shí)現(xiàn)這一目標(biāo)。ECharts是Web前端開發(fā)中常用的數(shù)據(jù)可視化工具之一，使用它可以很輕松地將數(shù)據(jù)繪制成圖表。本章將對數(shù)據(jù)可視化、ECharts，以及VisualStudioCode編輯器進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)使學(xué)生了解數(shù)據(jù)可視化的概念，能夠描述數(shù)據(jù)可視化的基本流程和應(yīng)用場景使學(xué)生了解常見的數(shù)據(jù)可視化工具，能夠說出數(shù)據(jù)可視化工具ECharts、D3、Highcharts和AntV的區(qū)別使學(xué)生了解ECharts的基本概念，能夠說出什么是ECharts使學(xué)生熟悉ECharts5的新特性，能夠歸納ECharts5的主要特性使學(xué)生掌握ECharts的獲取方式，能夠獨(dú)立完成ECharts的獲取使學(xué)生掌握VisualStudioCode編輯器的下載和安裝，能夠獨(dú)立安裝VisualStudioCode使學(xué)生掌握中文語言擴(kuò)展的安裝，能夠在VisualStudioCode編輯器中安裝中文語言擴(kuò)展使學(xué)生掌握VisualStudioCode編輯器的使用方法，能夠在項(xiàng)目中創(chuàng)建HTML5文檔教學(xué)重點(diǎn)ECharts獲取方式使用VisualStudioCode編輯器教學(xué)難點(diǎn)無教學(xué)方式課堂教學(xué)以PPT講授為主，并結(jié)合多媒體進(jìn)行教學(xué)教學(xué)過程第一課時(shí)（數(shù)據(jù)可視化概述、數(shù)據(jù)可視化應(yīng)用場景、常見的數(shù)據(jù)可視化工具）一、通過直接引入的方式導(dǎo)入新課“一圖勝千言”這句話準(zhǔn)確地描述了圖表的力量。與文字相比，圖表更加直觀，更容易被理解和記憶。作為一名ECharts的初學(xué)者，在正式學(xué)習(xí)ECharts前，需要先了解數(shù)據(jù)可視化的相關(guān)知識。本節(jié)課將詳細(xì)講解數(shù)據(jù)可視化概述、數(shù)據(jù)可視化應(yīng)用場景、常見的數(shù)據(jù)可視化工具的相關(guān)內(nèi)容。二、新課講解知識點(diǎn)1-數(shù)據(jù)可視化概述教師通過PPT的方式講解數(shù)據(jù)可視化。什么是數(shù)據(jù)可視化。數(shù)據(jù)可視化的基本流程。數(shù)據(jù)集目標(biāo)數(shù)據(jù)預(yù)處理數(shù)據(jù)變換數(shù)據(jù)數(shù)據(jù)展示數(shù)據(jù)可視化工具需要具備的3個(gè)基本特性。實(shí)時(shí)性易操作性展現(xiàn)形式多樣性知識點(diǎn)2-數(shù)據(jù)可視化應(yīng)用場景教師通過PPT的方式講解數(shù)據(jù)可視化的應(yīng)用場景。通用報(bào)表。移動端圖表。大屏可視化。地理可視化。知識點(diǎn)3-常見的數(shù)據(jù)可視化工具教師通過PPT的方式講解常見的數(shù)據(jù)可視化工具。ECharts。D3。Highcharts。AntV。三、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。四、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第二課時(shí)（ECharts基本概念、ECharts5的新特性、ECharts獲取方式）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點(diǎn)進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在講解了數(shù)據(jù)可視化的相關(guān)內(nèi)容后，本節(jié)課將對ECharts基本概念、ECharts5的新特性以及ECharts獲取方式進(jìn)行簡要介紹。三、新課講解知識點(diǎn)1-ECharts基本概念教師通過PPT的方式講解ECharts的基本概念。什么是ECharts。通過一個(gè)由ECharts生成的折線圖認(rèn)識ECharts，并介紹該折線圖中組件的作用。標(biāo)題組件圖例組件工具欄組件提示框組件ECharts的主要特性。多種圖表類型多種數(shù)據(jù)格式支持流數(shù)據(jù)跨平臺支持多種語言支持多種渲染方案支持深度數(shù)據(jù)交互動畫效果無障礙訪問高度自定義知識點(diǎn)2-ECharts5的新特性教師通過PPT的方式講解ECharts5的新特性。動態(tài)敘事。視覺設(shè)計(jì)。交互能力。開發(fā)體驗(yàn)?？稍L問性。知識點(diǎn)3-ECharts獲取方式教師通過PPT結(jié)合實(shí)際操作的方式講解ECharts的獲取方式。從GitHub獲取。從npm獲取。從CDN獲取。通過在線定制的方式獲取。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第三課時(shí)（下載和安裝VisualStudioCode編輯器、安裝中文語言擴(kuò)展、使用VisualStudioCode編輯器）一、復(fù)習(xí)鞏固教師通過上節(jié)課作業(yè)的完成情況，對學(xué)生吸收不好的知識點(diǎn)進(jìn)行再次鞏固講解。二、通過直接引入的方式導(dǎo)入新課在使用ECharts開發(fā)項(xiàng)目之前，需要選擇一款合適的編輯器進(jìn)行代碼編寫和項(xiàng)目文件管理。本課程選擇使用VisualStudioCode編輯器。本節(jié)課將對VisualStudioCode編輯器進(jìn)行講解。三、新課講解知識點(diǎn)1-下載和安裝VisualStudioCode編輯器教師通過PPT結(jié)合實(shí)際操作的方式講解VisualStudioCode編輯器的下載和安裝。VisualStudioCode編輯器是什么。VisualStudioCode編輯器的特點(diǎn)。下載和安裝VisualStudioCode編輯器。知識點(diǎn)2-安裝中文語言擴(kuò)展教師通過PPT結(jié)合實(shí)際操作的方式講解中文語言擴(kuò)展的安裝。為什么要安裝中文語言擴(kuò)展。講解如何在VisualStudioCode編輯器中安裝中文語言擴(kuò)展。知識點(diǎn)3-使用VisualStudioCode編輯器教師通過PPT結(jié)合實(shí)際操作的方式講解VisualStudioCode編輯器的使用。講解如何創(chuàng)建一個(gè)項(xiàng)目文件夾。講解如何使用VisualStudioCode編輯器打開文件夾。講解如何在項(xiàng)目中創(chuàng)建一個(gè)HTML5文檔。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導(dǎo)學(xué)生解答問題并給予指導(dǎo)。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預(yù)習(xí)作業(yè)。第四課時(shí)（上機(jī)練習(xí)）上機(jī)練習(xí)主要針對本章中需要重點(diǎn)掌握的知識點(diǎn)，以及在程序中容易出錯(cuò)的內(nèi)容進(jìn)行練習(xí)，通過上機(jī)練習(xí)可以考察同學(xué)對知識點(diǎn)的掌握情況，對代碼的熟練程度。上機(jī)：（考察知識點(diǎn)為：ECharts獲取方式、下載和安裝VisualStudioCode編輯器、安裝中文語言擴(kuò)展、使用VisualStudioCode編輯器）形式：單獨(dú)完成題目：完成ECharts的獲取以及V