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

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