《大數(shù)據(jù)可視化技術(shù)》課件 董一兵 第7-14章 儀表盤-數(shù)據(jù)大屏_第1頁
《大數(shù)據(jù)可視化技術(shù)》課件 董一兵 第7-14章 儀表盤-數(shù)據(jù)大屏_第2頁
《大數(shù)據(jù)可視化技術(shù)》課件 董一兵 第7-14章 儀表盤-數(shù)據(jù)大屏_第3頁
《大數(shù)據(jù)可視化技術(shù)》課件 董一兵 第7-14章 儀表盤-數(shù)據(jù)大屏_第4頁
《大數(shù)據(jù)可視化技術(shù)》課件 董一兵 第7-14章 儀表盤-數(shù)據(jù)大屏_第5頁
已閱讀5頁，還剩283頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

第七章

儀表盤GOAL學(xué)習(xí)目標(biāo)1了解儀表盤的概念、特點(diǎn)和應(yīng)用場景2了解Echarts儀表盤的常用屬性3掌握利用Web前端開發(fā)技術(shù)制作靜態(tài)儀表盤的方法4掌握綜合利用Web前后端開發(fā)技術(shù)制作動(dòng)態(tài)儀表盤的方法目錄Contents7.1儀表盤簡介7.2Echarts儀表盤常用屬性7.3靜態(tài)儀表盤7.4動(dòng)態(tài)儀表盤7.1儀表盤簡介

儀表盤又被稱為撥號(hào)圖或速度表，取材于汽車儀表盤，是一種擬物化的信息圖表?；镜膬x表盤由一條圓弧形狀的坐標(biāo)軸和一根指向某坐標(biāo)刻度的指針組成，指針?biāo)赶虻目潭戎荡碛^測指標(biāo)的實(shí)時(shí)值，同時(shí)，坐標(biāo)軸的顏色還可以用于對(duì)觀測值進(jìn)行分類。7.1儀表盤簡介7.2Echarts儀表盤常用屬性7.2Echarts儀表盤常用屬性屬性說明center圓心坐標(biāo)，取值支持絕對(duì)值和百分比。radius儀表盤半徑，取值支持絕對(duì)值和百分比。min數(shù)據(jù)取值范圍的下界。max數(shù)據(jù)取值范圍的上界。splitNumber儀表盤刻度的分隔段數(shù)，默認(rèn)為10。axisLine坐標(biāo)軸線的相關(guān)配置。axisLine.lineStyle坐標(biāo)軸線的樣式。axisLine.lineStyle.color坐標(biāo)軸線可以被分成不同顏色的多段，每段的結(jié)束位置和顏色可以通過一個(gè)數(shù)組來表示。axisTick坐標(biāo)軸刻度的樣式。axisLabel坐標(biāo)軸刻度標(biāo)簽的樣式。splitLine坐標(biāo)軸主分隔線的樣式。pointer指針樣式。title儀表盤標(biāo)題，用于顯示維度的名稱，并非標(biāo)題組件。detail儀表盤詳情，用于顯示數(shù)據(jù)。data數(shù)據(jù)體，結(jié)構(gòu)形如：“[{value:['153.55'],name:'PM10(μg/m^3)'}]”7.3靜態(tài)儀表盤（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)7.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>顆粒物濃度監(jiān)測儀表盤</title></head><body><divid="gauge"></div><scriptsrc="JS/gauge.js"></script></body></html>7.3.1準(zhǔn)備工作（2）創(chuàng)建HTML文檔body{background-color:black;}#gauge{position:absolute;left:15%;top:15%;width:70%;height:70%;}7.3.1準(zhǔn)備工作（3）設(shè)置元素樣式新建“main.css”數(shù)據(jù)格式：[{value:['153.55'],name:'PM2.5(μg/m^3)'}][{value:['153.55'],name:'PM10(μg/m^3)'}]7.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備7.3.2圖表制作（1）標(biāo)題組件title:{text:'顆粒物濃度監(jiān)測儀表盤',textStyle:{color:'lightgray',fontSize:28},subtext:'\n監(jiān)測站：SJZ01日期：2018年1月1日',subtextStyle:{color:'lightgray',fontSize:20,fontWeight:'bolder',top:'15%'},left:'center'},name:'PM2.5',type:'gauge',center:['30%','60%'],radius:'70%',min:0,max:350,splitNumber:7,7.3.2圖表制作（2）數(shù)據(jù)系列組件基礎(chǔ)屬性

