PAGE10PAGE大數(shù)據(jù)可視化分析課程教案首頁(yè)8-1一、核心要素章節(jié)名稱項(xiàng)目4智慧農(nóng)業(yè)大屏數(shù)據(jù)傳輸任務(wù)4.3JSON數(shù)據(jù)結(jié)構(gòu)4.3.1JSON介紹4.3.2JSON數(shù)據(jù)轉(zhuǎn)換方法教學(xué)課時(shí)2授課班級(jí)大數(shù)據(jù)技術(shù)2401班授課時(shí)間第8周-1授課地點(diǎn)介夫樓307教學(xué)目標(biāo)知識(shí)目標(biāo)掌握J(rèn)SON相關(guān)背景知識(shí)；掌握J(rèn)SON數(shù)據(jù)結(jié)構(gòu)；掌握J(rèn)SON數(shù)據(jù)轉(zhuǎn)換方法。能力目標(biāo)能熟練組織JSON數(shù)據(jù)結(jié)構(gòu)；能通過(guò)多種工具進(jìn)行JSON數(shù)據(jù)轉(zhuǎn)換；能結(jié)合目標(biāo)任務(wù)處理得到合適的JSON數(shù)據(jù)。素質(zhì)目標(biāo)通過(guò)對(duì)比XML與JSON的結(jié)構(gòu)差異，強(qiáng)調(diào)標(biāo)準(zhǔn)化數(shù)據(jù)格式對(duì)國(guó)家“數(shù)字政府”建設(shè)的基礎(chǔ)性作用，培養(yǎng)精益求精的職業(yè)精神；通過(guò)JSON數(shù)據(jù)轉(zhuǎn)換中的加密處理，培養(yǎng)數(shù)據(jù)安全與公民隱私?意識(shí)。教學(xué)內(nèi)容主要內(nèi)容JSON數(shù)據(jù)結(jié)構(gòu)重點(diǎn)JSON數(shù)據(jù)轉(zhuǎn)換方法難點(diǎn)JSON數(shù)據(jù)轉(zhuǎn)換方法教法改革教學(xué)方法問(wèn)答法/范例教學(xué)法教學(xué)手段（1）通過(guò)課堂討論提出問(wèn)題和相關(guān)視頻學(xué)習(xí)，活躍課堂氣氛并激發(fā)學(xué)生的學(xué)習(xí)興趣；（2）教材、電子課件、超星信息化教學(xué)。教學(xué)反思學(xué)生能準(zhǔn)確描述JSON語(yǔ)法規(guī)則（如鍵名雙引號(hào)、值類型等），但在處理真實(shí)業(yè)務(wù)數(shù)據(jù)（如用戶隱私字段脫敏）時(shí)缺乏敏感度，存在將未加密的敏感數(shù)據(jù)直接寫入JSON的教學(xué)案例。改進(jìn)方法：在語(yǔ)法教學(xué)中植入數(shù)據(jù)安全場(chǎng)景。

