李可

寧波職業(yè)技術(shù)學(xué)院 浙江 寧波 315800

1 設(shè)計(jì)思路

1.1 課前

教師通過在線教學(xué)平臺布置任務(wù)，學(xué)生自學(xué)Echarts數(shù)據(jù)包的下載與安裝、Echarts的使用步驟，常用柱狀圖的使用方法的知識點(diǎn)微課。

1.2 課中

老師進(jìn)行任務(wù)引入，將阿里云數(shù)據(jù)庫中的數(shù)據(jù)截取出一部分展示給學(xué)生，用Echarts提供的默認(rèn)柱狀圖，通過修改圖表的參數(shù)，美化圖表樣式將這些數(shù)據(jù)進(jìn)行可視化展示，讓數(shù)據(jù)更加直觀、數(shù)據(jù)特點(diǎn)更加突出，教師通過代碼演示講解本節(jié)課重點(diǎn)，修改圖表配置參數(shù)，強(qiáng)調(diào)參數(shù)修改的操作規(guī)范，通過查找學(xué)習(xí)官方在線文檔，增加圖標(biāo)額外功能，引導(dǎo)學(xué)生具備創(chuàng)新、精益求精的精神，然后老師引出進(jìn)階任務(wù)，完成柱狀圖數(shù)據(jù)替換功能，根據(jù)項(xiàng)目需求定制的上課簽到情況餅形圖和當(dāng)前機(jī)房使用率儀表盤圖[1]。學(xué)生自行查找資料和Echarts官方文檔，使用真機(jī)調(diào)試功能完成進(jìn)階任務(wù)，老師通過個(gè)別輔導(dǎo)和講解共性問題幫助每位學(xué)生掌握數(shù)據(jù)庫中數(shù)據(jù)的計(jì)算、排序及小程序數(shù)據(jù)的渲染方式讓學(xué)生掌握本次課的難點(diǎn)。

課后學(xué)生完成“學(xué)習(xí)時(shí)長折線圖”的作業(yè)，讓學(xué)生擴(kuò)展一下在課堂上沒學(xué)過的功能。

2 掌握的知識、技能和素質(zhì)目標(biāo)

知識目標(biāo)：①了解Echarts數(shù)據(jù)可視化庫組件類型。②掌握Echarts的使用步驟。③掌握Echarts的基礎(chǔ)配置。

技能目標(biāo)：①會根據(jù)不同的數(shù)據(jù)選擇合適的可視化圖表。②會編寫代碼創(chuàng)建echarts實(shí)例對象。③會根據(jù)產(chǎn)品需求配置圖表的參數(shù)。④會查找使用在線文檔中的參數(shù)說明。

素質(zhì)目標(biāo)：①實(shí)現(xiàn)柱狀圖過程中遵守職業(yè)道德、尊重行業(yè)標(biāo)準(zhǔn)，養(yǎng)成嚴(yán)謹(jǐn)規(guī)范的工作習(xí)慣。②實(shí)現(xiàn)柱狀圖、餅形圖時(shí)能夠與團(tuán)隊(duì)成員溝通協(xié)調(diào)，確定自己的任務(wù)，理解團(tuán)隊(duì)的任務(wù)。③能自學(xué)Echarts官方學(xué)習(xí)手冊，跟蹤行業(yè)技術(shù)動態(tài)，利用網(wǎng)絡(luò)資源學(xué)習(xí)各種新技術(shù)。

3 重點(diǎn)及措施

通過這些教學(xué)手段，讓每位學(xué)生都能很好地掌握配置圖表參數(shù)方法，解決本節(jié)課的重點(diǎn)。

本節(jié)課的重點(diǎn)是通過學(xué)習(xí)Echarts官方文檔配置圖表參數(shù)。

措施：①通過學(xué)生“做中學(xué)”模式，老師帶領(lǐng)學(xué)生查找官方文檔找到相應(yīng)的配置參數(shù)并講解使用方法，老師編寫修改配置參數(shù)代碼演示給學(xué)生，學(xué)生同步和老師完成代碼。②通過教師和學(xué)生共同分析個(gè)別同學(xué)錯(cuò)誤配置的代碼，讓學(xué)生正確調(diào)用Echarts數(shù)據(jù)可視化庫并正確配置其參數(shù)。③教師采用糾正和指導(dǎo)的方式， 利用智能軟件的多屏互動系統(tǒng)通過學(xué)生匯報(bào)的方式，讓學(xué)生發(fā)現(xiàn)問題、分析問題、最后解決問題。

通過這些教學(xué)手段，讓每位學(xué)生都能很好地掌握配置圖表參數(shù)方法，解決本節(jié)課的重點(diǎn)。

