PAGE21PAGE大數(shù)據(jù)可視化分析課程教案首頁10-1一、核心要素章節(jié)名稱項(xiàng)目5智慧農(nóng)業(yè)大屏ECharts圖表插入任務(wù)5.2ECharts常用圖表5.2.4繪制散點(diǎn)圖5.2.5繪制儀表盤圖教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第10周-1授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)掌握ECharts地圖可視化的核心流程及核心配置項(xiàng)；掌握散點(diǎn)圖、儀表盤圖的結(jié)構(gòu)與作用；了解散點(diǎn)圖和地圖的結(jié)合。能力目標(biāo)能獨(dú)立完成加載JSON數(shù)據(jù)能通過控制臺(tái)排查常見錯(cuò)誤能結(jié)合虛擬數(shù)據(jù)集（二維數(shù)組）實(shí)現(xiàn)散點(diǎn)圖素質(zhì)目標(biāo)通過參數(shù)調(diào)試和效果優(yōu)化，樹立“數(shù)據(jù)驅(qū)動(dòng)決策”的實(shí)踐價(jià)值觀。通過多維數(shù)組實(shí)現(xiàn)散點(diǎn)效果，激發(fā)學(xué)生對(duì)數(shù)據(jù)可視化的探索興趣。教學(xué)內(nèi)容主要內(nèi)容ECharts常用圖表散點(diǎn)圖、儀表盤圖的制作。重點(diǎn)散點(diǎn)圖的繪制與基本設(shè)置。難點(diǎn)使用ECharts在HTML界面中繪制散點(diǎn)圖，多指針儀表盤圖。教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過課堂討論提出問題和相關(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)入?展示實(shí)際案例（如性別,身高,體重,統(tǒng)計(jì)數(shù)據(jù)樣本），說明散點(diǎn)圖可視化在數(shù)據(jù)分析中的直觀性和應(yīng)用價(jià)值提出課程目標(biāo)：掌握Echarts散點(diǎn)圖繪制的基本流程和常見的效果配置教師演示，引導(dǎo)思考明確本節(jié)課的目標(biāo)效果5分鐘二、散點(diǎn)圖的制作散點(diǎn)圖的實(shí)現(xiàn)步驟：1.步驟1ECharts最基本的代碼結(jié)構(gòu)2.步驟2準(zhǔn)備x軸和y軸的數(shù)據(jù)3.步驟3準(zhǔn)備配置項(xiàng)4.步驟4調(diào)整配置項(xiàng),脫離0值比例實(shí)現(xiàn)效果：演示散點(diǎn)圖繪制的方法，講解學(xué)生觀看演示并思考10分鐘三、散點(diǎn)圖的常見效果配置散點(diǎn)圖的常見效果配置如下：1.氣泡圖效果要能夠達(dá)到氣泡圖的效果,其實(shí)就是讓每一個(gè)散點(diǎn)的大小不同,讓每一個(gè)散點(diǎn)的顏色不同symbolSize控制散點(diǎn)的大小itemStyle.color控制散點(diǎn)的顏色這兩個(gè)配置項(xiàng)都支持固定值的寫法,也支持回調(diào)函數(shù)的寫法?；卣{(diào)函數(shù)寫法效果如下：教師講解演示四種引用方式，對(duì)比代碼結(jié)構(gòu)與維護(hù)成本，學(xué)生觀看演示并思考15分鐘四、漣漪動(dòng)畫效果散點(diǎn)圖的漣漪動(dòng)畫效果：type:effectScatter將type的值從scatter設(shè)置為rippleEffecteffectScatter就能夠產(chǎn)生漣漪動(dòng)畫的效果rippleEffect可以配置漣漪動(dòng)畫的大小實(shí)現(xiàn)效果如下：showEffectOnshowEffectOn可以控制漣漪動(dòng)畫在什么時(shí)候產(chǎn)生,它的可選值有兩個(gè):render代表界面渲染完成就開始漣漪動(dòng)畫emphasis代表鼠標(biāo)移過某個(gè)散點(diǎn)的時(shí)候,該散點(diǎn)開始漣漪動(dòng)畫實(shí)現(xiàn)效果如下：教師講解步驟學(xué)生操作15分鐘五、散點(diǎn)圖特點(diǎn)結(jié)合地圖。散點(diǎn)圖也經(jīng)常結(jié)合地圖來進(jìn)行地圖區(qū)域的標(biāo)注,這個(gè)效果將在講解地圖時(shí)實(shí)現(xiàn)散點(diǎn)圖可以幫助我們推斷出不同維度數(shù)據(jù)之間的相關(guān)性。比如上述例子中,看得出身高和體重是正相關(guān),身高越高,體重越重。散點(diǎn)圖也經(jīng)常用在地圖的標(biāo)注上。教師講解示范學(xué)生觀看演示并操作5分鐘六、直角坐標(biāo)系的常見配置直角坐標(biāo)系的圖表指的是帶有x軸和y軸的圖表,常見的直角坐標(biāo)系的圖表有:柱狀圖、折線圖、散點(diǎn)圖。針對(duì)于直角坐標(biāo)系的圖表,有一些通用的配置。配置1:網(wǎng)格gridgrid是用來控制直角坐標(biāo)系的布局和大小,x軸和y軸就是在grid的基礎(chǔ)上進(jìn)行繪制的。顯示gridshow:truegrid的邊框borderWidth:10grid的位置和大小lefttoprightwidthheight配置2:坐標(biāo)軸axis坐標(biāo)軸分為x軸和y軸,一個(gè)grid中最多有兩種位置的x軸和y軸。坐標(biāo)軸類型typevalue:數(shù)值軸,自動(dòng)會(huì)從目標(biāo)數(shù)據(jù)中讀取數(shù)據(jù)category:類目軸,該類型必須通過data設(shè)置類目數(shù)據(jù)坐標(biāo)軸位置xAxis:可取值為top或者bottomyAxis:可取值為left或者right配置3:區(qū)域縮放dataZoomdataZoom用于區(qū)域縮放,對(duì)數(shù)據(jù)范圍過濾,x軸和y軸都可以擁有,dataZoom是一個(gè)數(shù)組,意味著可以配置多個(gè)區(qū)域縮放器。實(shí)現(xiàn)效果如下：教師講解示范學(xué)生觀看演示并操作20分鐘七、綜合練習(xí)與總結(jié)知識(shí)梳理：散點(diǎn)數(shù)據(jù)加載流程→常見效果配置→散點(diǎn)圖的特點(diǎn)拓展方向：直角坐標(biāo)系的常見配置總結(jié)常見錯(cuò)誤記錄拓展思考題10分鐘

大數(shù)據(jù)可視化分析課程教案首頁10-1一、核心要素章節(jié)名稱項(xiàng)目5智慧農(nóng)業(yè)大屏ECharts圖表插入任務(wù)5.2ECharts常用圖表任務(wù)實(shí)施5.3繪制經(jīng)濟(jì)作物占比圖任務(wù)實(shí)施5.4繪制費(fèi)用支出占比環(huán)形圖教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第10周-1授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)1.通過繪制經(jīng)濟(jì)作物占比圖和費(fèi)用支出占比環(huán)形圖圖表操作，了解ECharts的圖表的知識(shí)。能力目標(biāo)1.能使用Echarts在HTML界面中繪制儀表盤圖；2.能將JSON數(shù)據(jù)加載到圖表中;3.能結(jié)合實(shí)際數(shù)據(jù)繪制項(xiàng)目相關(guān)圖形。素質(zhì)目標(biāo)1.通過按時(shí)完成老師布置的工單任務(wù)，規(guī)范代碼的書寫，培養(yǎng)學(xué)生職業(yè)操守和職業(yè)素養(yǎng);2.通過翻閱Echarts官方文檔，培養(yǎng)學(xué)生的探索精神;3.能按需求定制新的圖表并實(shí)現(xiàn)，培養(yǎng)學(xué)生的創(chuàng)新精神教學(xué)內(nèi)容主要內(nèi)容ECharts常用圖表儀表盤圖和環(huán)形圖的制作重點(diǎn)儀表盤圖的繪制與設(shè)置。難點(diǎn)結(jié)合實(shí)際數(shù)據(jù)繪制項(xiàng)目相關(guān)圖形。教法改革教學(xué)方法問答法/范例教學(xué)法教學(xué)手段（1）通過課堂討論提出問題和相關(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)入課堂發(fā)布本節(jié)課任務(wù)實(shí)施目標(biāo)及要求引導(dǎo)分享學(xué)生互動(dòng)討論5分鐘知識(shí)準(zhǔn)備-ECharts與JSON結(jié)構(gòu)回顧Echarts圖表結(jié)構(gòu)（引入、準(zhǔn)備dom、初始化、配置option、完成設(shè)置）②JSON數(shù)據(jù)結(jié)構(gòu)規(guī)范教師講解理解數(shù)據(jù)層級(jí)關(guān)系15分鐘任務(wù)分解-經(jīng)濟(jì)作物占比圖數(shù)據(jù)轉(zhuǎn)換流程（Excel→JSON）

