微信小程序數(shù)據(jù)可視化應(yīng)用課程設(shè)計(jì)

李可

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

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

1.1 課前

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

1.2 課中

老師進(jìn)行任務(wù)引入，將阿里云數(shù)據(jù)庫(kù)中的數(shù)據(jù)截取出一部分展示給學(xué)生，用Echarts提供的默認(rèn)柱狀圖，通過(guò)修改圖表的參數(shù)，美化圖表樣式將這些數(shù)據(jù)進(jìn)行可視化展示，讓數(shù)據(jù)更加直觀、數(shù)據(jù)特點(diǎn)更加突出，教師通過(guò)代碼演示講解本節(jié)課重點(diǎn)，修改圖表配置參數(shù)，強(qiáng)調(diào)參數(shù)修改的操作規(guī)范，通過(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ù)，老師通過(guò)個(gè)別輔導(dǎo)和講解共性問(wèn)題幫助每位學(xué)生掌握數(shù)據(jù)庫(kù)中數(shù)據(jù)的計(jì)算、排序及小程序數(shù)據(jù)的渲染方式讓學(xué)生掌握本次課的難點(diǎn)。

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

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

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

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

素質(zhì)目標(biāo)：①實(shí)現(xiàn)柱狀圖過(guò)程中遵守職業(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í)手冊(cè)，跟蹤行業(yè)技術(shù)動(dòng)態(tài)，利用網(wǎng)絡(luò)資源學(xué)習(xí)各種新技術(shù)。

3 重點(diǎn)及措施

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

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

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

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

4 難點(diǎn)及措施

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

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

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

5 課政融合

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

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

6.1 課前任務(wù)

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

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

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

6.2 課程引入

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

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

設(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í)例對(duì)象，引入默認(rèn)的柱狀圖，了解echarts基礎(chǔ)配置，將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象。②教師：教師指導(dǎo)，修正學(xué)生操作中的問(wèn)題，如：a.echarts組件引用錯(cuò)誤。b.沒(méi)有初始化echarts實(shí)例對(duì)象。c.沒(méi)有準(zhǔn)備一個(gè)有大小的DOM容器。d.沒(méi)有將配置項(xiàng)設(shè)置給echarts實(shí)例對(duì)象。③課政融合：通過(guò)目前市場(chǎng)上已存在的數(shù)據(jù)可視化庫(kù)的對(duì)比，選擇使用百度公司的echarts.js數(shù)據(jù)可視化庫(kù)的優(yōu)勢(shì)，讓學(xué)生了解國(guó)產(chǎn)軟件的強(qiáng)大，培養(yǎng)學(xué)生的愛(ài)國(guó)情懷。④設(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)，查找在線官方手冊(cè)，給柱狀圖增加顯示最大值和最小值功能，改變最大值和最小值顏色。通過(guò)學(xué)生查找在線學(xué)習(xí)手冊(cè)并學(xué)習(xí)里面的參數(shù)配置完成柱狀圖的新功能，培養(yǎng)讓學(xué)生養(yǎng)成自我學(xué)習(xí)，終身學(xué)習(xí)的習(xí)慣。

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

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

6.4.3 設(shè)計(jì)意圖：針對(duì)本節(jié)課的重點(diǎn)引入Echarts官方文檔手冊(cè)，也引導(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ù)庫(kù)中的數(shù)據(jù)，首先用SQL語(yǔ)句完成獲取數(shù)據(jù)庫(kù)中上機(jī)統(tǒng)計(jì)表中的數(shù)據(jù)，接著用下機(jī)時(shí)間減去上機(jī)時(shí)間計(jì)算每個(gè)機(jī)器號(hào)所用時(shí)間，然后將時(shí)間排序求出最大值即為本機(jī)房上機(jī)使用時(shí)間，最后將數(shù)據(jù)寫在機(jī)房信息表的上機(jī)總時(shí)間字段里。用wx.request請(qǐng)求方法將機(jī)房信息表中的機(jī)房號(hào)和上機(jī)總時(shí)間獲取到小程序中，經(jīng)過(guò)循環(huán)將數(shù)據(jù)渲染到頁(yè)面中。調(diào)試程序，完成根據(jù)需求定制的機(jī)房使用統(tǒng)計(jì)柱狀圖，實(shí)現(xiàn)機(jī)房使用數(shù)據(jù)的可視化展示。

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

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

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

①教師：提出項(xiàng)目需求，學(xué)生分組完成上課簽到情況餅形圖。通過(guò)教師提出的項(xiàng)目需求，學(xué)生從用戶角度出發(fā)，體驗(yàn)數(shù)據(jù)的意義，選擇合適的圖形來(lái)完成數(shù)據(jù)可視化展示。②學(xué)生：如何將默認(rèn)的餅形圖變成我們項(xiàng)目需求定制的餅形圖，利用Echarts官方文檔手冊(cè)學(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ī)房的使用率儀表盤圖。通過(guò)教師提出的項(xiàng)目需求，學(xué)生制作創(chuàng)新的儀表盤圖，培養(yǎng)學(xué)生創(chuàng)新精神及精益求精的精神。②學(xué)生：如何將默認(rèn)的儀表盤圖變成我們項(xiàng)目需求定制的儀表盤圖，利用Echarts官方文檔手冊(cè)學(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é)生相互評(píng)價(jià)，相互學(xué)習(xí)，提出改進(jìn)的地方，借鑒好的作品。②教師：對(duì)作品的規(guī)范性做出評(píng)價(jià)。包括：a.圖表布局美觀的規(guī)范性。b.數(shù)據(jù)統(tǒng)計(jì)的規(guī)范性。c.操作過(guò)程的規(guī)范性。d.提高學(xué)生的審美意識(shí)。③設(shè)計(jì)意圖：通過(guò)學(xué)生的作品展示，發(fā)現(xiàn)一些潛在的問(wèn)題，幫助學(xué)生解決這些問(wèn)題。

6.9 歸納小結(jié)

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

7 教學(xué)效果

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

8 結(jié)束語(yǔ)

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