《大數(shù)據(jù)可視化技術(shù)》課件 第十章 雷達(dá)圖_第1頁(yè)
《大數(shù)據(jù)可視化技術(shù)》課件 第十章 雷達(dá)圖_第2頁(yè)
《大數(shù)據(jù)可視化技術(shù)》課件 第十章 雷達(dá)圖_第3頁(yè)
《大數(shù)據(jù)可視化技術(shù)》課件 第十章 雷達(dá)圖_第4頁(yè)
《大數(shù)據(jù)可視化技術(shù)》課件 第十章 雷達(dá)圖_第5頁(yè)
已閱讀5頁(yè)，還剩25頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第十章

雷達(dá)圖GOAL學(xué)習(xí)目標(biāo)1了解雷達(dá)圖的概念、特點(diǎn)和應(yīng)用場(chǎng)景2了解Echarts雷達(dá)坐標(biāo)系的常用屬性3掌握Echarts雷達(dá)坐標(biāo)系的基本用法4掌握利用Web前端開(kāi)發(fā)技術(shù)制作靜態(tài)雷達(dá)圖的方法5掌握綜合利用Web前后端開(kāi)發(fā)技術(shù)制作動(dòng)態(tài)雷達(dá)圖的方法目錄Contents10.1雷達(dá)圖簡(jiǎn)介10.2Echarts雷達(dá)圖核心組件10.3靜態(tài)雷達(dá)圖10.4動(dòng)態(tài)雷達(dá)圖10.1雷達(dá)圖簡(jiǎn)介