4 難點(diǎn)及措施

本節(jié)課的難點(diǎn)是對數(shù)據(jù)庫中的數(shù)據(jù)進(jìn)行計(jì)算、排序及小程序數(shù)據(jù)的渲染。

措施：①通過學(xué)生自己查閱資料，編寫代碼在數(shù)據(jù)庫軟件中實(shí)現(xiàn)數(shù)據(jù)的計(jì)算和排序功能。②通過教師和學(xué)生共同分析個(gè)別同學(xué)錯(cuò)誤的SQL語句，讓學(xué)生編程實(shí)現(xiàn)數(shù)據(jù)的計(jì)算方法。③通過小程序真機(jī)調(diào)試的功能，查找并改正數(shù)據(jù)渲染的錯(cuò)誤。

通過這些教學(xué)手段，讓每位學(xué)生都能很好的掌握數(shù)據(jù)庫中數(shù)據(jù)的計(jì)算、排序及小程序數(shù)據(jù)的渲染方式，解決本節(jié)課的難點(diǎn)。

5 課政融合

①通過學(xué)習(xí)Echarts官方在線文檔（實(shí)時(shí)更新），讓學(xué)生養(yǎng)成自我學(xué)習(xí)，終身學(xué)習(xí)的習(xí)慣。②通過使用百度Echarts.js開源代碼庫，讓學(xué)生了解國產(chǎn)軟件的強(qiáng)大，培養(yǎng)學(xué)生愛國情懷。③通過修正學(xué)生操作中的錯(cuò)誤代碼，養(yǎng)成學(xué)生書寫規(guī)范代碼的習(xí)慣，讓學(xué)生知道小程序代碼語法規(guī)則和行業(yè)規(guī)范。④通過教師提出的項(xiàng)目需求，學(xué)生制作創(chuàng)新的餅形圖和儀表盤圖，培養(yǎng)學(xué)生創(chuàng)新精神及精益求精的精神。

6 教學(xué)設(shè)計(jì)

6.1 課前任務(wù)

學(xué)生：利用網(wǎng)絡(luò)教學(xué)平臺學(xué)習(xí)Echarts數(shù)據(jù)包的下載與安裝、Echarts的使用步驟，常用柱狀圖的使用方法和配置參數(shù)，學(xué)習(xí)Echarts數(shù)據(jù)可視化插件的引入方式，完成課前測試。

教師：收集并分析學(xué)生學(xué)習(xí)和測試情況。

設(shè)計(jì)意圖：學(xué)習(xí)知識點(diǎn)，Echarts數(shù)據(jù)可視化庫組件類型，了解Echarts使用規(guī)范，為開發(fā)符合實(shí)際需求的圖表做好準(zhǔn)備。

6.2 課程引入

教師：介紹本次課的教學(xué)安排，完成數(shù)據(jù)可視化展示功能。查看同學(xué)們課前的項(xiàng)目完成情況。

學(xué)生：打開上課需要的軟件、平臺。

設(shè)計(jì)意圖：老師分析課前學(xué)生的學(xué)習(xí)情況，調(diào)整上課策略，也讓學(xué)生了解本節(jié)課的學(xué)習(xí)任務(wù)。

6.3 用Echarts創(chuàng)建默認(rèn)的柱狀圖

①學(xué)生：學(xué)生根據(jù)任務(wù)，進(jìn)行做中學(xué)，創(chuàng)建echarts實(shí)例對象，引入默認(rèn)的柱狀圖，了解echarts基礎(chǔ)配置，將配置項(xiàng)設(shè)置給echarts實(shí)例對象。②教師：教師指導(dǎo)，修正學(xué)生操作中的問題，如：a.echarts組件引用錯(cuò)誤。b.沒有初始化echarts實(shí)例對象。c.沒有準(zhǔn)備一個(gè)有大小的DOM容器。d.沒有將配置項(xiàng)設(shè)置給echarts實(shí)例對象。③課政融合：通過目前市場上已存在的數(shù)據(jù)可視化庫的對比，選擇使用百度公司的echarts.js數(shù)據(jù)可視化庫的優(yōu)勢，讓學(xué)生了解國產(chǎn)軟件的強(qiáng)大，培養(yǎng)學(xué)生的愛國情懷。④設(shè)計(jì)意圖：訓(xùn)練學(xué)生用Echart數(shù)據(jù)可視化制作圖表，讓學(xué)生在“做中學(xué)”中掌握本節(jié)課的難點(diǎn)，并讓學(xué)生發(fā)現(xiàn)其中的操作規(guī)范與實(shí)現(xiàn)技術(shù)。