name:'PM10',

type:'gauge',

center:['70%','60%'],

radius:'70%',

min:0,

max:500,

splitNumber:5,axisLine:{lineStyle:{color:[[0.1,'lime'],[0.21,'yellow'],[0.33,'orange'],[0.43,'red'],[0.71,'purple'],[1,'brown']],shadowColor:'white',shadowBlur:10}},7.3.2圖表制作（2）數(shù)據(jù)系列組件坐標(biāo)軸線axisTick:{length:8,lineStyle:{width:2,color:'auto',shadowColor:'white',shadowBlur:10}},7.3.2圖表制作（2）數(shù)據(jù)系列組件坐標(biāo)軸刻度axisLabel:{fontWeight:'bolder',fontSize:18,color:'white'},7.3.2圖表制作（2）數(shù)據(jù)系列組件坐標(biāo)軸刻度標(biāo)簽splitLine:{length:18,lineStyle:{width:3,color:'auto',shadowColor:'white',shadowBlur:10}},7.3.2圖表制作（2）數(shù)據(jù)系列組件坐標(biāo)軸主分隔線pointer:{itemStyle:{color:'auto',shadowColor:'white',shadowBlur:10,}},7.3.2圖表制作（2）數(shù)據(jù)系列組件指針title:{textStyle:{fontWeight:'bolder',fontSize:18,fontStyle:'italic',color:'white',}},7.3.2圖表制作（2）數(shù)據(jù)系列組件儀表盤標(biāo)題detail:{width:54,height:18,backgroundColor:'blue',borderWidth:1,borderColor:'white',shadowColor:'white',shadowBlur:5,offsetCenter:[0,'50%'],7.3.2圖表制作（2）數(shù)據(jù)系列組件儀表盤詳情textStyle:{fontWeight:'bolder',fontSize:18,color:'white'}},data:[{value:['153.55'],name:'PM2.5(μg/m^3)'}]7.3.2圖表制作（2）數(shù)據(jù)系列組件數(shù)據(jù)7.3.3圖表展示使用瀏覽器打開“index.html”查看儀表盤顯示效果

7.4動(dòng)態(tài)儀表盤7.4.1準(zhǔn)備工作創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)importjsondefgetGaugeJSON(data):dct={}pm25=[]pm10=[]foriteminres:pm25.append(item[0])pm10.append(item[1])dct['pm10']=pm10dct['pm25']=pm25returnjson.dumps(dct,ensure_ascii=False)7.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：修改“preprocess.py”@app.route('/json_for_gauge')defjson_for_gauge():sql='''SELECTpm25,pm10FROMairpollutionWHEREstation='SJZ01'ANDdate='2018-01-0100:00:00''''returngetGaugeJSON(getData(sql))7.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON數(shù)據(jù)接口：添加視圖函數(shù)“json_for_gauge()”7.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換測試JSON數(shù)據(jù)接口：“:5000/json_for_gauge”letcontainer=$("#gauge")[0]letmyGauge=echarts.init(container,null,{renderer:"svg"})letdata_gauge={pm25:[],pm10:[]}$.ajax({url:'/json_for_gauge',method:'GET',dataType:'json',7.4.2圖表制作（2）數(shù)據(jù)加載改造“gauge.js”success:function(data){data_gauge.pm25=data.pm25data_gauge.pm10=data.pm10......},error:function(msg){console.log(msg)}})......

7.4.2圖表制作（3）數(shù)據(jù)渲染將“series”組件的“data”屬性值由常量修改為變量data:[{value:data_gauge.pm25,name:'PM2.5(μg/m^3)'}]data:[{value:data_gauge.pm10,name:'PM10(μg/m^3)'}]7.4.3圖表展示啟動(dòng)Flask，通過瀏覽器訪問“:5000/”THEENDTHANKS!第八章

