PAGE21PAGE大數據可視化分析課程教案首頁9-2一、核心要素章節(jié)名稱項目5智慧農業(yè)大屏ECharts圖表插入任務5.2ECharts常用圖表5.2.2繪制折線圖5.2.3繪制餅圖教學課時2授課班級大數據技術2401班授課時間第9周-2授課地點介夫樓307教學目標知識目標掌握折線圖使用方法和場景。掌握堆疊圖的作用。掌握餅圖使用方法和場景。能力目標會進行ECharts的基本使用會制作餅圖會制作折線圖素質目標增強專業(yè)學習興趣和職業(yè)認同感；依據標準實現(xiàn)文件的保存，形成規(guī)則意識；培養(yǎng)精益求精的工匠精神；培養(yǎng)初步的審美情趣。教學內容主要內容掌握折線圖、堆疊圖、餅圖的制作及其配置項的設置。重點配置項的設置難點會使用配置項文檔中進行個性化設置教法改革教學方法問答法/范例教學法教學手段（1）通過課堂討論提出問題和相關視頻學習，活躍課堂氣氛并激發(fā)學生的學習興趣；（2）通過“浙江省高等學校在線開放課程共享平臺”獲取電子課件等配套資源教學反思學生有任務書之后，對代碼的作用思考較少，要加深對于代碼的解釋和理解