6.4 制作根據(jù)需求定制的機(jī)房使用統(tǒng)計(jì)柱狀圖

6.4.1 教師：如何將默認(rèn)的柱狀圖變成我們項(xiàng)目需求定制的柱狀圖，講解配置項(xiàng)中的主要配置如：‘series’、‘xAxis’、‘yAxis’、‘grid’、‘tooltip’、‘title’、‘legend’字段，修改圖表的配置參數(shù)，美化圖表樣式，將柱狀圖由默認(rèn)的橫向改成縱向。引出本節(jié)課的難點(diǎn)，查找在線官方手冊，給柱狀圖增加顯示最大值和最小值功能，改變最大值和最小值顏色。通過學(xué)生查找在線學(xué)習(xí)手冊并學(xué)習(xí)里面的參數(shù)配置完成柱狀圖的新功能，培養(yǎng)讓學(xué)生養(yǎng)成自我學(xué)習(xí)，終身學(xué)習(xí)的習(xí)慣。

圖1 機(jī)房統(tǒng)計(jì)圖

6.4.2 學(xué)生：學(xué)生分組操作，通過 Echarts官方文檔手冊學(xué)習(xí)，完成老師課堂布置的進(jìn)階任務(wù)。

6.4.3 設(shè)計(jì)意圖：針對本節(jié)課的重點(diǎn)引入Echarts官方文檔手冊，也引導(dǎo)善于利用現(xiàn)有成熟的網(wǎng)絡(luò)資源，拓展軟件功能，培養(yǎng)學(xué)生自自我學(xué)習(xí)、創(chuàng)新精神。

6.5 任務(wù)完善完成柱狀圖數(shù)據(jù)替換功能[2]

6.5.1 學(xué)生：將制作圖表的數(shù)據(jù)換成阿里云數(shù)據(jù)庫中的數(shù)據(jù)，首先用SQL語句完成獲取數(shù)據(jù)庫中上機(jī)統(tǒng)計(jì)表中的數(shù)據(jù)，接著用下機(jī)時(shí)間減去上機(jī)時(shí)間計(jì)算每個(gè)機(jī)器號所用時(shí)間，然后將時(shí)間排序求出最大值即為本機(jī)房上機(jī)使用時(shí)間，最后將數(shù)據(jù)寫在機(jī)房信息表的上機(jī)總時(shí)間字段里。用wx.request請求方法將機(jī)房信息表中的機(jī)房號和上機(jī)總時(shí)間獲取到小程序中，經(jīng)過循環(huán)將數(shù)據(jù)渲染到頁面中。調(diào)試程序，完成根據(jù)需求定制的機(jī)房使用統(tǒng)計(jì)柱狀圖，實(shí)現(xiàn)機(jī)房使用數(shù)據(jù)的可視化展示。

6.5.2 教師：教師指導(dǎo)，修正學(xué)生操作中的問題。通過修正學(xué)生操作中的錯(cuò)誤代碼，養(yǎng)成學(xué)生書寫規(guī)范代碼的習(xí)慣，讓學(xué)生知道小程序代碼語法規(guī)則和行業(yè)規(guī)范。

6.5.3 設(shè)計(jì)意圖：引入本節(jié)課難點(diǎn)對數(shù)據(jù)庫中的數(shù)據(jù)進(jìn)行計(jì)算、排序及小程序數(shù)據(jù)的渲染。讓學(xué)生“做中學(xué)”，不斷訓(xùn)練學(xué)生技能，完成機(jī)房使用統(tǒng)計(jì)圖表中數(shù)據(jù)替換功能，養(yǎng)成學(xué)生書寫規(guī)范代碼的習(xí)慣

6.6 進(jìn)階任務(wù)完成根據(jù)需求定制的上課簽到情況餅形圖

①教師：提出項(xiàng)目需求，學(xué)生分組完成上課簽到情況餅形圖。通過教師提出的項(xiàng)目需求，學(xué)生從用戶角度出發(fā)，體驗(yàn)數(shù)據(jù)的意義，選擇合適的圖形來完成數(shù)據(jù)可視化展示。②學(xué)生：如何將默認(rèn)的餅形圖變成我們項(xiàng)目需求定制的餅形圖，利用Echarts官方文檔手冊學(xué)習(xí)，修改圖表的基本參數(shù)，美化圖表樣式，加上教師的輔導(dǎo)制作滿足需求的餅形圖。③設(shè)計(jì)意圖：讓學(xué)生“做中學(xué)”，不斷訓(xùn)練學(xué)生技能，完成上課簽到情況圖表功能，培養(yǎng)學(xué)生創(chuàng)新精神及精益求精的精神。