熱力圖GOAL學(xué)習(xí)目標(biāo)1了解熱力圖的概念、特點(diǎn)和應(yīng)用場景2了解Echarts日歷熱力圖的核心組件及常用屬性3掌握Echarts日歷坐標(biāo)系組件、視覺映射組件的基本用法4掌握利用Web前端開發(fā)技術(shù)制作靜態(tài)日歷熱力圖的方法5掌握綜合利用Web前后端開發(fā)技術(shù)制作動(dòng)態(tài)日歷熱力圖的方法目錄Contents8.1熱力圖簡介8.2Echarts日歷熱力圖核心組件8.3靜態(tài)日歷熱力圖8.4動(dòng)態(tài)日歷熱力圖8.1熱力圖簡介

熱力圖又稱熱圖，是一種通過顏色表現(xiàn)數(shù)值大小的圖表，在各種業(yè)務(wù)數(shù)據(jù)分析場景中有著十分廣泛的應(yīng)用。熱力圖通常與空間或時(shí)間坐標(biāo)系結(jié)合，用于展示業(yè)務(wù)數(shù)據(jù)在空間或時(shí)間上的分布狀態(tài)。當(dāng)熱力圖與日歷坐標(biāo)系結(jié)合時(shí)，就形成了日歷熱力圖，以日歷的形式展示數(shù)據(jù)的密集程度或變化趨勢。8.1

熱力圖簡介8.1