二、教學設計教學步驟教學內容與情境設計教師活動學生活動時間分配課程導入?展示實際ECharts案例說明可視化在數據分析中的直觀性和應用價值提出課程目標：掌握ECharts的折線圖、餅圖繪制的基本流程和常見的效果配置教師演示，引導思考明確本節(jié)課的目標效果5分鐘5.2.2繪制折線圖2.3.1折線圖Echarts最基本的代碼結構：引入js文件，DOM容器，初始化對象，設置optionX軸數據：數組1：['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月’]Y軸數據：數組2：[3000,2800,900,1000,800,700,1400,1300,900,1000,800,600]圖表類型：在series下設置type:line2.3.2常見效果標記：最大值最小值平均值標注區(qū)間markPointmarkLinemarkArea平滑線條、風格smoothlineStyle color、type填充風格areaStyle緊挨邊緣boundaryGap是設置給x軸的,讓起點從x軸的0坐標開始對xAxis進行設置縮放,脫離0值比例如果每一組數據之間相差較少,且都比0大很多,那么有可能會出現(xiàn)這種情況scale演示散點圖繪制的方法，講解學生觀看演示并思考20分鐘堆疊圖堆疊圖如果在一個圖表中有兩個或者多個折線圖,在沒有使用堆疊配置的時候,效果如下:堆疊圖指的是,同個類目軸上系列配置相同的stack值后，后一個系列的值會在前一個系列的值上相加stack:’統(tǒng)一的值演示餅圖繪制的方法，講解學生觀看演示并思考15分鐘5.2.3繪制餅圖小明今年在各個網購平臺的消費金額是：淘寶：11231，京東：22673，唯品會：6123，1號店：8989，聚美優(yōu)品：67001. 制作餅圖2. 餅圖的常見效果1：修改圖表中的文本標簽餅圖的常見效果2：設置圓環(huán)兩個半徑radius:[‘50%’,’70%’]餅圖的常見效果3：南丁格爾圖餅圖的常見效果4：選中效果實現(xiàn)支持多個選中，以及扇形偏移量為30教師講解步驟學生操作20分鐘進行圖形實操制作學生自主進行餅圖的制作教師巡回指導學生實操10分鐘綜合練習與總結知識梳理拓展方向：直角坐標系的常見配置總結常見錯誤記錄拓展思考題10分鐘大數據可視化分析課程教案首頁9-2一、核心要素章節(jié)名稱項目5智慧農業(yè)大屏ECharts圖表插入任務實施5.2繪制組織農戶技術培訓折線圖教學課時2授課班級大數據技術2401班授課時間第9周-2授課地點介夫樓307教學目標知識目標1.掌握ECharts的折線圖的制作方法。能力目標1.能使用ECharts在HTML界面中繪制折線圖；2.能將JSON數據加載到圖表中;3.能結合實際數據繪制項目相關圖形。素質目標1.規(guī)范代碼的書寫，培養(yǎng)學生職業(yè)操守和職業(yè)素養(yǎng);2.通過翻閱ECharts官方文檔，培養(yǎng)學生的探索精神;3.能按需求定制新的圖表并實現(xiàn)，培養(yǎng)學生的創(chuàng)新精神教學內容主要內容數字大屏中ECharts常用圖表折線圖圖的制作重點折線的繪制與設置。難點結合實際數據繪制項目相關圖形。教法改革教學方法問答法/范例教學法教學手段（1）通過課堂討論提出問題和相關視頻學習，活躍課堂氣氛并激發(fā)學生的學習興趣；（2）教材、電子課件、超星信息化教學。教學反思學生在工單內容不是足夠詳細的情況下，難以做到舉一反三，要進一步加強項目的制作與聯(lián)系。

二、教學設計教學步驟教學內容與情境設計教師活動學生活動時間分配導入課堂發(fā)布本節(jié)課任務實施目標及要求任務主要分析“組織農戶技術培訓”的相關數據，并將其構造為JSON數據的數組結構，在智慧農業(yè)大屏中實現(xiàn)“組織農戶技術培訓”模塊中折線圖的展示。準備數據文件“農業(yè)數據平臺-組織農戶技術培訓.xlsx”，代碼基礎文件“FarmingCenterScreen

5.2.zip”。任務效果如圖5-21所示。圖5-21 智慧農業(yè)據大屏繪制中組織農戶技術培訓折線圖引導分享學生互動討論5分鐘1．準備組織農戶技術培訓JSON數據在FarmingCenterScreen項目的data文件夾下創(chuàng)建trainingSummary.json文件。將“農業(yè)數據平臺_組織農戶技術培訓.xlsx”文件內容轉換為“組織農戶技術培訓”模塊的JSON數組結構。教師講解理解數據層級關系15分鐘2．創(chuàng)建并引入JavaScript腳本文件main3.js。在js文件夾下創(chuàng)建main3.js文件。在main3.js文件中創(chuàng)建index03()函數，并使用getJSON()方法加載JSON數據。在main.js文件中調用index03()函數。在index.html文件中引入main3.js文件。教師引導學生思考學生觀看演示并思考15分鐘3．參考“12_1ine折線圖示例.html”文件內容繪制折線圖通過id屬性獲取一個DOM對象，并初始化為ECharts對象。構建圖表數據。letmydata=[];$.each(data,function(index,item){//jQuery的循環(huán)函數mydata.push(item.numberOfFarmers);//將參與人數放入數組}); 巡回指導，提示關鍵點分組解決常見問題20分鐘配置option配置項letoption={ title:{ text:'組織農戶技術培訓', subtext:'數據匯總', left:'center', textStyle:{ color:'#ffffff' } }, xAxis:{ type:'category', data:['1月','2月','3月','4月','5月','6月','7月','8月','9月','10月','11月','12月'], axisLabel:{ textStyle:{ color:"#ebf8ac"http://x軸文字顏色 } }, axisLine:{ lineStyle:{ color:'#01FCE3'//x軸線顏色 } } }, yAxis:{ type:'value', name:'參與人數', axisLabel:{ formatter:'{value}人', textStyle:{ color:"#2EC7C9"http://y軸文字顏色 } }, axisLine:{ lineStyle:{ color:'#01FCE3'//y軸線顏色 } } }, tooltip:{ trigger:'axis' }, grid:{ top:'middle', left:'3%', right:'4%', bottom:'3%', top:'20%', containLabel:true//當坐標軸上的文字過大時，視圖不會產生偏移 }, toolbox:{ show:true, feature:{ mark:{ show:true }, dataView:{ show:true, readOnly:false }, magicType:{ show:true, type:['line','bar'] }, restore:{ show:true }, saveAsImage:{ show:true } } }, series:[{ name:'參與人數', data:mydata, type:'line', smooth:true, itemStyle:{ normal:{ color:'#F7AD3E', } }, lineStyle:{ normal:{ width:5, color:{ type:'linear', colorStops:[{ offset:0, color:'#F8B854'//漸變開始處（0%）的顏色 }, { offset:0.4, color:'#DE801C'//漸變40%處的顏色 },{ offset:1, color:'#DE801C'//漸變結束處（100%）的顏色 }