二、教學(xué)設(shè)計(jì)教學(xué)步驟教學(xué)內(nèi)容與情境設(shè)計(jì)教師活動(dòng)學(xué)生活動(dòng)時(shí)間分配一、課程導(dǎo)入?展示實(shí)際案例（如智慧農(nóng)業(yè)大屏簡(jiǎn)介JSON數(shù)據(jù)），說(shuō)明JSON數(shù)據(jù)在數(shù)據(jù)可視化中的重要作用提出課程目標(biāo)：掌握J(rèn)SON背景知識(shí)、數(shù)據(jù)格式及轉(zhuǎn)換方法教師演示，引導(dǎo)思考明確本節(jié)課的目標(biāo)效果5分鐘二、JSON數(shù)據(jù)結(jié)構(gòu)JSON介紹JSON(JavaScriptObjectNotation,JS對(duì)象簡(jiǎn)譜)是一種輕量級(jí)的數(shù)據(jù)交換格式。它基于ECMAScript(EuropeanComputerManufacturersAssociation,歐洲計(jì)算機(jī)協(xié)會(huì)制定的JS規(guī)范)的一個(gè)子集，采用完全獨(dú)立于編程語(yǔ)言的文本格式來(lái)存儲(chǔ)和表示數(shù)據(jù)。簡(jiǎn)潔、清晰的層次結(jié)構(gòu)，使得JSON成為理想的數(shù)據(jù)交換語(yǔ)言。JSON易于人閱讀和編寫，同時(shí)也易于機(jī)器解析和生成，能夠有效地提高網(wǎng)絡(luò)傳輸效率。對(duì)比了解，JavaScript自定義對(duì)象與JSON格式的數(shù)據(jù)的區(qū)別。(1)JavaScript自定義對(duì)象。varoMan={name:'Tom',age:16,talk:function(s){alert('我會(huì)說(shuō)'+s);}}(2)JSON格式的數(shù)據(jù)。{"name":"Tom","age":18}JSON是一種輕量級(jí)的數(shù)據(jù)交換格式。采用完全獨(dú)立于編程語(yǔ)言的文本格式來(lái)存儲(chǔ)和表示數(shù)據(jù)。簡(jiǎn)潔和清晰的層次結(jié)構(gòu)使得JSON成為理想的數(shù)據(jù)交換語(yǔ)言。對(duì)比JS自定義對(duì)象的方法和JSON數(shù)據(jù)格式可以看出差別。演示地圖繪制的方法，講解學(xué)生觀看演示并思考15分鐘三、課堂練習(xí)課堂練習(xí)：同學(xué)們從日常生活中和學(xué)習(xí)生活中的場(chǎng)景，構(gòu)建出數(shù)據(jù)結(jié)構(gòu)，分別按照J(rèn)avaScript自定義對(duì)象的方法和JSON格式的數(shù)據(jù)進(jìn)行表示。參考代碼：日常生活場(chǎng)景示例：??購(gòu)物清單??1.JavaScript自定義對(duì)象表示//購(gòu)物清單對(duì)象constshoppingList={store:"家樂(lè)福超市",date:"2024-03-15",items:[{name:"牛奶",quantity:2,price:4.5,purchased:false,category:"乳制品"},{name:"雞蛋",quantity:1,price:12.8,purchased:true,//已購(gòu)買category:"生鮮"},{name:"蘋果",quantity:3,price:6.5,purchased:false,category:"水果"}],//計(jì)算總價(jià)方法calculateTotal:function(){returnthis.items.reduce((sum,item)=>sum+item.quantity*item.price,0);}};console.log(shoppingList.calculateTotal());//輸出:2*4.5+1*12.8+3*6.5=36.82.JSON格式表示{"store":"家樂(lè)福超市","date":"2024-03-15","items":[{"name":"牛奶","quantity":2,"price":4.5,"purchased":false,"category":"乳制品"},{"name":"雞蛋","quantity":1,"price":12.8,"purchased":true,"category":"生鮮"},{"name":"蘋果","quantity":3,"price":6.5,"purchased":false,"category":"水果"}]}學(xué)習(xí)生活場(chǎng)景示例：??課程表??1.JavaScript自定義對(duì)象表示//課程表對(duì)象constcourseSchedule={semester:"2024春季學(xué)期",student:{name:"李小明",major:"計(jì)算機(jī)科學(xué)與技術(shù)",class:"CS2021-3班"},courses:[{name:"高等數(shù)學(xué)",time:{day:"周一",start:"08:00",end:"09:40"},location:"理教203",teacher:"王教授",credit:4},{name:"大學(xué)物理實(shí)驗(yàn)",time:{day:"周三",start:"14:00",end:"17:00"},location:"物理實(shí)驗(yàn)樓B座305",teacher:"張副教授",credit:2,isLab:true}],//獲取指定日期的課程getCoursesByDay:function(day){returnthis.courses.filter(course=>course.time.day===day);}};console.log(courseSchedule.getCoursesByDay("周一"));//輸出周一課程2.JSON格式表示{"semester":"2024春季學(xué)期","student":{"name":"李小明","major":"計(jì)算機(jī)科學(xué)與技術(shù)","class":"CS2021-3班"},"courses":[{"name":"高等數(shù)學(xué)","time":{"day":"周一","start":"08:00","end":"09:40"},"location":"理教203","teacher":"王教授","credit":4},{"name":"大學(xué)物理實(shí)驗(yàn)","time":{"day":"周三","start":"14:00","end":"17:00"},"location":"物理實(shí)驗(yàn)樓B座305","teacher":"張副教授","credit":2,"isLab":true}]}教師講解演示四種引用方式，對(duì)比代碼結(jié)構(gòu)與維護(hù)成本，學(xué)生觀看演示并思考20分鐘五、JSON數(shù)據(jù)轉(zhuǎn)換方法Excel中的數(shù)據(jù)結(jié)構(gòu)如圖所示。第2行對(duì)應(yīng)key鍵,需要結(jié)合英文雙引號(hào)使用,如"name"、"stuNO"、"sex"、"age"、"enable"。每個(gè)單元格對(duì)應(yīng)的value值也需要結(jié)合英文雙引號(hào)使用。"孔貞","10201","男",18,true"姜萬(wàn)敏","10202","女",20,false"張菜菜","10223","男",19,true·第3~5行各對(duì)應(yīng)一個(gè)對(duì)象，key鍵和value值對(duì)應(yīng)形成鍵值對(duì)，存放于花括號(hào)中。{"name":"孔貞","stuNO":"10201","sex":"男","age":18,"enable":true}一整張表對(duì)應(yīng)一組數(shù)據(jù)，存放于英文中括號(hào)中，內(nèi)含多個(gè)對(duì)象。[{"name":"孔貞","stuNO":10201,"sex":"男","age":18,"enable":"true"},{"name":"姜萬(wàn)敏","stuNO":10202,"sex":"女","age":20,"enable":"false"},{"name":"張菜菜","stuNO":10223,"sex":"男","age":19,"enable":"true"}]教師講解示范學(xué)生觀看演示并操作15分鐘六、JSON數(shù)據(jù)轉(zhuǎn)換工具與轉(zhuǎn)換步驟可以通過(guò)ECharts工具進(jìn)行Excel數(shù)據(jù)到JSON數(shù)據(jù)的轉(zhuǎn)換。步驟1：整理Excel數(shù)據(jù)結(jié)構(gòu)目標(biāo)格式要求行存儲(chǔ)格式（ECharts常用）：json[{"category":"A","value":20},{"category":"B","value":35}]列存儲(chǔ)格式（適用于多維數(shù)據(jù)）：json{"categories":["A","B","C"],"values":[20,35,45]}Excel規(guī)范示例：月份 銷售額 成本1月 12000 80002月 15000 9500步驟2：數(shù)據(jù)轉(zhuǎn)換方法方法一：手動(dòng)轉(zhuǎn)換（適合教學(xué)演示）Excel→CSV：另存為data.csv，格式：月份,銷售額,成本1月,12000,80002月,15000,9500CSV→JSON：使用在線轉(zhuǎn)換工具（如Aconvert）或代碼處理：javascriptconstcsv=`月份,銷售額,成本\n1月,12000,8000\n2月,15000,9500`;constjson=csv.split('\n').slice(1).map(line=>{const[month,sales,cost]=line.split(',');return{month,sales:+sales,cost:+cost};});方法二：Python自動(dòng)化（推薦批量處理）pythonimportpandasaspd#讀取Excel文件df=pd.read_excel("data.xlsx")#轉(zhuǎn)換為行式JSONdf.to_json("output.json",orient="records",force_ascii=False)#轉(zhuǎn)換為列式JSON（適合ECharts數(shù)據(jù)集）json_data={"columns":df.columns.tolist(),"data":df.values.tolist()}方法三：Excel插件工具使用PowerQuery（Excel內(nèi)置）：數(shù)據(jù)→從表格/區(qū)域→創(chuàng)建表轉(zhuǎn)換→轉(zhuǎn)換為JSON（需自定義M語(yǔ)言腳本）powerquery=Json.FromValue(Table.ToRecords(Excel.CurrentWorkbook(){[Name="Table1"]}[Content]))步驟3：JSON數(shù)據(jù)驗(yàn)證驗(yàn)證工具JSONLint（語(yǔ)法校驗(yàn)）：EChartsDataTool（結(jié)構(gòu)適配性檢查）：javascript//測(cè)試數(shù)據(jù)加載$.getJSON('data.json',function(data){myChart.setOption({dataset:{source:data},xAxis:{type:'category'},yAxis:{type:'value'},series:[{type:'bar'}]});});教師講解示范學(xué)生觀看演示并操作15分鐘七、綜合練習(xí)與總結(jié)?知識(shí)梳理：JSON數(shù)據(jù)格式、JSON數(shù)據(jù)轉(zhuǎn)換方法拓展方向：XML轉(zhuǎn)換為JSON總結(jié)常見錯(cuò)誤記錄拓展思考題5分鐘

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