熱力圖簡介日歷熱力圖示例8.2Echarts日歷熱力圖核心組件Echarts熱力圖數(shù)據(jù)系列組件常用屬性8.2.1數(shù)據(jù)系列組件屬性說明type圖表類型，設(shè)置為“heatmap”（熱力圖）。coordinateSystem該系列使用的坐標(biāo)系，可選項(xiàng)有“cartesian2d”（笛卡爾坐標(biāo)系）、“geo”（地理坐標(biāo)系）、“calendar”（日歷坐標(biāo)系）。data數(shù)據(jù)體，結(jié)構(gòu)形如：“[['2018-01-01',84.82],......]”。label標(biāo)簽，可利用formatter屬性實(shí)現(xiàn)格式化輸出。日歷坐標(biāo)系組件常用屬性8.2.2日歷坐標(biāo)系組件屬性說明cellSize日歷單元格的尺寸，支持自適應(yīng)設(shè)置。range日歷坐標(biāo)的范圍，支持年、月、日等多種日期格式。itemStyle日歷單元格的樣式。dayLabel設(shè)置日歷坐標(biāo)系中“星期軸”的樣式，包含若干子屬性。dayLabel.firstDay每周從周幾開始，默認(rèn)值為“0”，即從周日開始。dayLabel.margin星期標(biāo)簽與軸線之間的距離。dayLMap標(biāo)簽的顯示效果，可選項(xiàng)有：“EN”（英文），“ZH”（中文）或自定義。monthLabel設(shè)置日歷坐標(biāo)系中“月份軸”的樣式，包含若干子屬性。monthLabel.formatter用于格式化月份標(biāo)簽，支持字符串模板和回調(diào)函數(shù)兩種形式，默認(rèn)顯示range屬性定義的月份。yearLabel設(shè)置日歷坐標(biāo)中“年”的樣式，包含若干子屬性。yearLabel.formatter用于格式化年份標(biāo)簽，支持字符串模板和回調(diào)函數(shù)兩種形式，默認(rèn)顯示range屬性定義的年份。連續(xù)型視覺映射組件常用屬性8.2.3視覺映射組件屬性說明type組件類型，可選項(xiàng)有“piecewise”（分段型）和“continuous”（連續(xù)型）。pieces定義每一段的取值范圍、標(biāo)簽和樣式，取值示例：[{min:0,max:35,label:'0~35μg/m^3',color:'lime'}]orient布局方式，可選項(xiàng)有：“vertical”（垂直）和“horizontal”（水平）。itemWidth色標(biāo)的寬度。itemHeight色標(biāo)的高度。text色標(biāo)兩端的標(biāo)簽文本，如：['High','Low']。8.3靜態(tài)日歷熱力圖8.3.1準(zhǔn)備工作（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)<!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>PM2.5濃度監(jiān)測日歷熱力圖</title></head><body><divid="heatmap"></div><scriptsrc="JS/heatmap.js"></script></body></html>8.3.1準(zhǔn)備工作（2）創(chuàng)建HTML文檔body{background-color:black;}#heatmap{position:absolute;left:15%;top:15%;width:70%;height:70%;}8.3.1準(zhǔn)備工作（3）設(shè)置元素樣式新建名為“main.css”的CSS文檔[['2018-01-01',84.82],['2018-01-02',86.28],['2018-01-03',94.59],['2018-01-04',84.94],['2018-01-05',143.21],['2018-01-06',217.20],['2018-01-07',111.68],['2018-01-08',36.17],['2018-01-09',24.53],['2018-01-10',31.62],['2018-01-11',43.92],['2018-01-12',85.70],['2018-01-13',162.49],['2018-01-14',244.47],['2018-01-15',220.71],['2018-01-16',147.08],['2018-01-17',172.81],['2018-01-18',207.00],['2018-01-19',175.46],['2018-01-20',226.61],['2018-01-21',54.49],['2018-01-22',76.07],['2018-01-23',76.96],['2018-01-24',85.94],['2018-01-25',105.63],['2018-01-26',50.46],['2018-01-27',105.17],['2018-01-28',142.73],['2018-01-29',58.13],['2018-01-30',41.87],['2018-01-31',34.24]]8.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備title:{text:'PM2.5濃度監(jiān)測日歷熱力圖',textStyle:{color:'lightgray',fontSize:28},subtext:'監(jiān)測站：SJZ01',show:true,subtextStyle:{color:'lightgray',fontSize:20,},left:'center'},8.3.2圖表制作（1）標(biāo)題組件calendar:{cellSize:'auto',orient:'vertical',left:'20%',right:'20%',top:'25%',bottom:'20%',range:'2018-01',itemStyle:{borderWidth:0.5,shadowColor:'white',shadowBlur:10,},8.3.2圖表制作（2）日歷坐標(biāo)系組件dayLabel:{firstDay:1,margin:'35%',nameMap:'ZH',textStyle:{color:'lightgray',fontSize:20}},monthLabel:{show:true,nameMap:'ZH',formatter:'{yyyy}年{M}月',textStyle:{color:'lightgray',fontSize:28,}},yearLabel:{show:false}},visualMap:{type:'piecewise',pieces:[{min:0,max:35,color:'lime'},{min:35,max:75,color:'yellow'},{min:75,max:115,color:'orange'},{min:115,max:150,color:'red'},{min:150,max:250,color:'purple'},{min:250,max:350,color:'brown'}],orient:'horizontal',right:'20%',8.3.2圖表制作（3）視覺映射組件bottom:'20%',itemWidth:30,itemHeight:30,text:['High','Low'],textStyle:{color:'lightgray',fontSize:18},show:true},series:[{type:'heatmap',coordinateSystem:'calendar',data:[['2018-01-01',84.82],......],label:{show:true,formatter:function(params){returnecharts.format.formatTime('d',params.value[0]);},fontSize:18,color:'black',}}],8.3.2圖表制作（4）數(shù)據(jù)系列組件8.3.3圖表展示使用瀏覽器打開“index.html”查看熱力圖顯示效果

8.4動(dòng)態(tài)日歷熱力圖8.4.1準(zhǔn)備工作創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)importjsondefgetHeatJSON(data):dct={}pm25=[]foritemindata:day=item[0]pm25.append([day,item[1]])dct['pm25']=pm25returnjson.dumps(dct,ensure_ascii=False)8.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：修改“preprocess.py”@app.route('/json_for_heatmap')defjson_for_heatmap():sql='''SELECTDATE_FORMAT(date,'%Y-%m-%d')asday,pm25FROMairpollutionWHEREstation='SJZ01''''returngetHeatJSON(getData(sql))8.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON數(shù)據(jù)接口：添加視圖函數(shù)“json_for_heatmap()”8.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換測試JSON數(shù)據(jù)接口：:5000/json_for_heatmapletcontainer=$("#heatmap")[0]letmyHeatmap=echarts.init(container,null,{renderer:"svg"})letdata_heatmap=[]$.ajax({url:'/json_for_heatmap',method:'GET',dataType:'json',success:function(data){8.4.2圖表制作（2）數(shù)據(jù)加載改造“heatmap.js”data_heatmap=data.pm25......},error:function(msg){console.log(msg)}})......

