微信小程序數據可視化應用課程設計

李可

寧波職業技術學院 浙江 寧波 315800

1 設計思路

1.1 課前

教師通過在線教學平臺布置任務，學生自學Echarts數據包的下載與安裝、Echarts的使用步驟，常用柱狀圖的使用方法的知識點微課。

1.2 課中

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

課后學生完成“學習時長折線圖”的作業，讓學生擴展一下在課堂上沒學過的功能。

2 掌握的知識、技能和素質目標

知識目標：①了解Echarts數據可視化庫組件類型。②掌握Echarts的使用步驟。③掌握Echarts的基礎配置。

技能目標：①會根據不同的數據選擇合適的可視化圖表。②會編寫代碼創建echarts實例對象。③會根據產品需求配置圖表的參數。④會查找使用在線文檔中的參數說明。

素質目標：①實現柱狀圖過程中遵守職業道德、尊重行業標準，養成嚴謹規范的工作習慣。②實現柱狀圖、餅形圖時能夠與團隊成員溝通協調，確定自己的任務，理解團隊的任務。③能自學Echarts官方學習手冊，跟蹤行業技術動態，利用網絡資源學習各種新技術。

3 重點及措施

通過這些教學手段，讓每位學生都能很好地掌握配置圖表參數方法，解決本節課的重點。

本節課的重點是通過學習Echarts官方文檔配置圖表參數。

措施：①通過學生“做中學”模式，老師帶領學生查找官方文檔找到相應的配置參數并講解使用方法，老師編寫修改配置參數代碼演示給學生，學生同步和老師完成代碼。②通過教師和學生共同分析個別同學錯誤配置的代碼，讓學生正確調用Echarts數據可視化庫并正確配置其參數。③教師采用糾正和指導的方式， 利用智能軟件的多屏互動系統通過學生匯報的方式，讓學生發現問題、分析問題、最后解決問題。

通過這些教學手段，讓每位學生都能很好地掌握配置圖表參數方法，解決本節課的重點。

4 難點及措施

本節課的難點是對數據庫中的數據進行計算、排序及小程序數據的渲染。

措施：①通過學生自己查閱資料，編寫代碼在數據庫軟件中實現數據的計算和排序功能。②通過教師和學生共同分析個別同學錯誤的SQL語句，讓學生編程實現數據的計算方法。③通過小程序真機調試的功能，查找并改正數據渲染的錯誤。

通過這些教學手段，讓每位學生都能很好的掌握數據庫中數據的計算、排序及小程序數據的渲染方式，解決本節課的難點。

5 課政融合

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

6 教學設計

6.1 課前任務

學生：利用網絡教學平臺學習Echarts數據包的下載與安裝、Echarts的使用步驟，常用柱狀圖的使用方法和配置參數，學習Echarts數據可視化插件的引入方式，完成課前測試。

教師：收集并分析學生學習和測試情況。

設計意圖：學習知識點，Echarts數據可視化庫組件類型，了解Echarts使用規范，為開發符合實際需求的圖表做好準備。

6.2 課程引入

教師：介紹本次課的教學安排，完成數據可視化展示功能。查看同學們課前的項目完成情況。

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

設計意圖：老師分析課前學生的學習情況，調整上課策略，也讓學生了解本節課的學習任務。

6.3 用Echarts創建默認的柱狀圖

①學生：學生根據任務，進行做中學，創建echarts實例對象，引入默認的柱狀圖，了解echarts基礎配置，將配置項設置給echarts實例對象。②教師：教師指導，修正學生操作中的問題，如：a.echarts組件引用錯誤。b.沒有初始化echarts實例對象。c.沒有準備一個有大小的DOM容器。d.沒有將配置項設置給echarts實例對象。③課政融合：通過目前市場上已存在的數據可視化庫的對比，選擇使用百度公司的echarts.js數據可視化庫的優勢，讓學生了解國產軟件的強大，培養學生的愛國情懷。④設計意圖：訓練學生用Echart數據可視化制作圖表，讓學生在“做中學”中掌握本節課的難點，并讓學生發現其中的操作規范與實現技術。

6.4 制作根據需求定制的機房使用統計柱狀圖

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

圖1 機房統計圖

6.4.2 學生：學生分組操作，通過 Echarts官方文檔手冊學習，完成老師課堂布置的進階任務。

6.4.3 設計意圖：針對本節課的重點引入Echarts官方文檔手冊，也引導善于利用現有成熟的網絡資源，拓展軟件功能，培養學生自自我學習、創新精神。

6.5 任務完善完成柱狀圖數據替換功能[2]

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

6.5.2 教師：教師指導，修正學生操作中的問題。通過修正學生操作中的錯誤代碼，養成學生書寫規范代碼的習慣，讓學生知道小程序代碼語法規則和行業規范。

6.5.3 設計意圖：引入本節課難點對數據庫中的數據進行計算、排序及小程序數據的渲染。讓學生“做中學”，不斷訓練學生技能，完成機房使用統計圖表中數據替換功能，養成學生書寫規范代碼的習慣

6.6 進階任務完成根據需求定制的上課簽到情況餅形圖

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

6.7 進階任務完成當前機房的使用率儀表盤圖[3]

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

6.8 匯報展示

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

6.9 歸納小結

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

7 教學效果

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

8 結束語

本文通過學習Echarts數據可視化庫組件來實現微信小程序數據展示，提出了一個比較詳盡的教學設計，對重點和難點進行了分析采用相應的教學手段，希望對微信小程序數據可視化教學達到一個拋磚引玉的效果。