PAGE10PAGE大數(shù)據(jù)可視化分析課程教案首頁(yè)11-2一、核心要素章節(jié)名稱項(xiàng)目5智慧農(nóng)業(yè)大屏ECharts圖表插入5.3ECharts圖表配置項(xiàng)（一）教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第11周-2授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)掌握ECharts直角坐標(biāo)系網(wǎng)格、坐標(biāo)軸、區(qū)域縮放的核心配置項(xiàng)理解標(biāo)題、圖例、工具欄組件的功能與配置方法熟悉配置項(xiàng)間的協(xié)同工作原理能力目標(biāo)能獨(dú)立配置常見(jiàn)圖表布局與交互功能能根據(jù)業(yè)務(wù)需求定制智慧農(nóng)業(yè)大屏的圖表樣式素質(zhì)目標(biāo)通過(guò)演示項(xiàng)目及相關(guān)文檔，理解并梳理項(xiàng)目的業(yè)務(wù)功能結(jié)構(gòu)。激發(fā)學(xué)生對(duì)數(shù)據(jù)可視化技術(shù)的探索興趣培養(yǎng)嚴(yán)謹(jǐn)?shù)拇a調(diào)試習(xí)慣教學(xué)內(nèi)容主要內(nèi)容ECharts圖表配置項(xiàng)：標(biāo)題、圖例、工具欄組件重點(diǎn)直角坐標(biāo)系網(wǎng)格位置計(jì)算邏輯、legend圖例與series的關(guān)聯(lián)規(guī)則難點(diǎn)多坐標(biāo)軸混合布局時(shí)的定位沖突、百分比定位與像素定位的混合使用教法改革教學(xué)方法問(wèn)答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問(wèn)題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配一、課程導(dǎo)入?展示智慧農(nóng)業(yè)大屏原型圖，提出需求："如何通過(guò)ECharts配置實(shí)現(xiàn)作物生長(zhǎng)監(jiān)測(cè)圖的動(dòng)態(tài)展示？"教師演示，引導(dǎo)思考明確本節(jié)課的目標(biāo)效果5分鐘5.3.1直角坐標(biāo)系網(wǎng)格及坐標(biāo)軸直角坐標(biāo)系的圖表是指帶有x軸和y軸的圖表，常見(jiàn)的直角坐標(biāo)系的圖表有柱狀圖、折線圖、散點(diǎn)圖等。對(duì)于直角坐標(biāo)系的圖表，通用配置如下。1．網(wǎng)格網(wǎng)格（grid）組件用于控制直角坐標(biāo)系的布局和大小。它是圖表繪制的容器，x軸和y軸都是基于這個(gè)容器進(jìn)行繪制的。通過(guò)設(shè)置網(wǎng)格組件的相關(guān)配置項(xiàng)，可以控制坐標(biāo)系的顯示與否、邊框?qū)挾?，以及其在圖表中的位置和大小。具體實(shí)現(xiàn)代碼如下。varoption={grid:{show:true,//顯示grid容器borderWidth:10,//設(shè)置grid容器的邊框?qū)挾萣orderColor:'red',//設(shè)置grid容器的邊框顏色left:100,//設(shè)置grid容器的位置top:100,width:300,//設(shè)置grid容器的大小height:150}}演示編寫(xiě)規(guī)則，講解學(xué)生觀看演示并思考10分鐘5.3.1直角坐標(biāo)系網(wǎng)格及坐標(biāo)軸2．坐標(biāo)軸在布局上，x軸的位置可以設(shè)置為頂部（top）或底部（bottom），而y軸的位置可以設(shè)置為左側(cè)（left）或右側(cè)（right）。這些設(shè)置允許用戶根據(jù)自身需求靈活調(diào)整，具體實(shí)現(xiàn)代碼如下。varoption={xAxis:{type:'category',data:xDataArr,position:'top'},yAxis:{type:'value',position:'right'}}演示編寫(xiě)規(guī)則，講解學(xué)生觀看演示并思考15分鐘5.3.1直角坐標(biāo)系網(wǎng)格及坐標(biāo)軸3．區(qū)域縮放xAxisIndex屬性和yAxisIndex屬性用于指定dataZoom組件控制的x軸和y軸，通常將其屬性值設(shè)置為0，表示控制第一個(gè)x軸或y軸。而start屬性和end屬性用于定義數(shù)據(jù)窗口范圍的初始狀態(tài)，它們以百分比的形式表示數(shù)據(jù)窗口的起始位置和結(jié)束位置，從而控制數(shù)據(jù)在圖表中的初始顯示范圍。具體實(shí)現(xiàn)代碼如下。varoption={xAxis:{type:'category',data:xDataArr},yAxis:{type:'value'},dataZoom:[{type:'slider',xAxisIndex:0},{type:'slider',yAxisIndex:0,start:0,end:80}]}演示編寫(xiě)規(guī)則，講解學(xué)生觀看演示并思考15分鐘5.3.2標(biāo)題與圖例1．標(biāo)題title為標(biāo)題組件，包含主標(biāo)題和副標(biāo)題，其常見(jiàn)設(shè)置項(xiàng)如下。title.show：是否顯示標(biāo)題組件。title.text：主標(biāo)題文本，支持使用“\n”換行。title.textStyle.color：主標(biāo)題文字的顏色。title.borderColor：標(biāo)題的邊框顏色。title.borderWidth：標(biāo)題的邊框線寬。title.borderRadius：圓角半徑，單位為px，支持傳入數(shù)組分別指定4個(gè)圓角半徑。title.left：title組件與容器左側(cè)的距離。left屬性值可以是具體的像素值，也可以是相對(duì)于容器高寬的百分比，還可以是

'left'、'center'、'right'。title.top：title組件與容器頂部的距離。top屬性值的設(shè)置left屬性值的類似。教師講解學(xué)生觀看演示并思考10分鐘5.3.2標(biāo)題與圖例根據(jù)目標(biāo)要求進(jìn)行實(shí)際操作演示編寫(xiě)規(guī)則，講解學(xué)生觀看演示并思考10分鐘5.3.2標(biāo)題與圖例（2）圖例legend為圖例，用于篩選類別，需要和series配合使用。legend中的data是一個(gè)數(shù)組，且data數(shù)組的值需要與series中某組數(shù)據(jù)的name屬性值一致。具體實(shí)現(xiàn)代碼如下。varoption={legend:{data:['語(yǔ)文','數(shù)學(xué)']},xAxis:{type:'category',data:['張三','李四','王五','小紅','小明','小花','二妞','大強(qiáng)']},yAxis:{type:'value'},series:[{name:'語(yǔ)文',type:'bar',data:[88,92,63,77,94,80,72,86]},{name:'數(shù)學(xué)',type:'bar',data:[93,60,61,82,95,70,71,86]}]}顯示效果如圖5-14所示。圖5-14圖例設(shè)置示例教師講解學(xué)生觀看演示并思考10分鐘六、綜合練習(xí)與總結(jié)?總結(jié)本節(jié)課知識(shí)點(diǎn)及重難點(diǎn)?？偨Y(jié)知識(shí)點(diǎn)跟隨教師回顧5分鐘

大數(shù)據(jù)可視化分析課程教案首頁(yè)11-2一、核心要素章節(jié)名稱項(xiàng)目5智慧農(nóng)業(yè)大屏ECharts圖表插入5.3ECharts圖表配置項(xiàng)（二）教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第11周-2授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)掌握ECharts柱狀圖的配置項(xiàng)（yAxis、series）及工具欄（toolbox）的使用方法理解ECharts主題的加載與自定義流程能力目標(biāo)通過(guò)案例分析、任務(wù)驅(qū)動(dòng)，完成從數(shù)據(jù)準(zhǔn)備到圖表渲染的全流程開(kāi)發(fā)通過(guò)小組協(xié)作解決主題配置與數(shù)據(jù)綁定的技術(shù)難點(diǎn)素質(zhì)目標(biāo)培養(yǎng)利用可視化技術(shù)解決農(nóng)業(yè)實(shí)際問(wèn)題的意識(shí)增強(qiáng)對(duì)數(shù)據(jù)驅(qū)動(dòng)決策的認(rèn)知與興趣培養(yǎng)團(tuán)隊(duì)協(xié)作能力及問(wèn)題解決能力教學(xué)內(nèi)容主要內(nèi)容ECharts圖表配置項(xiàng)重點(diǎn)ECharts柱狀圖的核心配置（數(shù)據(jù)綁定、多系列顯示）工具欄（dataZoom、magicType）的交互功能實(shí)現(xiàn)難點(diǎn)自定義主題的引入與調(diào)試教法改革教學(xué)方法問(wèn)答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問(wèn)題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配導(dǎo)入課堂展示未應(yīng)用樣式的網(wǎng)頁(yè)與美化后的對(duì)比圖，提問(wèn)：“如何高效為不同元素設(shè)置樣式？”引入CSS選擇器的核心作用：精準(zhǔn)定位元素，提升代碼復(fù)用性。引導(dǎo)分享學(xué)生互動(dòng)討論5分鐘5.3.3工具欄toolbox是ECharts提供的工具欄，內(nèi)置導(dǎo)出圖片、數(shù)據(jù)視圖、重置、數(shù)據(jù)區(qū)域縮放、動(dòng)態(tài)類型切換5個(gè)工具。工具欄的按鈕配置在feature節(jié)點(diǎn)之下。具體實(shí)現(xiàn)代碼如下。varoption={toolbox:{feature:{saveAsImage:{},//將圖表保存為圖片dataView:{},//設(shè)置是否顯示原始數(shù)據(jù)restore:{},//還原圖表dataZoom:{},//數(shù)據(jù)縮放magicType:{//將圖表在不同類型之間切換,圖表的轉(zhuǎn)換需要數(shù)據(jù)的支持type:['bar','line']}}}}顯示效果如圖5-15所示。圖5-15工具欄示例教師講解學(xué)生觀看演示并思考10分鐘5.3.3工具欄根據(jù)目標(biāo)要求進(jìn)行實(shí)際操作，完成工具欄的顯示巡回指導(dǎo)學(xué)生自主操作10分鐘5.3.4主題添加1．默認(rèn)主題定。varchart=echarts.init(dom,'light')varchart=echarts.init(dom,'dark')2．自定義主題步驟1：在主題編輯器中編輯主題。在主題編輯器中，可以定義主題中的基本配置、視覺(jué)映射、坐標(biāo)軸、圖例、工具欄、提示框、時(shí)間軸、數(shù)據(jù)縮放、折線圖、K線圖、力導(dǎo)圖等等。步驟2：下載主題。在線編輯主題完成后，可以單擊“下載主題”按鈕，下載主題的js文件，如圖5-16所示。圖5-16下載主題步驟3：引入主題的js文件。<scriptsrc="js/echarts.min.js"></script><scriptsrc="js/itcast.js"></script>其中的itcast.js文件為下載的主題文件。步驟4：在init()方法中指定主題。varmCharts=echarts.init(document.querySelector("div"),'itcast')init()方法中的第二個(gè)參數(shù)“’itcast’”是主題的名稱，這個(gè)名稱可以從itcast.js文件的代碼中獲取，如圖5-17所示。圖5-17在itcast.js文件的代碼中獲取主題名稱教師講解學(xué)生觀看演示并思考15分鐘5.3.4主題添加根據(jù)目標(biāo)要求進(jìn)行實(shí)際操作，自