8.4.2圖表制作（3）數(shù)據(jù)渲染將“series”組件的“data”屬性值由常量修改為變量data:data_heatmap,8.4.3圖表展示啟動(dòng)Flask，通過瀏覽器訪問“:5000/”THEENDTHANKS!第九章

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

平行坐標(biāo)圖是一種展示高維數(shù)據(jù)的信息圖表。在平行坐標(biāo)圖中存在多條互相平行的坐標(biāo)軸，每條坐標(biāo)軸對(duì)應(yīng)一個(gè)數(shù)據(jù)維度，每條記錄則對(duì)應(yīng)一條貫穿所有坐標(biāo)軸的折線。折線的形態(tài)能夠反映記錄之間的關(guān)系，隨著數(shù)據(jù)量的增加，形態(tài)相似的折線會(huì)堆疊起來，形成聚類的效果，從而揭示出記錄之間的相關(guān)關(guān)系。9.1平行坐標(biāo)圖簡介9.1平行坐標(biāo)圖簡介平行坐標(biāo)圖示例9.2Echarts平行坐標(biāo)圖核心組件9.2.1數(shù)據(jù)系列組件屬性說明type圖表類型，設(shè)置為“parallel”（平行坐標(biāo)圖）lineStyle折線的樣式，包含若干子屬性smooth是否對(duì)折線進(jìn)行平滑，可選項(xiàng)為“true”或“false”data數(shù)據(jù)體，結(jié)構(gòu)形如：“[['HD01',89.36,174.41,50.07,69.11,2.13,14.87,117,'輕度污染'],......]”Echarts平行坐標(biāo)圖數(shù)據(jù)系列組件常用屬性9.2.2平行坐標(biāo)系組件“parallelAxisDefault”的常用子屬性屬性說明nameLocation坐標(biāo)軸名稱顯示位置，可選項(xiàng)有：“start”，“center”和“end”。nameTextStyle坐標(biāo)軸名稱的文字樣式。nameGap坐標(biāo)軸名稱與軸線之間的距離。splitNumber坐標(biāo)軸的分割段數(shù)。axisLine坐標(biāo)軸軸線相關(guān)設(shè)置，包含若干子屬性。axisTick坐標(biāo)軸刻度相關(guān)設(shè)置，包含若干子屬性。axisLabel坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置，包含若干子屬性。9.2.3平行坐標(biāo)軸組件平行坐標(biāo)軸組件的常用屬性屬性說明dim坐標(biāo)軸的維度序號(hào)，對(duì)應(yīng)數(shù)據(jù)體中的某一列。type坐標(biāo)軸類型，可選項(xiàng)有：“value”（數(shù)值軸），“category”（類目軸），“time”（時(shí)間軸）和“l(fā)og”（對(duì)數(shù)軸）。name坐標(biāo)軸的名稱。min坐標(biāo)軸刻度的最小值。max坐標(biāo)軸刻度的最大值。data數(shù)據(jù)，在類目軸中有效。9.3靜態(tài)平行坐標(biāo)圖9.3.1準(zhǔn)備工作（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)9.3.1準(zhǔn)備工作（2）準(zhǔn)備HTML文檔<!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ù)平行坐標(biāo)圖</title></head><body><divid="parallel"></div><scriptsrc="JS/parallel.js"></script></body></html>9.3.1準(zhǔn)備工作（3）設(shè)置元素樣式body{background-color:black;}#parallel{position:absolute;left:15%;top:15%;width:70%;height:70%;}新建“main.css”5.2.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備監(jiān)測站代碼AQIAQI類別HD01117輕度污染XT01199中度污染HS01185中度污染SJZ01112輕度污染CZ01133輕度污染BD0195良LF0186良TS0189良QHD0156良ZJK0143優(yōu)CD0130優(yōu)9.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備[['HD01',89.36,174.41,50.07,69.11,2.13,14.87,117,'輕度污染'],['XT01',149.95,232.85,38.91,79.85,2.15,16.20,199,'中度污染'],['HS01',140.07,208.95,37.54,82.01,2.39,9.360,185,'中度污染'],['SJZ01',84.82,153.55,37.61,70.87,1.70,14.00,112,'輕度污染'],['CZ01',101.87,146.70,41.08,74.14,1.86,10.96,133,'輕度污染'],['BD01',71.02,124.90,32.03,71.96,1.97,13.78,95,'良'],['LF01',63.88,111.02,19.62,60.25,1.93,11.95,86,'良'],['TS01',66.33,120.00,35.72,48.16,2.05,18.82,89,'良'],['QHD01',30.39,63.15,27.47,36.12,1.13,24.97,56,'良'],['ZJK01',21.25,43.75,17.23,24.52,0.78,35.38,43,'優(yōu)'],['CD01',16.25,30.71,5.05,16.40,0.60,33.21,30,'優(yōu)']]title:{text:'空氣質(zhì)量指數(shù)平行坐標(biāo)圖',textStyle:{color:'lightgray',fontSize:28},subtext:'\n監(jiān)測時(shí)間：2018年1月1日',9.3.2圖表制作（1）標(biāo)題組件show:true,subtextStyle:{color:'lightgray',fontSize:20,},left:'center',},parallel:{bottom:'15%',top:'30%',parallelAxisDefault:{nameLocation:'end',nameTextStyle:{color:'lightgray',fontSize:20},9.3.2圖表制作（2）平行坐標(biāo)系組件nameGap:20,splitNumber:5,axisLine:{lineStyle:{color:'lightgray'},},axisTick:{lineStyle:{color:'lightgray'}},axisLabel:{color:'lightgray',fontSize:18}}},parallelAxis:[{dim:7,name:'AQI',min:0,max:250},9.3.2圖表制作（3）平行坐標(biāo)軸組件{dim:1,name:'PM2.5',min:0,max:200},{dim:3,name:'SO2',min:0,max:60},{dim:4,name:'NO2',min:0,max:100},{dim:2,name:'PM10',min:0,max:300},{dim:5,name:'CO',min:0,max:3},{dim:6,