②

main5.js核心代碼邏輯（初始化圖表、配置option、動(dòng)態(tài)監(jiān)聽）

③工具函數(shù)getSeries()的作用（生成地圖連線與散點(diǎn)數(shù)據(jù)）分析執(zhí)行步驟：1.準(zhǔn)備地區(qū)合作單位JSON數(shù)據(jù)2.創(chuàng)建并引用JS腳本文件main5.js和main4.js3.參考“13_map地圖示例.html”在main5.js中繪制地圖4.在main4.js中動(dòng)態(tài)構(gòu)建標(biāo)題內(nèi)容教師引導(dǎo)學(xué)生思考學(xué)生觀看演示并思考15分鐘實(shí)踐操作-地圖開發(fā)實(shí)戰(zhàn)根據(jù)以下步驟進(jìn)行實(shí)際開發(fā)：準(zhǔn)備地區(qū)合作單位JSON數(shù)據(jù)在FarmingCenterScreen項(xiàng)目的data文件夾下創(chuàng)建“partnersRegionSummary.json”文件和“partnersSummary.json”文件。將Excel“農(nóng)業(yè)數(shù)據(jù)平臺(tái)_地區(qū)合作單位.xlsx”，轉(zhuǎn)換為“地區(qū)合作單位”的JSON數(shù)組結(jié)構(gòu)，其中“partnersRegionSummary.json”文件存儲(chǔ)各地區(qū)合作單位數(shù)據(jù)，“partnersSummary.json”文件中存儲(chǔ)合作單位匯總數(shù)據(jù)。創(chuàng)建并引用JS腳本文件main5.js和main4.js在js文件夾下創(chuàng)建main5.js和main4.js，其中main5.js用于繪制地區(qū)合作單位業(yè)務(wù)地圖，main4.js用于展示合作供銷社和合作農(nóng)科院數(shù)量；在main5.js和main4.js中分別創(chuàng)建functionindex05()函數(shù)和functionindex04()函數(shù)，并分別使用getJSON()加載JSON；在main.js中調(diào)用函數(shù)index05()和index04()；在index.html中引入坐標(biāo)的js文件、main5.js和main4.js文件。<scriptsrc="js/chinaGeo.js"></script><!--坐標(biāo)--><scriptsrc="js/main5.js"></script><!--中間2頂部地圖--><scriptsrc="js/main4.js"></script><!--中間1頂部文字-->參考“13_map地圖示例.html”在main5.js中繪制地圖通過(guò)ID獲取一個(gè)DOM，并初始化成ECharts對(duì)象；構(gòu)建圖表中數(shù)據(jù)；//2.1構(gòu)建坐標(biāo)點(diǎn)letchinaGeoCoordMap=geoJson;//2.2構(gòu)建需要顯示的坐標(biāo)點(diǎn)，及數(shù)據(jù)letchinaDatas=[];$.each(data,function(index,item){ letchildArray=[]; childArray.push(item);//把一個(gè)數(shù)據(jù)對(duì)象放入一個(gè)數(shù)組 chinaDatas.push(childArray);//構(gòu)建二維數(shù)組});//2.3構(gòu)建地圖上連線與各個(gè)坐標(biāo)點(diǎn)的數(shù)組letseries=getSeries(chinaGeoCoordMap,chinaDatas);配置圖表參數(shù)；letoption={ tooltip:{ trigger:'item', backgroundColor:'rgba(166,200,76,0.82)', borderColor:'#FFFFCC', showDelay:0, hideDelay:0, enterable:true, transitionDuration:0, extraCssText:'z-index:100', formatter:function(params,ticket,callback){ //根據(jù)業(yè)務(wù)自己拓展要顯示的內(nèi)容 letres=""; letname=; res="<spanstyle='color:#fff;'>"+name+ "<br/>總數(shù)："+chinaDatas[params.dataIndex][0].value+ "<br/>供銷社："+chinaDatas[params.dataIndex][0].typeValue1+ "<br/>農(nóng)科院："+chinaDatas[params.dataIndex][0].typeValue2+ "</span>"; returnres; } }, visualMap:{//圖例值控制 min:0, max:20, calculable:true, show:false, color:['#f44336','#fc9700','#ffde00','#ffde00','#00eaff'], textStyle:{ color:'#fff' } }, geo:{ map:'china', zoom:1.2, label:{ emphasis:{