ECharts數(shù)據(jù)可視化 教案 第1-3章 初識ECharts 教學設計-柱狀圖和散點圖 教學設計

博學谷——讓IT教學更簡單，讓IT學習更有效PAGE12PAGE2《ECharts數(shù)據(jù)可視化）》教學設計課程名稱：授課年級：授課學期：教師姓名：年月課題名稱第1章初識ECharts計劃課時4課時教學引入隨著移動互聯(lián)網(wǎng)的廣泛應用，人們的日常生活中產生了大量的數(shù)據(jù)，這些數(shù)據(jù)中蘊藏著許多有價值的信息。如何將這些數(shù)據(jù)以直觀、形象、交互式的方式展示到網(wǎng)頁中，成了備受關注的焦點。我們可以借助數(shù)據(jù)可視化工具，實現(xiàn)這一目標。ECharts是Web前端開發(fā)中常用的數(shù)據(jù)可視化工具之一，使用它可以很輕松地將數(shù)據(jù)繪制成圖表。本章將對數(shù)據(jù)可視化、ECharts，以及VisualStudioCode編輯器進行詳細講解。教學目標使學生了解數(shù)據(jù)可視化的概念，能夠描述數(shù)據(jù)可視化的基本流程和應用場景使學生了解常見的數(shù)據(jù)可視化工具，能夠說出數(shù)據(jù)可視化工具ECharts、D3、Highcharts和AntV的區(qū)別使學生了解ECharts的基本概念，能夠說出什么是ECharts使學生熟悉ECharts5的新特性，能夠歸納ECharts5的主要特性使學生掌握ECharts的獲取方式，能夠獨立完成ECharts的獲取使學生掌握VisualStudioCode編輯器的下載和安裝，能夠獨立安裝VisualStudioCode使學生掌握中文語言擴展的安裝，能夠在VisualStudioCode編輯器中安裝中文語言擴展使學生掌握VisualStudioCode編輯器的使用方法，能夠在項目中創(chuàng)建HTML5文檔教學重點ECharts獲取方式使用VisualStudioCode編輯器教學難點無教學方式課堂教學以PPT講授為主，并結合多媒體進行教學教學過程第一課時（數(shù)據(jù)可視化概述、數(shù)據(jù)可視化應用場景、常見的數(shù)據(jù)可視化工具）一、通過直接引入的方式導入新課“一圖勝千言”這句話準確地描述了圖表的力量。與文字相比，圖表更加直觀，更容易被理解和記憶。作為一名ECharts的初學者，在正式學習ECharts前，需要先了解數(shù)據(jù)可視化的相關知識。本節(jié)課將詳細講解數(shù)據(jù)可視化概述、數(shù)據(jù)可視化應用場景、常見的數(shù)據(jù)可視化工具的相關內容。二、新課講解知識點1-數(shù)據(jù)可視化概述教師通過PPT的方式講解數(shù)據(jù)可視化。什么是數(shù)據(jù)可視化。數(shù)據(jù)可視化的基本流程。數(shù)據(jù)集目標數(shù)據(jù)預處理數(shù)據(jù)變換數(shù)據(jù)數(shù)據(jù)展示數(shù)據(jù)可視化工具需要具備的3個基本特性。實時性易操作性展現(xiàn)形式多樣性知識點2-數(shù)據(jù)可視化應用場景教師通過PPT的方式講解數(shù)據(jù)可視化的應用場景。通用報表。移動端圖表。大屏可視化。地理可視化。知識點3-常見的數(shù)據(jù)可視化工具教師通過PPT的方式講解常見的數(shù)據(jù)可視化工具。ECharts。D3。Highcharts。AntV。三、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。四、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第二課時（ECharts基本概念、ECharts5的新特性、ECharts獲取方式）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課在講解了數(shù)據(jù)可視化的相關內容后，本節(jié)課將對ECharts基本概念、ECharts5的新特性以及ECharts獲取方式進行簡要介紹。三、新課講解知識點1-ECharts基本概念教師通過PPT的方式講解ECharts的基本概念。什么是ECharts。通過一個由ECharts生成的折線圖認識ECharts，并介紹該折線圖中組件的作用。標題組件圖例組件工具欄組件提示框組件ECharts的主要特性。多種圖表類型多種數(shù)據(jù)格式支持流數(shù)據(jù)跨平臺支持多種語言支持多種渲染方案支持深度數(shù)據(jù)交互動畫效果無障礙訪問高度自定義知識點2-ECharts5的新特性教師通過PPT的方式講解ECharts5的新特性。動態(tài)敘事。視覺設計。交互能力。開發(fā)體驗?？稍L問性。知識點3-ECharts獲取方式教師通過PPT結合實際操作的方式講解ECharts的獲取方式。從GitHub獲取。從npm獲取。從CDN獲取。通過在線定制的方式獲取。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第三課時（下載和安裝VisualStudioCode編輯器、安裝中文語言擴展、使用VisualStudioCode編輯器）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過直接引入的方式導入新課在使用ECharts開發(fā)項目之前，需要選擇一款合適的編輯器進行代碼編寫和項目文件管理。本課程選擇使用VisualStudioCode編輯器。本節(jié)課將對VisualStudioCode編輯器進行講解。三、新課講解知識點1-下載和安裝VisualStudioCode編輯器教師通過PPT結合實際操作的方式講解VisualStudioCode編輯器的下載和安裝。VisualStudioCode編輯器是什么。VisualStudioCode編輯器的特點。下載和安裝VisualStudioCode編輯器。知識點2-安裝中文語言擴展教師通過PPT結合實際操作的方式講解中文語言擴展的安裝。為什么要安裝中文語言擴展。講解如何在VisualStudioCode編輯器中安裝中文語言擴展。知識點3-使用VisualStudioCode編輯器教師通過PPT結合實際操作的方式講解VisualStudioCode編輯器的使用。講解如何創(chuàng)建一個項目文件夾。講解如何使用VisualStudioCode編輯器打開文件夾。講解如何在項目中創(chuàng)建一個HTML5文檔。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第四課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為：ECharts獲取方式、下載和安裝VisualStudioCode編輯器、安裝中文語言擴展、使用VisualStudioCode編輯器）形式：單獨完成題目：完成ECharts的獲取以及VisualStudioCode編輯器的下載和安裝。具體要求：完成ECharts的獲取。完成VisualStudioCode編輯器的下載和安裝，并安裝中文語言擴展。使用VisualStudioCode編輯器創(chuàng)建項目文件夾，然后打開文件夾，并在項目中創(chuàng)建一個HTML5文檔。教學后記《ECharts數(shù)據(jù)可視化》教學設計課程名稱：授課年級：授課學期：教師姓名：年月課題名稱第2章折線圖和餅圖計劃課時11課時教學引入在日常生活中，我們經(jīng)常使用圖表來整理和分析數(shù)據(jù)，以便得出更好的結論。在眾多圖表類型中，折線圖和餅圖相對比較簡單，更適合ECharts初學者學習。因此，本書將以折線圖和餅圖作為切入點，幫助讀者打好基礎，為后續(xù)學習其他圖表提供支撐。本章將針對如何使用ECharts繪制折線圖和餅圖進行詳細講解。教學目標使學生熟悉引入并配置ECharts的方法，能夠歸納引入并配置ECharts的步驟使學生掌握坐標軸組件的使用方法，能夠設置圖表的x軸、y軸使學生掌握系列組件、標題組件、圖例組件的使用方法，能夠設置圖表的系列、標題、圖例使學生掌握數(shù)據(jù)堆疊的使用方法，能夠設置數(shù)據(jù)堆疊使學生掌握折線圖文本標簽的使用方法，能夠設置文本標簽的顯示狀態(tài)、位置等使學生掌握區(qū)域填充樣式的設置方法，能夠設置區(qū)域填充樣式使學生掌握網(wǎng)格組件、提示框組件、工具欄組件的使用方法，能夠設置圖表的網(wǎng)格、提示框、工具欄使學生掌握數(shù)據(jù)集組件的使用方法，能夠使用數(shù)據(jù)集定義數(shù)據(jù)使學生掌握平滑曲線圖的設置方法，能夠將圖表設置為平滑曲線圖使學生掌握餅圖半徑的使用方法，能夠設置餅圖的半徑使學生掌握餅圖文本標簽的使用方法，能夠設置文本標簽的顯示狀態(tài)、位置等使學生掌握南丁格爾圖的設置方法，能夠將圖表設置為南丁格爾圖使學生掌握折線圖的繪制，能夠完成基礎折線圖、堆疊折線圖、區(qū)域面積圖、堆疊面積折線圖、階梯折線圖和平滑曲線圖等的繪制使學生掌握餅圖的繪制，能夠完成基礎餅圖和南丁格爾圖的繪制教學重點坐標軸組件系列組件標題組件圖例組件折線圖的文本標簽網(wǎng)格組件提示框組件工具欄組件數(shù)據(jù)集組件餅圖的文本標簽教學難點坐標軸組件系列組件數(shù)據(jù)集組件教學方式課堂教學以PPT講授為主，并結合多媒體進行教學教學過程第一課時（引入并配置ECharts、坐標軸組件、系列組件、標題組件、任務2.1.1繪制基礎折線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課最近，某互聯(lián)網(wǎng)公司出現(xiàn)了利潤下降的情況。為了找出原因，該公司的領導決定使用用戶瀏覽量這一指標進行調查，并據(jù)此制定相關決策。會議結束后，運營總監(jiān)整理了最近一周內的用戶瀏覽量報表。他希望繪制一個基礎折線圖來更好地展示最近一周內的用戶瀏覽量的變化情況。本節(jié)課將學習引入并配置ECharts、坐標軸組件、系列組件和標題組件，并基于最近一周內用戶瀏覽量繪制基礎折線圖。三、新課講解知識點1-引入并配置ECharts教師通過PPT結合實際操作的方式講解引入并配置ECharts。通過代碼演示在HTML中引入ECharts。init()方法的使用。setOption()方法的使用。通過代碼演示如何在項目中引入并配置ECharts。知識點2-坐標軸組件教師通過PPT的方式講解坐標軸組件。坐標軸組件的組成部分。xAxis。yAxis。坐標軸組件的效果。xAxis、yAxis的設置方式。列舉xAxis、yAxis對象的常用屬性。知識點3-系列組件教師通過PPT的方式講解系列組件。系列組件的作用。基礎折線圖中系列組件的效果。系列組件的設置方式。列舉系列的常用屬性。知識點4-標題組件教師通過PPT結合實際操作的方式講解標題組件。標題組件的作用?；A折線圖中標題組件的效果。標題組件的設置方式。列舉title對象的常用屬性。通過代碼演示如何設置標題。知識點5-任務2.1.1繪制基礎折線圖教師通過PPT結合實際操作的方式講解任務2.1.1繪制基礎折線圖。四、歸納總結教師回顧本節(jié)課所講的內容，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第二課時（初識堆疊折線圖、圖例組件、數(shù)據(jù)堆疊、折線圖的文本標簽、任務2.1.2繪制堆疊折線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課某校始終積極貫徹落實各項規(guī)章制度，定期開展每月考核，切實提高學校課堂教學質量，構建良好教育生態(tài)。為了更好地開展工作，各年級班主任需要定期統(tǒng)計學生各科學習成績，并取均值。班主任余老師希望繪制一張堆疊折線圖來更好地展示本班部分學科學習成績的變化趨勢，從而幫助學生、家長和老師及時發(fā)現(xiàn)問題并進行查漏補缺，進而提高學生的學習成績。本節(jié)課將學習初識堆疊折線圖、圖例組件、數(shù)據(jù)堆疊、折線圖的文本標簽，并基于初三某班部分學科學習成績繪制堆疊折線圖。三、新課講解知識點1-初識堆疊折線圖教師通過PPT的方式講解初識堆疊折線圖。什么是堆疊折線圖。基礎折線圖和堆疊折線圖的效果對比。知識點2-圖例組件教師通過PPT結合實際操作的方式講解圖例組件。圖例組件的作用。堆疊折線圖中圖例組件的效果。圖例組件的設置方式。列舉legend對象的常用屬性。通過代碼演示如何設置圖例組件距離容器左側距離。通過代碼演示如何設置圖例。知識點3-數(shù)據(jù)堆疊教師通過PPT結合實際操作的方式講解數(shù)據(jù)堆疊。什么是數(shù)據(jù)堆疊。常見的可以進行數(shù)據(jù)堆疊的圖表。數(shù)據(jù)堆疊的設置方式。知識點4-折線圖的文本標簽教師通過PPT結合實際操作的方式講解折線圖的文本標簽。折線圖文本標簽的設置方式。列舉折線圖中l(wèi)abel對象的常用屬性。通過代碼演示如何設置折線圖的文本標簽。知識點5-任務2.1.2繪制堆疊折線圖教師通過PPT結合實際操作的方式講解任務2.1.2繪制堆疊折線圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第三課時（初識區(qū)域面積圖、區(qū)域填充樣式、網(wǎng)格組件、任務2.1.3繪制區(qū)域面積圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課自媒體的興起為人們提供了多元化的信息來源，豐富了我們的生活和工作。通過自媒體，我們可以記錄美好生活，分享風土人情。小王是一名美食博主，他主要通過拍攝充滿生活氣息的內容并通過幽默詼諧的講述方式來吸引觀眾，讓他們了解不同地區(qū)的美食。經(jīng)過多年的努力，他的賬號已經(jīng)擁有了5萬多個粉絲。本節(jié)課將學習初識區(qū)域面積圖、區(qū)域填充樣式和網(wǎng)格組件，并基于小王運營賬號近幾年的粉絲數(shù)量繪制區(qū)域面積圖。三、新課講解知識點1-初識區(qū)域面積圖教師通過PPT的方式講解初識區(qū)域面積圖。什么是區(qū)域面積圖。區(qū)域面積圖的效果。知識點2-區(qū)域填充樣式教師通過PPT結合實際操作的方式講解區(qū)域填充樣式。區(qū)域填充樣式的設置方式。列舉areaStyle對象的常用屬性。通過代碼演示如何設置折線圖區(qū)域填充樣式。知識點3-網(wǎng)格組件教師通過PPT結合實際操作的方式講解網(wǎng)格組件。網(wǎng)格組件的作用。區(qū)域面積圖中網(wǎng)格組件的效果。網(wǎng)格組件的設置方式。列舉grid對象的常用屬性。通過代碼演示如何設置網(wǎng)格。知識點4-任務2.1.3繪制區(qū)域面積圖教師通過PPT結合實際操作的方式講解任務2.1.3繪制區(qū)域面積圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第四課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為：任務2.1.1繪制基礎折線圖、任務2.1.2繪制堆疊折線圖、任務2.1.3繪制區(qū)域面積圖）形式：單獨完成具體要求：按照任務需求實現(xiàn)指定的任務。第五課時（初識堆疊面積折線圖、提示框組件、任務2.1.4繪制堆疊面積折線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課如今，月餅與各地的飲食習俗相融合，發(fā)展出了廣式、京式、蘇式等各種口味的月餅。姚經(jīng)理希望繪制一張堆疊面積折線圖來更好地展示各個季度不同口味月餅的銷售趨勢，從而制定更好的銷售措施，提升月餅的銷量。本節(jié)課將學習初識堆疊面積折線圖、提示框組件，并基于各個季度不同口味月餅的銷售繪制堆疊面積折線圖。三、新課講解知識點1-初識堆疊面積折線圖教師通過PPT的方式講解初識堆疊面積折線圖。什么是堆疊面積折線圖。堆疊面積折線圖的效果。知識點2-提示框組件教師通過PPT結合實際操作的方式講解提示框組件。提示框組件的作用。堆疊面積折線圖中提示框組件的效果。提示框組件的設置方式。列舉tooltip對象的常用屬性。通過代碼演示如何設置提示框。知識點3-任務2.1.4繪制堆疊面積折線圖教師通過PPT結合實際操作的方式講解任務2.1.4繪制堆疊面積折線圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第六課時（初識階梯折線圖、工具欄組件、任務2.1.5繪制階梯折線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課自全面建成小康社會以來，我國人民生活水平普遍提高，大眾對于美好生活的追求已由物質需求轉變?yōu)榫裥枨?。故每逢?jié)假日，各地知名旅游景點都人山人海，熱鬧非凡。對此，各地政府會據(jù)實際情況做出相關安排，保障游客的安全，維護游客的合法權益。景點負責人希望繪制一張階梯折線圖展示某景點一年來門票價格的變化情況，從而更好地分析門票銷售情況，并制定相應的營銷策略。本節(jié)課將學習初識階梯折線圖、工具欄組件，并基于門票價格繪制階梯折線圖。三、新課講解知識點1-初識階梯折線圖教師通過PPT結合實際操作的方式講解初識階梯折線圖。什么是階梯折線圖。階梯折線圖的效果。階梯折線圖的設置方式。通過代碼演示如何設置階梯折線圖。知識點2-工具欄組件教師通過PPT的方式講解工具欄組件。工具欄組件的作用。階梯折線圖中工具欄組件的效果。工具欄組件的設置方式。列舉toolbox對象的常用屬性。知識點3-任務2.1.5繪制階梯折線圖教師通過PPT結合實際操作的方式講解任務2.1.5繪制階梯折線圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第七課時（初識平滑曲線圖、數(shù)據(jù)集組件、平滑曲線的設置、任務2.1.6繪制平滑曲線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課妙妙是快遞站的老板，她希望繪制一張平滑曲線圖來更好地展示一周之內快遞的發(fā)貨數(shù)量，并通過該圖表展示快遞發(fā)貨數(shù)量的變化趨勢，幫助妙妙更好地了解快遞站的發(fā)貨情況，從而更好地管理快遞站的日常工作。本節(jié)課將學習初識平滑曲線圖、數(shù)據(jù)集組件、平滑曲線的設置，并基于一周之內快遞發(fā)貨數(shù)量繪制平滑曲線圖。三、新課講解知識點1-初識平滑曲線圖教師通過PPT的方式講解初識平滑曲線圖。什么是平滑曲線圖。平滑曲線圖的效果。知識點2-數(shù)據(jù)集組件教師通過PPT的方式講解數(shù)據(jù)集組件。數(shù)據(jù)集組件的作用。數(shù)據(jù)設置在數(shù)據(jù)集組件中的優(yōu)勢。數(shù)據(jù)集組件的設置方式。dataset對象的常用屬性為source屬性的使用。知識點3-平滑曲線的設置教師通過PPT的方式講解平滑曲線的設置。平滑曲線的設置方式。smooth屬性的作用。smooth屬性值類型。smooth屬性為布爾值類型的數(shù)據(jù)。smooth屬性為數(shù)字類型的數(shù)據(jù)。知識點4-任務2.1.6繪制平滑曲線圖教師通過PPT結合實際操作的方式講解任務2.1.6繪制平滑曲線圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第八課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為：任務2.1.4繪制堆疊面積折線圖、任務2.1.5繪制階梯折線圖、任務2.1.6繪制平滑曲線圖）形式：單獨完成具體要求：按照任務需求實現(xiàn)指定的任務。第九課時（初識基礎餅圖、餅圖的半徑、餅圖的文本標簽、任務2.2.1繪制基礎餅圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課小劉是一個經(jīng)營了多家水果店的老板，他深知成功離不開“順勢而為”。近年來，他經(jīng)常在季節(jié)交替時分析店鋪內水果的銷售情況，準確了解消費者的偏好，并進一步優(yōu)化熱門商品的供應和銷售策略，以占據(jù)更大的市場份額。小劉希望繪制一張基礎餅圖來更好地展示店鋪中夏季部分水果的銷量占比情況。本節(jié)課將學習初識基礎餅圖、餅圖的半徑、餅圖的文本標簽，并基于某店鋪夏季部分水果的銷量繪制基礎餅圖。三、新課講解知識點1-初識基礎餅圖教師通過PPT的方式講解初識基礎餅圖。什么是基礎餅圖?；A餅圖的設置方式?；A餅圖的效果。知識點2-餅圖的半徑教師通過PPT的方式講解餅圖的半徑。餅圖的半徑的設置方式。通過代碼演示如何設置餅圖的半徑。radius屬性值類型。數(shù)字百分比字符串數(shù)組知識點3-餅圖的文本標簽教師通過PPT的方式講解餅圖的文本標簽。餅圖文本標簽的設置方式。列舉餅圖中l(wèi)abel對象的常用屬性。知識點4-任務2.2.1繪制基礎餅圖教師通過PPT結合實際操作的方式講解任務2.2.1繪制基礎餅圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第十課時（初識南丁格爾圖、南丁格爾圖的設置、任務2.2.2繪制南丁格爾圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課自我國實行“雙減”政策以來，學生有了更多的空余時間追求自己的興趣愛好，更有利于成為德、智、體、美、勞全面發(fā)展的新時代青年。陸老師希望繪制一張南丁格爾圖來了解學生們的興趣愛好占比情況，進而為學生們制定更合適的課外活動和興趣培養(yǎng)方案，幫助學生們獲得更好的發(fā)展。本節(jié)課將學習初識南丁格爾圖、南丁格爾圖的設置，并基于校內部分學生的興趣愛好繪制南丁格爾圖。三、新課講解知識點1-初識南丁格爾圖教師通過PPT結合實際操作的方式講解初識南丁格爾圖。什么是南丁格爾圖。南丁格爾圖的效果。知識點2-南丁格爾圖的設置教師通過PPT的方式講解南丁格爾圖的設置。南丁格爾圖的設置方式。roseType屬性值類型。布爾值。字符串。知識點3-任務2.2.2繪制南丁格爾圖教師通過PPT結合實際操作的方式講解任務2.2.2繪制南丁格爾圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第十一課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為：任務2.2.1繪制基礎餅圖、任務2.2.2繪制南丁格爾圖）形式：單獨完成具體要求：按照任務需求實現(xiàn)指定的任務。教學后記《ECharts數(shù)據(jù)可視化》教學設計課程名稱：授課年級：授課學期：教師姓名：年月課題名稱第3章柱狀圖和散點圖計劃課時9課時教學引入通過對第2章的學習，大家應該已經(jīng)掌握了繪制常見折線圖和餅圖的方法，以及ECharts中常用組件的基本使用。通過配置項的設置，可以實現(xiàn)所需折線圖和餅圖的效果。接下來，本章將講解如何繪制常見的柱狀圖和散點圖。教學目標使學生掌握柱條背景樣式的設置方法，能夠設置柱條的背景色、背景描邊色、背景描邊類型等使學生掌握柱狀圖標線的使用方法，能夠設置最大值標線、最小值標線、平均值標線等使學生熟悉柱條寬度和間距的設置方法，能夠總結柱條寬度、最大寬度、最小寬度、間距的用法使學生掌握圖形和標簽高亮樣式的設置方法，能夠設置圖形和標簽高亮樣式使學生掌握柱條樣式的設置方法，能夠設置柱條的顏色、描邊線寬、描邊色、陰影、不透明度等使學生掌握柱狀圖文本標簽的使用方法，能夠設置文本標簽的顯示狀態(tài)、位置等使學生掌握柱狀圖標注樣式的使用方法，能夠設置標注信息使學生掌握坐標軸組件中分隔線的使用方法，能夠設置x軸、y軸的分隔線使學生掌握坐標軸組件中不顯示零刻度的設置，能夠實現(xiàn)x軸、y軸上零刻度的顯示與隱藏使學生掌握漣漪動畫的相關配置，能夠設置漣漪動畫的大小、顏色、周期等使學生掌握漣漪動畫顯示時機的設置，能夠控制漣漪動畫何時開始顯示使學生掌握常見柱狀圖的繪制，能夠完成基礎柱狀圖、堆疊柱狀圖、階梯瀑布圖和堆疊條形圖的繪制使學生掌握常見散點圖的繪制，能夠完成基礎散點圖、帶有漣漪動畫的散點圖、氣泡圖的繪制教學重點柱條的背景樣式柱狀圖的標線圖形和標簽高亮樣式柱條的樣式柱狀圖的文本標簽柱狀圖的標注樣式漣漪動畫的相關配置教學難點柱狀圖的標線柱狀圖的文本標簽教學方式課堂教學以PPT講授為主，并結合多媒體進行教學教學過程第一課時（初識基礎柱狀圖、柱條的背景樣式、任務3.1.1繪制基礎柱狀圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課小蔡是一家小超市的老板，售賣多種商品。他想以柱狀圖的形式查看某款洗發(fā)水在過去一年中每個月的銷售情況，根據(jù)銷量來決定以后的進貨量，以便更好地管理庫存。為此，他翻看了該款商品過去一年的銷售數(shù)據(jù)，并將這些數(shù)據(jù)匯總在月銷售情況報表中。本節(jié)課將學習初識基礎柱狀圖和柱條的背景樣式，并基于某款洗發(fā)水一年的銷售情況繪制基礎柱狀圖。三、新課講解知識點1-初識基礎柱狀圖教師通過PPT結合實際操作的方式講解基礎柱狀圖。什么是基礎柱狀圖?；A柱狀圖的兩種表現(xiàn)方式?？v向基礎柱狀圖橫向基礎柱狀圖基礎柱狀圖的圖表類型的設置方式。知識點2-柱條的背景樣式教師通過PPT結合實際操作的方式講解柱條的背景樣式。柱條背景樣式的設置方式。列舉backgroundStyle對象的常用屬性。通過代碼演示如何設置柱條的背景樣式。知識點3-任務3.1.1繪制基礎柱狀圖教師通過PPT結合實際操作的方式講解任務3.1.1繪制基礎柱狀圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第二課時（初識堆疊柱狀圖、柱狀圖的標線、柱條的寬度、柱條的間距、圖形和標簽高亮樣式、任務3.1.2繪制堆疊柱狀圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課小明是互聯(lián)網(wǎng)公司的運營總監(jiān)，負責收集并統(tǒng)計某網(wǎng)站的訪問量，他想以堆疊柱狀圖的形式查看該網(wǎng)站在直接訪問、廣告和搜索引擎這3種渠道下的訪問量，以便制定后續(xù)的運營方案。因此，他整理了最近一周網(wǎng)站在這3種渠道下的訪問量數(shù)據(jù)。本節(jié)課將學習初識堆疊柱狀圖、柱狀圖的標線、柱條的寬度、柱條的間距、圖形和標簽高亮樣式，并基于近一周的網(wǎng)站訪問量繪制堆疊柱狀圖。三、新課講解知識點1-初識堆疊柱狀圖教師通過PPT的方式講解堆疊柱狀圖。什么是堆疊柱狀圖。演示堆疊柱狀圖效果。知識點2-柱狀圖的標線教師通過PPT結合實際操作的方式講解柱狀圖的標線。演示柱狀圖中最大值標線、平均值標線、最小值標線效果。柱狀圖標線的設置方式。列舉markLine對象的常用屬性。知識點3-柱條的寬度教師通過PPT結合實際操作的方式講解柱條的寬度。柱條寬度的設置方式。barWidth屬性的取值。數(shù)字字符串通過代碼演示如何使用barWidth屬性設置柱條的寬度。barMaxWidth屬性和barMinWidth屬性的使用。知識點4-柱條的間距教師通過PPT結合實際操作的方式講解柱條的間距。柱條間距的設置方式。barGap屬性和barCategoryGap屬性的使用。通過代碼演示如何設置柱條的間距。知識點5-圖形和標簽高亮樣式教師通過PPT結合實際操作的方式講解圖形和標簽高亮樣式。圖形和標簽高亮的場景。圖形和標簽高亮的設置方式。列舉emphasis對象的常用屬性。知識點6-任務3.1.2繪制堆疊柱狀圖教師通過PPT結合實際操作的方式講解任務3.1.2繪制堆疊柱狀圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第三課時（初識階梯瀑布圖、柱條的樣式、柱狀圖的文本標簽、任務3.1.3繪制階梯瀑布圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課勤儉節(jié)約是一種值得每個人都踐行的美德。在日常生活中，勤儉節(jié)約精神不僅能夠幫助我們實現(xiàn)個人的財務穩(wěn)定，還能夠推動整個社會的可持續(xù)發(fā)展。小浩為了評估自己的每月支出是否合理，他整理了上個月必須支出的基本開銷，作為分析的示例。小浩希望通過階梯瀑布圖的形式呈現(xiàn)上個月基本開銷的具體情況，以更加直觀和清晰地顯示數(shù)據(jù)。本節(jié)課將學習初識階梯瀑布圖、柱條的樣式和柱狀圖的文本標簽，并基于上個月基本開銷繪制階梯瀑布圖。三、新課講解知識點1-初識階梯瀑布圖教師通過PPT的方式講解階梯瀑布圖。什么是階梯瀑布圖。演示階梯瀑布圖效果。知識點2-柱條的樣式教師通過PPT結合實際操作的方式講解柱條的樣式。柱條樣式的設置方式。列舉itemStyle對象的常用屬性。通過代碼演示如何設置柱條的樣式。知識點3-柱狀圖的文本標簽教師通過PPT結合實際操作的方式講解柱狀圖的文本標簽。柱狀圖文本標簽的設置方式。列舉柱狀圖中l(wèi)abel對象的常用屬性。知識點4-任務3.1.3繪制階梯瀑布圖教師通過PPT結合實際操作的方式講解任務3.1.3繪制階梯瀑布圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第四課時（初識堆疊條形圖、柱狀圖的標注樣式、任務3.1.4繪制堆疊條形圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課從1月份開始，某化妝品公司在六大商場鋪設了6款熱銷產品的專柜，并加大了優(yōu)惠促銷的力度?；顒咏Y束后，由專員統(tǒng)計了6款產品在各大商場的銷量，并將不同產品在不同商場的銷量情況整理成表格。為了更好地呈現(xiàn)數(shù)據(jù)，公司想以堆疊條形圖的形式展示不同產品在不同商場的銷量。本節(jié)課將學習初識堆疊條形圖和柱狀圖的標注樣式，并基于不同產品在不同商場的銷量繪制堆疊條形圖。三、新課講解知識點1-初識堆疊條形圖教師通過PPT的方式講解堆疊條形圖。什么是堆疊條形圖。演示堆疊條形圖效果。知識點2-柱狀圖的標注樣式教師通過PPT結合實際操作的方式講解柱狀圖的標注樣式。柱狀圖標注樣式的設置方式。列舉柱狀圖中markPoint對象的常用屬性。知識點3-任務3.1.4繪制堆疊條形圖教師通過PPT結合實際操作的方式講解任務3.1.4繪制堆疊條形圖。四、歸納總結教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第五課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為：任務3.1.1繪制基礎柱狀圖、任務3.1.2繪制堆疊柱狀圖、任務3.1.3繪制階梯瀑布圖、任務3.1.4繪制堆疊條形圖）形式：單獨完成具體要求：按照任務需求實現(xiàn)指定的任務。第六課時（初識基礎散點圖、坐標軸組件的分隔線、坐標軸組件不顯示零刻度、任務3.2.1繪制基礎散點圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課健身對我們的身體健康非常重要。為了更好地制訂合適的健身計劃，某健身房進行了一項調查活動，該調查活動需要收集、分析顧客的身高和體重數(shù)據(jù)，以了解他們的身體健康狀況和相關信息。將數(shù)據(jù)收集完成后，為了更加直觀地呈現(xiàn)數(shù)據(jù)，健身房想要以基礎散點圖的形式展示身高和體重數(shù)據(jù)。本節(jié)課將學習初識基礎散點圖、坐標軸組件的分隔線和坐標軸組件不顯示零刻度，并基于身高和體重數(shù)據(jù)繪制基礎散點圖。三、新課講解知識點1-初識基礎散點圖教師通過PPT結合實際操作的方式講解基礎散點圖。什么是基礎散點圖。演示基礎散點圖的效果。相關性強度示意圖數(shù)據(jù)的相關關系在散點圖上的大致分布圖基礎散點圖的圖表類型的設置方式。知識點2-坐標軸組件的分隔線教師通過PPT結合實際操作的方式講解坐標軸組件的分隔線。坐標軸組件分隔線的設置方式。列舉坐標軸組件中splitLine對象的常用屬性。知識點3-坐標軸組件不顯示零刻度教師通過PPT結合實際操作的方式講解坐標軸組件不顯示零刻度。知識