name:'O3',min:0,max:40},9.3.2圖表制作（3）平行坐標(biāo)軸組件{dim:8,type:'category',name:'AQI類別',data:['優(yōu)','良','輕度污染','中度污染','重度污染','嚴(yán)重污染']}],visualMap:{type:'piecewise',dimension:7,pieces:[{min:0,max:50,color:'lime'},{min:51,max:100,color:'yellow'},{min:101,max:150,color:'orange'},{min:151,max:200,color:'red'},{min:201,max:300,color:'purple'},{min:300,color:'brown'}],9.3.2圖表制作（4）視覺映射組件orient:'horizontal',left:'center',bottom:'bottom',itemWidth:25,itemHeight:25,text:['AQIHigh','AQILow'],textStyle:{color:'lightgray',fontSize:18}},series:[{name:'AQI類別',type:'parallel',lineStyle:{width:3,opacity:0.7},smooth:true,

9.3.2圖表制作（5）數(shù)據(jù)系列組件data:[['HD01',89.36,174.41,50.07,69.11,2.13,14.87,117,'輕度污染'],......]},],9.3.3圖表展示使用瀏覽器打開“index.html”查看平行坐標(biāo)圖顯示效果

9.4動(dòng)態(tài)平行坐標(biāo)圖9.4.1準(zhǔn)備工作創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)9.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換編寫AQI計(jì)算模塊：新建“aqi.py”函數(shù)名稱返回值cal_iaqi(iaqi_h,iaqi_l,bp_h,bp_l,c_p)空氣質(zhì)量分指數(shù)。get_iaqi_pm25(value)PM2.5

