ECharts數(shù)據(jù)可視化 第2章 折線圖和餅圖 教學設計

第1章PHP開篇PAGE16《ECharts數(shù)據(jù)可視化》教學設計課程名稱：授課年級：授課學期：教師姓名：年月課題名稱第2章折線圖和餅圖計劃課時11課時教學引入在日常生活中，我們經(jīng)常使用圖表來整理和分析數(shù)據(jù)，以便得出更好的結(jié)論。在眾多圖表類型中，折線圖和餅圖相對比較簡單，更適合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ù)使學生掌握平滑曲線圖的設置方法，能夠?qū)D表設置為平滑曲線圖使學生掌握餅圖半徑的使用方法，能夠設置餅圖的半徑使學生掌握餅圖文本標簽的使用方法，能夠設置文本標簽的顯示狀態(tài)、位置等使學生掌握南丁格爾圖的設置方法，能夠?qū)D表設置為南丁格爾圖使學生掌握折線圖的繪制，能夠完成基礎折線圖、堆疊折線圖、區(qū)域面積圖、堆疊面積折線圖、階梯折線圖和平滑曲線圖等的繪制使學生掌握餅圖的繪制，能夠完成基礎餅圖和南丁格爾圖的繪制教學重點坐標軸組件系列組件標題組件圖例組件折線圖的文本標簽網(wǎng)格組件提示框組件工具欄組件數(shù)據(jù)集組件餅圖的文本標簽教學難點坐標軸組件系列組件數(shù)據(jù)集組件教學方式課堂教學以PPT講授為主，并結(jié)合多媒體進行教學教學過程第一課時（引入并配置ECharts、坐標軸組件、系列組件、標題組件、任務2.1.1繪制基礎折線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課最近，某互聯(lián)網(wǎng)公司出現(xiàn)了利潤下降的情況。為了找出原因，該公司的領導決定使用用戶瀏覽量這一指標進行調(diào)查，并據(jù)此制定相關決策。會議結(jié)束后，運營總監(jiān)整理了最近一周內(nèi)的用戶瀏覽量報表。他希望繪制一個基礎折線圖來更好地展示最近一周內(nèi)的用戶瀏覽量的變化情況。本節(jié)課將學習引入并配置ECharts、坐標軸組件、系列組件和標題組件，并基于最近一周內(nèi)用戶瀏覽量繪制基礎折線圖。三、新課講解知識點1-引入并配置ECharts教師通過PPT結(jié)合實際操作的方式講解引入并配置ECharts。通過代碼演示在HTML中引入ECharts。init()方法的使用。setOption()方法的使用。通過代碼演示如何在項目中引入并配置ECharts。知識點2-坐標軸組件教師通過PPT的方式講解坐標軸組件。坐標軸組件的組成部分。xAxis。yAxis。坐標軸組件的效果。xAxis、yAxis的設置方式。列舉xAxis、yAxis對象的常用屬性。知識點3-系列組件教師通過PPT的方式講解系列組件。系列組件的作用?；A折線圖中系列組件的效果。系列組件的設置方式。列舉系列的常用屬性。知識點4-標題組件教師通過PPT結(jié)合實際操作的方式講解標題組件。標題組件的作用?；A折線圖中標題組件的效果。標題組件的設置方式。列舉title對象的常用屬性。通過代碼演示如何設置標題。知識點5-任務2.1.1繪制基礎折線圖教師通過PPT結(jié)合實際操作的方式講解任務2.1.1繪制基礎折線圖。四、歸納總結(jié)教師回顧本節(jié)課所講的內(nèi)容，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第二課時（初識堆疊折線圖、圖例組件、數(shù)據(jù)堆疊、折線圖的文本標簽、任務2.1.2繪制堆疊折線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課某校始終積極貫徹落實各項規(guī)章制度，定期開展每月考核，切實提高學校課堂教學質(zhì)量，構(gòu)建良好教育生態(tài)。為了更好地開展工作，各年級班主任需要定期統(tǒng)計學生各科學習成績，并取均值。班主任余老師希望繪制一張堆疊折線圖來更好地展示本班部分學科學習成績的變化趨勢，從而幫助學生、家長和老師及時發(fā)現(xiàn)問題并進行查漏補缺，進而提高學生的學習成績。本節(jié)課將學習初識堆疊折線圖、圖例組件、數(shù)據(jù)堆疊、折線圖的文本標簽，并基于初三某班部分學科學習成績繪制堆疊折線圖。三、新課講解知識點1-初識堆疊折線圖教師通過PPT的方式講解初識堆疊折線圖。什么是堆疊折線圖?；A折線圖和堆疊折線圖的效果對比。知識點2-圖例組件教師通過PPT結(jié)合實際操作的方式講解圖例組件。圖例組件的作用。堆疊折線圖中圖例組件的效果。圖例組件的設置方式。列舉legend對象的常用屬性。通過代碼演示如何設置圖例組件距離容器左側(cè)距離。通過代碼演示如何設置圖例。知識點3-數(shù)據(jù)堆疊教師通過PPT結(jié)合實際操作的方式講解數(shù)據(jù)堆疊。什么是數(shù)據(jù)堆疊。常見的可以進行數(shù)據(jù)堆疊的圖表。數(shù)據(jù)堆疊的設置方式。知識點4-折線圖的文本標簽教師通過PPT結(jié)合實際操作的方式講解折線圖的文本標簽。折線圖文本標簽的設置方式。列舉折線圖中l(wèi)abel對象的常用屬性。通過代碼演示如何設置折線圖的文本標簽。知識點5-任務2.1.2繪制堆疊折線圖教師通過PPT結(jié)合實際操作的方式講解任務2.1.2繪制堆疊折線圖。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第三課時（初識區(qū)域面積圖、區(qū)域填充樣式、網(wǎng)格組件、任務2.1.3繪制區(qū)域面積圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課自媒體的興起為人們提供了多元化的信息來源，豐富了我們的生活和工作。通過自媒體，我們可以記錄美好生活，分享風土人情。小王是一名美食博主，他主要通過拍攝充滿生活氣息的內(nèi)容并通過幽默詼諧的講述方式來吸引觀眾，讓他們了解不同地區(qū)的美食。經(jīng)過多年的努力，他的賬號已經(jīng)擁有了5萬多個粉絲。本節(jié)課將學習初識區(qū)域面積圖、區(qū)域填充樣式和網(wǎng)格組件，并基于小王運營賬號近幾年的粉絲數(shù)量繪制區(qū)域面積圖。三、新課講解知識點1-初識區(qū)域面積圖教師通過PPT的方式講解初識區(qū)域面積圖。什么是區(qū)域面積圖。區(qū)域面積圖的效果。知識點2-區(qū)域填充樣式教師通過PPT結(jié)合實際操作的方式講解區(qū)域填充樣式。區(qū)域填充樣式的設置方式。列舉areaStyle對象的常用屬性。通過代碼演示如何設置折線圖區(qū)域填充樣式。知識點3-網(wǎng)格組件教師通過PPT結(jié)合實際操作的方式講解網(wǎng)格組件。網(wǎng)格組件的作用。區(qū)域面積圖中網(wǎng)格組件的效果。網(wǎng)格組件的設置方式。列舉grid對象的常用屬性。通過代碼演示如何設置網(wǎng)格。知識點4-任務2.1.3繪制區(qū)域面積圖教師通過PPT結(jié)合實際操作的方式講解任務2.1.3繪制區(qū)域面積圖。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第四課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為：任務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結(jié)合實際操作的方式講解提示框組件。提示框組件的作用。堆疊面積折線圖中提示框組件的效果。提示框組件的設置方式。列舉tooltip對象的常用屬性。通過代碼演示如何設置提示框。知識點3-任務2.1.4繪制堆疊面積折線圖教師通過PPT結(jié)合實際操作的方式講解任務2.1.4繪制堆疊面積折線圖。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第六課時（初識階梯折線圖、工具欄組件、任務2.1.5繪制階梯折線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課自全面建成小康社會以來，我國人民生活水平普遍提高，大眾對于美好生活的追求已由物質(zhì)需求轉(zhuǎn)變?yōu)榫裥枨?。故每逢?jié)假日，各地知名旅游景點都人山人海，熱鬧非凡。對此，各地政府會據(jù)實際情況做出相關安排，保障游客的安全，維護游客的合法權(quán)益。景點負責人希望繪制一張階梯折線圖展示某景點一年來門票價格的變化情況，從而更好地分析門票銷售情況，并制定相應的營銷策略。本節(jié)課將學習初識階梯折線圖、工具欄組件，并基于門票價格繪制階梯折線圖。三、新課講解知識點1-初識階梯折線圖教師通過PPT結(jié)合實際操作的方式講解初識階梯折線圖。什么是階梯折線圖。階梯折線圖的效果。階梯折線圖的設置方式。通過代碼演示如何設置階梯折線圖。知識點2-工具欄組件教師通過PPT的方式講解工具欄組件。工具欄組件的作用。階梯折線圖中工具欄組件的效果。工具欄組件的設置方式。列舉toolbox對象的常用屬性。知識點3-任務2.1.5繪制階梯折線圖教師通過PPT結(jié)合實際操作的方式講解任務2.1.5繪制階梯折線圖。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第七課時（初識平滑曲線圖、數(shù)據(jù)集組件、平滑曲線的設置、任務2.1.6繪制平滑曲線圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課妙妙是快遞站的老板，她希望繪制一張平滑曲線圖來更好地展示一周之內(nèi)快遞的發(fā)貨數(shù)量，并通過該圖表展示快遞發(fā)貨數(shù)量的變化趨勢，幫助妙妙更好地了解快遞站的發(fā)貨情況，從而更好地管理快遞站的日常工作。本節(jié)課將學習初識平滑曲線圖、數(shù)據(jù)集組件、平滑曲線的設置，并基于一周之內(nèi)快遞發(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結(jié)合實際操作的方式講解任務2.1.6繪制平滑曲線圖。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第八課時（上機練習）上機練習主要針對本章中需要重點掌握的知識點，以及在程序中容易出錯的內(nèi)容進行練習，通過上機練習可以考察同學對知識點的掌握情況，對代碼的熟練程度。上機：（考察知識點為：任務2.1.4繪制堆疊面積折線圖、任務2.1.5繪制階梯折線圖、任務2.1.6繪制平滑曲線圖）形式：單獨完成具體要求：按照任務需求實現(xiàn)指定的任務。第九課時（初識基礎餅圖、餅圖的半徑、餅圖的文本標簽、任務2.2.1繪制基礎餅圖）一、復習鞏固教師通過上節(jié)課作業(yè)的完成情況，對學生吸收不好的知識點進行再次鞏固講解。二、通過需求引入的方式導入新課小劉是一個經(jīng)營了多家水果店的老板，他深知成功離不開“順勢而為”。近年來，他經(jīng)常在季節(jié)交替時分析店鋪內(nèi)水果的銷售情況，準確了解消費者的偏好，并進一步優(yōu)化熱門商品的供應和銷售策略，以占據(jù)更大的市場份額。小劉希望繪制一張基礎餅圖來更好地展示店鋪中夏季部分水果的銷量占比情況。本節(jié)課將學習初識基礎餅圖、餅圖的半徑、餅圖的文本標簽，并基于某店鋪夏季部分水果的銷量繪制基礎餅圖。三、新課講解知識點1-初識基礎餅圖教師通過PPT的方式講解初識基礎餅圖。什么是基礎餅圖?；A餅圖的設置方式?；A餅圖的效果。知識點2-餅圖的半徑教師通過PPT的方式講解餅圖的半徑。餅圖的半徑的設置方式。通過代碼演示如何設置餅圖的半徑。radius屬性值類型。數(shù)字百分比字符串數(shù)組知識點3-餅圖的文本標簽教師通過PPT的方式講解餅圖的文本標簽。餅圖文本標簽的設置方式。列舉餅圖中l(wèi)abel對象的常用屬性。知識點4-任務2.2.1繪制基礎餅圖教師通過PPT結(jié)合實際操作的方式講解任務2.2.1繪制基礎餅圖。四、歸納總結(jié)教師回顧本節(jié)課所講的知識，并通過測試題的方式引導學生解答問題并給予指導。五、布置作業(yè)教師通過高校教輔平臺（）布置本節(jié)課作業(yè)以及下節(jié)課的預習作業(yè)。第十課時（初識南丁格爾圖、南丁格爾圖的設置、任務2.2.