6.7 進(jìn)階任務(wù)完成當(dāng)前機(jī)房的使用率儀表盤圖[3]

①教師：提出項(xiàng)目需求，學(xué)生分組完成當(dāng)前機(jī)房的使用率儀表盤圖。通過教師提出的項(xiàng)目需求，學(xué)生制作創(chuàng)新的儀表盤圖，培養(yǎng)學(xué)生創(chuàng)新精神及精益求精的精神。②學(xué)生：如何將默認(rèn)的儀表盤圖變成我們項(xiàng)目需求定制的儀表盤圖，利用Echarts官方文檔手冊學(xué)習(xí)，修改圖表的基本參數(shù)，美化圖表樣式，加上教師的輔導(dǎo)制作滿足需求的儀表盤圖。③設(shè)計(jì)意圖：讓學(xué)生“做中學(xué)”，不斷訓(xùn)練學(xué)生技能，完成機(jī)房的使用率圖表功能，培養(yǎng)學(xué)生創(chuàng)新精神及精益求精的精神。

6.8 匯報(bào)展示

①學(xué)生：展示個(gè)別學(xué)生完成的上課簽到情況的餅形圖和當(dāng)前機(jī)房的使用率儀表盤圖，讓學(xué)生相互評價(jià)，相互學(xué)習(xí)，提出改進(jìn)的地方，借鑒好的作品。②教師：對作品的規(guī)范性做出評價(jià)。包括：a.圖表布局美觀的規(guī)范性。b.數(shù)據(jù)統(tǒng)計(jì)的規(guī)范性。c.操作過程的規(guī)范性。d.提高學(xué)生的審美意識。③設(shè)計(jì)意圖：通過學(xué)生的作品展示，發(fā)現(xiàn)一些潛在的問題，幫助學(xué)生解決這些問題。

6.9 歸納小結(jié)

了解常用Echarts數(shù)據(jù)可視化庫組件類型；掌握Echarts常用的基礎(chǔ)配置方法；掌握 Echarts官方在線文檔的使用方法 。

7 教學(xué)效果

按照教學(xué)計(jì)劃，本次課學(xué)生完成了統(tǒng)計(jì)數(shù)據(jù)可視化展示功能，學(xué)生在聽取其他同學(xué)的匯報(bào)中能發(fā)現(xiàn)存在的問題、思考問題并解決問題。老師根據(jù)實(shí)際的需求，引出本次課重要知識點(diǎn)Echarts使用方法和基本參數(shù)配置，在“做中學(xué)”中幫助學(xué)生掌握本次課的重點(diǎn)，讓學(xué)生更好地完成數(shù)據(jù)可視化界面設(shè)計(jì)和功能實(shí)現(xiàn)。通過數(shù)據(jù)替換功能，引入本次課難點(diǎn)即對數(shù)據(jù)庫中的數(shù)據(jù)進(jìn)行計(jì)算、排序及小程序數(shù)據(jù)的渲染，通過學(xué)生練習(xí)，教師輔導(dǎo)的方式幫助學(xué)生掌握這個(gè)難點(diǎn)，在整個(gè)教學(xué)過程中強(qiáng)調(diào)操作的規(guī)范，產(chǎn)品功能完善，擅于利用網(wǎng)絡(luò)資源拓展軟件功能，培養(yǎng)了學(xué)生愛國情懷，自學(xué)能力，創(chuàng)新精神。同時(shí)也存在一些不足，學(xué)生在小組分工環(huán)節(jié)容易出現(xiàn)個(gè)別學(xué)生參與度不高，積極性不強(qiáng)的情況,部分學(xué)生的作品美觀還需要改進(jìn)。加強(qiáng)學(xué)生小組協(xié)作意識，讓小組內(nèi)部實(shí)現(xiàn)組內(nèi)幫扶，通過有效的課堂獎(jiǎng)勵(lì)機(jī)制調(diào)動學(xué)生的積極性。課后老師推薦優(yōu)秀經(jīng)典案例，讓學(xué)生分析和觀摩，在不斷的學(xué)習(xí)中提高自主制作能力。

8 結(jié)束語

本文通過學(xué)習(xí)Echarts數(shù)據(jù)可視化庫組件來實(shí)現(xiàn)微信小程序數(shù)據(jù)展示，提出了一個(gè)比較詳盡的教學(xué)設(shè)計(jì)，對重點(diǎn)和難點(diǎn)進(jìn)行了分析采用相應(yīng)的教學(xué)手段，希望對微信小程序數(shù)據(jù)可視化教學(xué)達(dá)到一個(gè)拋磚引玉的效果。