濃度值對(duì)應(yīng)的空氣質(zhì)量分指數(shù)。get_iaqi_pm10(value)PM10

濃度值對(duì)應(yīng)的空氣質(zhì)量分指數(shù)。get_iaqi_so2(value)SO2

濃度值對(duì)應(yīng)的空氣質(zhì)量分指數(shù)。get_iaqi_no2(value)NO2濃度值對(duì)應(yīng)的空氣質(zhì)量分指數(shù)。get_iaqi_co(value)CO濃度值對(duì)應(yīng)的空氣質(zhì)量分指數(shù)。get_iaqi_o3(value)O3濃度值對(duì)應(yīng)的空氣質(zhì)量分指數(shù)。get_aqi(iaqis)空氣質(zhì)量指數(shù)。get_aqi_class(aqi)空氣質(zhì)量的類別。fromaqiimportget_aqi,get_aqi_classimportjsondefgetParallelJSON(data):newData=[]forstationindata:lst=[]foriteminstation:lst.append(item)9.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：修改“preprocess.py”aqi=get_aqi(lst[1:])aqi_class=get_aqi_class(aqi)lst.append(aqi)lst.append(aqi_class)newData.append(lst)dct={}dct['AQI']=newDatareturnjson.dumps(dct,ensure_ascii=False)9.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON數(shù)據(jù)接口：添加視圖函數(shù)“json_for_parallel()”@app.route('/json_for_parallel')defjson_for_parallel():sql='''SELECTstation,pm25,pm10,so2,no2,co,o3FROMairpollutionWHEREDATE(date)='2018-01-01'AND(station='HD01'ORstation='XT01'ORstation='HS01'ORstation='SZJ01'ORstation='CZ01'ORstation='BD01'ORstation='LF01'ORstation='TS01'ORstation='QHD01'ORstation='ZJK01'ORstation='CD01')'''returngetParallelJSON(getData(sql))9.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換測試JSON數(shù)據(jù)接口：:5000/json_for_parallelletcontainer=$("#parallel")[0]letmyParallel=echarts.init(container,null,{renderer:"svg"})letdata_parallel=[]$.ajax({url:'/json_for_parallel',method:'GET',dataType:'json',success:function(data){data_parallel=data.AQI9.4.2圖表制作......},error:function(msg){console.log(msg)}})......

（2）數(shù)據(jù)加載改造“parallel.js”9.4.2圖表制作（3）數(shù)據(jù)渲染將“series”組件的“data”屬性值由常量修改為變量data:data_parallel9.4.3圖表展示啟動(dòng)Flask，通過瀏覽器訪問“:5000/”THEENDTHANKS!第十章

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

雷達(dá)圖又稱網(wǎng)絡(luò)圖、蜘蛛網(wǎng)圖，是一種適用于展示指標(biāo)構(gòu)成以及次級(jí)指標(biāo)之間權(quán)重分布的信息圖表，經(jīng)常應(yīng)用于性能評(píng)估等場景中。雷達(dá)圖上通常有三條以上的坐標(biāo)軸，這些坐標(biāo)軸從共同的坐標(biāo)原點(diǎn)向四周輻射，將外接圓周平均分成面積相等的幾個(gè)扇形區(qū)域，形成了類似“雷達(dá)”的圖案。雷達(dá)圖所圍的面積能夠反映綜合指標(biāo)的測度結(jié)果，而展布的形態(tài)則能夠反映綜合指標(biāo)在各個(gè)次級(jí)指標(biāo)上的權(quán)重分布，并有助于揭示占主導(dǎo)地位的次級(jí)指標(biāo)。10.1雷達(dá)圖簡介10.1雷達(dá)圖簡介雷達(dá)圖示例10.2Echarts雷達(dá)圖核心組件10.2.1數(shù)據(jù)系列組件Echarts雷達(dá)圖數(shù)據(jù)系列組件常用屬性屬性說明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)系組件的常用屬性屬性說明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)測站的空氣質(zhì)量指數(shù)及分指數(shù)監(jiān)測站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）視覺映射組件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圖表展示使用瀏覽器打開“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)換

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(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)論