雷達(dá)圖又稱網(wǎng)絡(luò)圖、蜘蛛網(wǎng)圖，是一種適用于展示指標(biāo)構(gòu)成以及次級(jí)指標(biāo)之間權(quán)重分布的信息圖表，經(jīng)常應(yīng)用于性能評(píng)估等場(chǎng)景中。雷達(dá)圖上通常有三條以上的坐標(biāo)軸，這些坐標(biāo)軸從共同的坐標(biāo)原點(diǎn)向四周輻射，將外接圓周平均分成面積相等的幾個(gè)扇形區(qū)域，形成了類似“雷達(dá)”的圖案。雷達(dá)圖所圍的面積能夠反映綜合指標(biāo)的測(cè)度結(jié)果，而展布的形態(tài)則能夠反映綜合指標(biāo)在各個(gè)次級(jí)指標(biāo)上的權(quán)重分布，并有助于揭示占主導(dǎo)地位的次級(jí)指標(biāo)。10.1雷達(dá)圖簡(jiǎn)介10.1雷達(dá)圖簡(jiǎn)介雷達(dá)圖示例10.2Echarts雷達(dá)圖核心組件10.2.1數(shù)據(jù)系列組件Echarts雷達(dá)圖數(shù)據(jù)系列組件常用屬性屬性說(shuō)明type取值為“radar”即可使用雷達(dá)圖。symbol標(biāo)記的圖形，取值為“none”時(shí)表示不使用標(biāo)記。lineStyle線條樣式，包含若干子屬性。data數(shù)據(jù)體，結(jié)構(gòu)形如：“[{"name":"HRB01","value":[225,225,115,16,71,50,16]}]”10.2.2雷達(dá)坐標(biāo)系組件雷達(dá)坐標(biāo)系組件的常用屬性屬性說(shuō)明center圓心坐標(biāo)，決定雷達(dá)圖的位置，取值支持絕對(duì)值和百分比。radius半徑，決定坐標(biāo)系的大小，取值支持絕對(duì)值和百分比。startAngle坐標(biāo)系的起始角度，即第一條坐標(biāo)軸的角度。axisName坐標(biāo)軸名稱的樣式，包含若干子屬性。axisLine坐標(biāo)軸線的樣式，包含若干子屬性。shape坐標(biāo)系的形狀，取值為“polygon”（多邊形）或“circle”（圓形）。splitNumber坐標(biāo)軸的分割段數(shù)。splitLine坐標(biāo)軸分隔線的樣式，包含若干子屬性。splitArea是否顯示分隔區(qū)域。indicator指示器，用于設(shè)置坐標(biāo)軸的名稱和取值范圍，取值示例：[{text:'AQI',max:300},{text:'IAQI_PM2.5',max:300}]10.3靜態(tài)雷達(dá)圖（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)10.3.1準(zhǔn)備工作<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><scriptsrc="js/echarts.js"></script><linkrel="stylesheet"href="css/main.css"><title>空氣質(zhì)量指數(shù)雷達(dá)圖</title></head><body><divid="radar"></div><scriptsrc="js/radar.js"></script></body></html>10.37.1準(zhǔn)備工作（2）創(chuàng)建HTML文檔body{background-color:black;}#radar{position:absolute;left:15%;top:10%;width:70%;height:80%;}10.3.1準(zhǔn)備工作（3）設(shè)置元素樣式新建名為“main.css”的CSS文檔10.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備5個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)及分指數(shù)監(jiān)測(cè)站AQIIAQI_PM2.5IAQI_PM10IAQI_SO2IAQI_NO2IAQI_COIAQI_O3LZ0140403614171530TY0183838348383117HK011141148112602631ZZ0119819814432101488HRB012252251151671501610.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備雷達(dá)圖數(shù)據(jù)系列組件“data”屬性的要求，將計(jì)算結(jié)果整理為如下格式[{"name":"HRB01","value":[225,225,115,16,71,50,16]},{"name":"ZZ01","value":[198,198,144,32,101,48,8]},{"name":"LZ01","value":[40,40,36,14,17,15,30]},{"name":"TY01","value":[83,83,83,48,38,31,17]},{"name":"HK01","value":[114,114,81,12,60,26,31]}]title:{text:'空氣質(zhì)量指數(shù)雷達(dá)圖',textStyle:{fontSize:28,color:'ivory'},10.3.2圖表制作（1）標(biāo)題組件subtext:'日期：2018-01-01',subtextStyle:{fontSize:20,color:'ivory'},left:'center'},radar:[{indicator:[{text:'AQI',max:300},{text:'IAQI_PM2.5',max:300},{text:'IAQI_PM10',max:300},{text:'IAQI_SO2',max:300},{text:'IAQI_NO2',max:300},{text:'IAQI_CO',max:300},{text:'IAQI_O3',max:300}],10.3.2圖表制作（2）雷達(dá)坐標(biāo)系組件center:['50%','50%'],radius:200,startAngle:90,splitNumber:5,shape:'circle',axisName:{formatter:'{value}',color:'ivory',fontSize:16,fontWeight:'bold'},10.3.2圖表制作（2）雷達(dá)坐標(biāo)系組件splitLine:{lineStyle:{color:['rgba(254,248,239,1)','rgba(254,248,239,0.8)','rgba(254,248,239,0.6)','rgba(254,248,239,0.4)','rgba(254,248,239,0.2)','rgba(254,248,239,0.1)']}},splitArea:{show:false},axisLine:{lineStyle:{color:'rgba(238,197,102,0.5)'}}}],10.3.2圖表制作（3）視覺(jué)映射組件visualMap:{show:false,type:'piecewise',dimension:0,pieces:[{min:0,max:50,color:'lime'},{min:51,max:100,color:'#fcce10'},{min:101,max:150,color:'#e87c25'},{min:151,max:200,color:'red'},{min:201,max:300,color:'purple'},{min:301,color:'brown'}]},10.3.2圖表制作（4）數(shù)據(jù)系列組件series:[{type:'radar',symbol:'none',lineStyle:{width:2},emphasis:{lineStyle:{width:4}},data:[{"name":"HRB01","value":[225,225,115,16,71,50,16]},{"name":"ZZ01","value":[198,198,144,32,101,48,8]},{"name":"LZ01","value":[40,40,36,14,17,15,30]},{"name":"TY01","value":[83,83,83,48,38,31,17]},{"name":"HK01","value":[114,114,81,12,60,26,31]}]}]10.3.3圖表展示使用瀏覽器打開(kāi)“index.html”查看雷達(dá)圖顯示效果

10.4動(dòng)態(tài)雷達(dá)圖10.4.1準(zhǔn)備工作創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)defgetRadarJSON(data):returnDct={}lst=[]forstationindata:dct={}value_pm25=station[1]value_pm10=station[2]value_so2=station[3]value_no2=station[4]value_co=station[5]value_o3=station[6]10.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：修改“preprocess.py”iaqi_pm25=get_iaqi_pm25(value_pm25)iaqi_pm10=get_iaqi_pm10(value_pm10)iaqi_so2=get_iaqi_so2(value_so2)iaqi_no2=get_iaqi_no2(value_no2)iaqi_co=get_iaqi_co(value_co)iaqi_o3=get_iaqi_o3(value_o3)aqi=get_aqi(station[1:])dct['name']=station[0]dct['value']=[aqi,iaqi_pm25,iaqi_pm10,iaqi_so2,iaqi_no2,iaqi_co,iaqi_o3]lst.append(dct)returnDct['radar']=lstreturnjson.dumps(returnDct,ensure_ascii=False)@app.route('/json_for_radar')defjson_for_radar():sql='''SELECTstation,pm25,pm10,so2,no2,co,o3FROMairpollutionWHERE(station='HK01' ORstation='ZZ01' ORstation='LZ01' ORstation='TY01' ORstation='HRB01')ANDdate='2018-01-0100:00:00''''returngetRadarJSON(getData(sql))10.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON數(shù)據(jù)接

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論