《大數(shù)據(jù)可視化技術》課件 第八章 熱力圖_第1頁
《大數(shù)據(jù)可視化技術》課件 第八章 熱力圖_第2頁
《大數(shù)據(jù)可視化技術》課件 第八章 熱力圖_第3頁
《大數(shù)據(jù)可視化技術》課件 第八章 熱力圖_第4頁
《大數(shù)據(jù)可視化技術》課件 第八章 熱力圖_第5頁
已閱讀5頁，還剩24頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領

文檔簡介

第八章

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

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

熱力圖簡介8.1

熱力圖簡介日歷熱力圖示例8.2Echarts日歷熱力圖核心組件Echarts熱力圖數(shù)據(jù)系列組件常用屬性8.2.1數(shù)據(jù)系列組件屬性說明type圖表類型，設置為“heatmap”（熱力圖）。coordinateSystem該系列使用的坐標系，可選項有“cartesian2d”（笛卡爾坐標系）、“geo”（地理坐標系）、“calendar”（日歷坐標系）。data數(shù)據(jù)體，結構形如：“[['2018-01-01',84.82],......]”。label標簽，可利用formatter屬性實現(xiàn)格式化輸出。日歷坐標系組件常用屬性8.2.2日歷坐標系組件屬性說明cellSize日歷單元格的尺寸，支持自適應設置。range日歷坐標的范圍，支持年、月、日等多種日期格式。itemStyle日歷單元格的樣式。dayLabel設置日歷坐標系中“星期軸”的樣式，包含若干子屬性。dayLabel.firstDay每周從周幾開始，默認值為“0”，即從周日開始。dayLabel.margin星期標簽與軸線之間的距離。dayLMap標簽的顯示效果，可選項有：“EN”（英文），“ZH”（中文）或自定義。monthLabel設置日歷坐標系中“月份軸”的樣式，包含若干子屬性。monthLabel.formatter用于格式化月份標簽，支持字符串模板和回調函數(shù)兩種形式，默認顯示range屬性定義的月份。yearLabel設置日歷坐標中“年”的樣式，包含若干子屬性。yearLabel.formatter用于格式化年份標簽，支持字符串模板和回調函數(shù)兩種形式，默認顯示range屬性定義的年份。連續(xù)型視覺映射組件常用屬性8.2.3視覺映射組件屬性說明type組件類型，可選項有“piecewise”（分段型）和“continuous”（連續(xù)型）。pieces定義每一段的取值范圍、標簽和樣式，取值示例：[{min:0,max:35,label:'0~35μg/m^3',color:'lime'}]orient布局方式，可選項有：“vertical”（垂直）和“horizontal”（水平）。itemWidth色標的寬度。itemHeight色標的高度。text色標兩端的標簽文本，如：['High','Low']。8.3靜態(tài)日歷熱力圖8.3.1準備工作（1）創(chuàng)建項目目錄結構<!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準備工作（2）創(chuàng)建HTML文檔body{background-color:black;}#heatmap{position:absolute;left:15%;top:15%;width:70%;height:70%;}8.3.1準備工作（3）設置元素樣式新建名為“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準備工作（4）數(shù)據(jù)準備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）標題組件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）日歷坐標系組件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動態(tài)日歷熱力圖8.4.1準備工作創(chuàng)建項目目錄結構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ù)轉換組裝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ù)轉換發(fā)布JSON數(shù)據(jù)接口：添加視圖函

溫馨提示

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

評論

0/150

提交評論