main2.js核心代碼邏輯（初始化圖表、配置option、動(dòng)態(tài)監(jiān)聽）；動(dòng)畫函數(shù)index02_animation(myChart,ydata)的作用（實(shí)現(xiàn)餅圖的動(dòng)畫效果）分析執(zhí)行步驟：1.準(zhǔn)備經(jīng)濟(jì)作物占比JSON數(shù)據(jù)；2.創(chuàng)建并引用JS腳本文件main2.js和main7.js；3.參考“03_pie動(dòng)畫餅圖示例.html”在main2.js中繪制餅圖；4.參考“07_pie自定義餅圖示例.html”在main7.js中繪制環(huán)形餅圖。教師引導(dǎo)學(xué)生思考學(xué)生觀看演示并思考15分鐘實(shí)踐操作-經(jīng)濟(jì)作物占比圖和費(fèi)用支出占比圖開發(fā)實(shí)戰(zhàn)根據(jù)以下步驟進(jìn)行實(shí)際開發(fā)：準(zhǔn)備地區(qū)合作單位JSON數(shù)據(jù)在FarmingCenterScreen項(xiàng)目的data文件夾下創(chuàng)建“cashcropSummary.json”文件和“cost.json”文件。將Excel“農(nóng)業(yè)數(shù)據(jù)平臺(tái)_經(jīng)濟(jì)作物_左中_index02.xlsx”，轉(zhuǎn)換為“經(jīng)濟(jì)作物占比”的JSON數(shù)組結(jié)構(gòu)。轉(zhuǎn)換過程中，注意文件的預(yù)處理。創(chuàng)建并引用JS腳本文件main2.js和main7.js在js文件夾下創(chuàng)建main2.js和main7.js，其中main2.js用于繪制經(jīng)濟(jì)作物占比圖，main7.js用于展示費(fèi)用支出占比圖；在main2.js和main7.js中分別創(chuàng)建functionindex02()函數(shù)和functionindex07()函數(shù)，并分別使用getJSON()加載JSON；在main.js中調(diào)用函數(shù)index02()和index07()；在index.html中引入坐標(biāo)的js文件、main2.js和main7.js文件。<scriptsrc="js/main2.js"></script><scriptsrc="js/main7.js"></script>參考“03_pie動(dòng)畫餅圖示例.html”在main2.js中繪制餅圖，參考“07_pie自定義餅圖示例.html”在main7.js中繪制環(huán)形餅圖。通過ID獲取一個(gè)DOM，并初始化成ECharts對(duì)象；構(gòu)建圖表中數(shù)據(jù)；配置圖表參數(shù)；option={ color:color, legend:{ orient:"vartical", x:"left", top:"center", left:"53%", bottom:"0%", itemWidth:8, itemHeight:8, textStyle:{ color:'#fff' }, formatter:function(name){ return''+name } }, series:[{ type:'pie', clockwise:false,//餅圖的扇區(qū)是否是順時(shí)針排布 minAngle:2,//最小的扇區(qū)角度（0~360） radius:["20%","60%"], center:["30%","45%"], avoidLabelOverlap:false, itemStyle:{//圖形樣式 normal:{ borderColor:'#ffffff', borderWidth:1, }, }, label:{ normal:{ show:false, position:'center', formatter:'{text|}\n{c}(z3jilz61osys%)', rich:{ text:{ color:"#fff", fontSize:14, align:'center', verticalAlign:'middle', padding:8 }, value:{ color:"#8693F3", fontSize:24, align:'center', verticalAlign:'middle', }, } }, emphasis:{ show:true, textStyle:{ fontSize:24, } } },