版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第十二章
散點(diǎn)圖GOAL學(xué)習(xí)目標(biāo)1了解散點(diǎn)圖的概念、特點(diǎn)和應(yīng)用場(chǎng)景2了解Echarts三維散點(diǎn)圖的核心組件3掌握利用Web前端開(kāi)發(fā)技術(shù)制作靜態(tài)散點(diǎn)圖的方法4掌握綜合利用Web前后端開(kāi)發(fā)技術(shù)制作動(dòng)態(tài)散點(diǎn)圖的方法5掌握利用Echarts-GL框架實(shí)現(xiàn)三維散點(diǎn)圖的方法目錄Contents12.1
散點(diǎn)圖與回歸分析12.2Echarts三維散點(diǎn)圖12.3靜態(tài)散點(diǎn)圖12.4動(dòng)態(tài)散點(diǎn)圖12.5動(dòng)態(tài)三維散點(diǎn)圖12.1散點(diǎn)圖與回歸分析
散點(diǎn)圖是在回歸分析中常用的信息圖表，主要用于展示因變量隨自變量變化的趨勢(shì)。根據(jù)這種趨勢(shì)選擇合適的函數(shù)對(duì)數(shù)據(jù)點(diǎn)進(jìn)行擬合，從而確定變量之間定量關(guān)系的分析方法即回歸分析，是統(tǒng)計(jì)機(jī)器學(xué)習(xí)中一種基本的方法。12.1散點(diǎn)圖與回歸分析
12.1散點(diǎn)圖與回歸分析
根據(jù)自變量數(shù)量的多少，可將回歸分析分為一元回歸和多元回歸。在進(jìn)行多元回歸分析時(shí)，通常要考察因變量與多個(gè)自變量之間的關(guān)系，此時(shí)可借助散布矩陣同時(shí)呈現(xiàn)這些關(guān)系。12.2Echarts三維散點(diǎn)圖
利用Echarts制作三維圖表，還依賴于Echarts-GL框架。Echarts-GL是Echarts的擴(kuò)展包，用于支持大規(guī)模數(shù)據(jù)的三維可視化和WebGL渲染加速。制作三維散點(diǎn)圖，需要先為項(xiàng)目引入“echarts-gl.js”庫(kù)文件，再將數(shù)據(jù)系列組件的“type”屬性值設(shè)置為“scatter3D”，然后對(duì)核心組件進(jìn)行配置。12.2
Echarts三維散點(diǎn)圖Echarts三維散點(diǎn)圖的核心組件12.2
Echarts三維散點(diǎn)圖組件說(shuō)明series數(shù)據(jù)系列組件，需將“type”屬性值設(shè)置為“scatter3D”。grid3D三維笛卡爾坐標(biāo)系組件。xAxis3D三維笛卡爾坐標(biāo)系中的x軸。yAxis3D三維笛卡爾坐標(biāo)系中的y軸。zAxis3D三維笛卡爾坐標(biāo)系中的z軸。12.3靜態(tài)散點(diǎn)圖（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)12.3.1準(zhǔn)備工作<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metahttp-equiv="X-UA-Compatible"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><scriptsrc="JS/echarts.js"></script><linkrel="stylesheet"href="CSS/main.css"/><title>靜態(tài)散布矩陣</title></head><body><divid="scatter"></div><scriptsrc="JS/scatter.js"></script></body></html>12.3.1準(zhǔn)備工作（2）準(zhǔn)備HTML文檔body{background-color:black;}#scatter{position:absolute;left:5%;top:5%;width:90%;height:90%;}12.3.1準(zhǔn)備工作（3）設(shè)置元素樣式新建“main.css”文檔[[7.28,68],[1.17,109],[4.77,108],[5.14,114],[5.08,102],[3.95,33],[8.61,34],[1.8,48],[3.09,87],[3.36,98],[3.85,98],[5.22,94],[12.44,38],[2.68,142],[5.31,103],[2.41,141],[3.6,171],[4.89,173],[4.21,166],[4.3,216],[2.35,157],[5.16,145],[3.61,274],[4.16,275],[4.02,258],[2.68,152],[4.01,246],[3.52,192],[1.03,238],[3.29,198]]12.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備數(shù)據(jù)格式：[AQI,緯向風(fēng)速絕對(duì)值]12.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備空氣質(zhì)量指數(shù)與氣象要素觀測(cè)記錄（部分）AQI緯向風(fēng)速絕對(duì)值(m/s)氣溫(K)相對(duì)濕度(%)地面氣壓(Pa)687.28291.7281.88101668.521091.17289.358.7101644.381084.77289.8171.81101859.341145.14289.3273.94101478.171025.08289.2156.44101538.39333.95282.8491.8280405.88348.61288.7770.67100817.3412.3.2圖表制作（1）標(biāo)題組件title:{
text:"空氣質(zhì)量指數(shù)與氣象要素關(guān)系散布矩陣",
textStyle:{
color:"ivory",
fontSize:32,
},
subtext:"監(jiān)測(cè)時(shí)間：2018年1月1日",
subtextStyle:{
color:"ivory",
fontSize:18,
},
left:"center",
},12.3.2圖表制作（2）提示框組件
tooltip:{
formatter:"{c0}",
},12.3.2圖表制作（3）視覺(jué)映射組件visualMap:{type:'piecewise',dimension:1,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'}],show:false},12.3.2圖表制作（4）網(wǎng)格組件grid:[{left:'1%',top:'15%',width:'43%',height:'38%',containLabel:true},{right:'6%',top:'15%',width:'43%',height:'38%',containLabel:true},{left:'1%',bottom:'3%',width:'43%',height:'38%',containLabel:true},{right:'6%',bottom:'3%',width:'43%',height:'38%',containLabel:true}],12.3.2圖表制作（5）x軸組件xAxis:[{gridIndex:0,name:"abs(u)(m/s)",nameTextStyle:{color:"ivory",fontSize:16,},axisLabel:{interval:0,color:"ivory",fontSize:16,},},12.3.2圖表制作（5）x軸組件{//第2個(gè)坐標(biāo)系中的x軸，顯示氣溫gridIndex:1,name:"temp(K)",nameTextStyle:{color:"ivory",fontSize:16,},min:240,axisLabel:{interval:0,color:"ivory",fontSize:16,},},12.3.2圖表制作（5）x軸組件{//第3個(gè)坐標(biāo)系中的x軸，顯示相對(duì)濕度gridIndex:2,name:"rh(%)",nameTextStyle:{color:"ivory",fontSize:16,},min:10,axisLabel:{interval:0,color:"ivory",fontSize:16,},},12.3.2圖表制作（5）x軸組件{//第4個(gè)坐標(biāo)系中的x軸，顯示地面氣壓gridIndex:3,name:"psfc(Pa)",nameTextStyle:{color:"ivory",fontSize:16,},min:50000,axisLabel:{interval:0,color:"ivory",fontSize:16,},},],12.3.2圖表制作（6）y軸組件yAxis:[{gridIndex:0,type:"value",axisLabel:{color:"ivory",fontSize:16,},name:"AQI",nameTextStyle:{color:"ivory",fontSize:16,},},12.3.2圖表制作（6）y軸組件{gridIndex:1,type:"value",axisLabel:{color:"ivory",fontSize:16,},name:"AQI",nameTextStyle:{color:"ivory",fontSize:16,},},12.3.2圖表制作（6）y軸組件{gridIndex:2,type:"value",axisLabel:{color:"ivory",fontSize:16,},name:"AQI",nameTextStyle:{color:"ivory",fontSize:16,},},12.3.2圖表制作（6）y軸組件{gridIndex:3,type:"value",axisLabel:{color:"ivory",fontSize:16,},name:"AQI",nameTextStyle:{color:"ivory",fontSize:16,},},],12.3.2圖表制作（7）數(shù)據(jù)系列組件series:[{//第1個(gè)坐標(biāo)系中展示AQI與緯向風(fēng)速絕對(duì)值的關(guān)系name:"AQI",type:"scatter",xAxisIndex:0,yAxisIndex:0,data:[[7.28,68],[1.17,109],[4.77,108],[5.14,114],[5.08,102],[3.95,33],[8.61,34],[1.8,48],[3.09,87],[3.36,98],[3.85,98],[5.22,94],[12.44,38],[2.68,142],[5.31,103],[2.41,141],[3.6,171],[4.89,173],[4.21,166],[4.3,216],[2.35,157],[5.16,145],[3.61,274],[4.16,275],[4.02,258],[2.68,152],[4.01,246],[3.52,192],[1.03,238],[3.29,198]]},12.3.2圖表制作（7）數(shù)據(jù)系列組件{//第2個(gè)坐標(biāo)系中展示AQI與氣溫的關(guān)系name:"AQI",type:"scatter",xAxisIndex:1,yAxisIndex:1,data:[[291.72,68],[289.3,109],[289.81,108],[289.32,114],[289.21,102],[282.84,33],[288.77,34],[280.25,48],[283.08,87],[281.13,98],[282.8,98],[282.97,94],[264.65,38],[280.21,142],[281.73,103],[279.86,141],[279.35,171],[281.57,173],[281.43,166],[280.27,216],[280.13,157],[280.63,145],[280.32,274],[279.88,275],[279.76,258],[279.44,152],[279.48,246],[279.09,192],[278.67,238],[279.15,198]]},12.3.2圖表制作（7）數(shù)據(jù)系列組件{//第3個(gè)坐標(biāo)系中展示AQI與相對(duì)濕度的關(guān)系name:"AQI",type:"scatter",xAxisIndex:2,yAxisIndex:2,data:[[81.88,68],[58.7,109],[71.81,108],[73.93,114],[56.44,102],[91.82,33],[70.67,34],[81.41,48],[75.01,87],[52.83,98],[54.82,98], [53.42,94],[24.6,38],[55.68,142],[43.63,103],[62.22,141],[62.44,171],[55.18,173],[53.18,166],[54.02,216],[54.83,157], [42.89,145],[52.2,274],[56.21,275],[49.33,258],[43.3,152],[47.94,246],[41.33,192],[32.05,238],[44.78,198]]},12.3.2圖表制作（7）數(shù)據(jù)系列組件{//第4個(gè)坐標(biāo)系中展示AQI與地面氣壓的關(guān)系name:"AQI",type:"scatter",xAxisIndex:3,yAxisIndex:3,data:[[101668.52,68],[101644.38,109],[101859.34,108],[101478.17,114],[101538.39,102],[80405.88,33],[100817.34,34], [88005.25,48],[100292.57,87],[101728.01,98],[102207.4,98], [96196.98,94],[55955.43,38],[95737.79,142],[102284.46,103],[102722.11,141],[101377.11,171],[102625.56,173],[102722.88,166],[102734.06,216],[102761.16,157],[102003.77,145],[102465.73,274],[102458.2,275],[102690.4,258],[102817.98,152],[102761.52,246],[102647.61,192],[97821.19,238],[102650.9,198]]},]12.3.2圖表展示使用瀏覽器打開(kāi)“index.html”查看散點(diǎn)圖的顯示效果12.4動(dòng)態(tài)散點(diǎn)圖12.4.1準(zhǔn)備工作創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)fromaqiimportget_iaqi_pm25,get_iaqi_pm10,get_iaqi_so2,get_iaqi_no2, get_iaqi_co,get_iaqi_o3,get_aqi,get_aqi_classimportjsondefgetScatterJSON(data):returnDct={}aqi_u=[]aqi_temp=[]12.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：定義“getScatterJSON()”函數(shù)aqi_rh=[]
aqi_psfc=[]
forstationindata:
value_pm25=station[0]
value_pm10=station[1]
value_so2=station[2]
value_no2=station[3]
value_co=station[4]
value_o3=station[5]
value_u=station[6]value_temp=station[7]value_rh=station[8]value_psfc=station[9]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)12.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：定義“getScatterJSON()”函數(shù)iaqi_o3=get_iaqi_o3(value_o3)staAqi=get_aqi(iaqi_pm25,iaqi_pm10,iaqi_so2,iaqi_no2,iaqi_co, iaqi_o3)lst=[value_u,staAqi]aqi_u.append(lst)lst=[value_temp,staAqi]aqi_temp.append(lst)lst=[value_rh,staAqi]aqi_rh.append(lst)lst=[value_psfc,staAqi]aqi_psfc.append(lst)returnDct['aqi_u']=aqi_ureturnDct['aqi_temp']=aqi_tempreturnDct['aqi_rh']=aqi_rhreturnDct['aqi_psfc']=aqi_psfcreturnjson.dumps(returnDct,ensure_ascii=False)12.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：定義“getScatterJSON()”函數(shù)fromflaskimportFlask,render_templatefrommodelimportgetDatafrompreprocessimportgetScatterJSONapp=Flask(__name__)@app.route('/')defindex():returnrender_template('index.html')12.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON數(shù)據(jù)接口：添加視圖函數(shù)“json_for_scatter()”@app.route('/json_for_scatter')defjson_for_scatter():sql='''SELECTpm25,pm10,so2,no2,co,o3,abs(u),temp,rh,psfcFROM airpollution'''returngetScatterJSON(getData(sql))if__name__=='__main__':app.run()12.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換測(cè)試JSON數(shù)據(jù)接口：“:5000/json_for_scatter”letcontainer=$("#scatter")[0]letmyScatter=echarts.init(container,null,{renderer:"svg"})letdata_scatter={aqi_u:[],aqi_temp:[],aqi_rh:[],aqi_psfc:[]}$.ajax({url:'/json_for_scatter',method:'GET',12.4.2圖表制作（2）數(shù)據(jù)加載
dataType:'json',
success:function(data){
data_scatter.aqi_u=data.aqi_u
data_scatter.aqi_temp=data.aqi_temp
data_scatter.aqi_rh=data.aqi_rh
data_scatter.aqi_psfc=data.aqi_psfc
......
},
error:function(msg){console.log(msg)}})
......
添加散點(diǎn)圖實(shí)例初始化語(yǔ)句及“ajax()”方法框架12.4.2圖表制作（3）數(shù)據(jù)渲染將“series”組件的“data”屬性值修改為變量data:data_scatter.aqi_u,data:data_scatter.aqi_temp,data:data_scatter.aqi_rh,data:data_scatter.aqi_psfc12.4.3圖表展示啟動(dòng)Flask開(kāi)發(fā)服務(wù)器，通過(guò)瀏覽器訪問(wèn)“:5000/”12.5動(dòng)態(tài)三維散點(diǎn)圖三維散點(diǎn)圖適用于同時(shí)呈現(xiàn)三個(gè)變量之間關(guān)系的場(chǎng)景。本節(jié)以空氣質(zhì)量指數(shù)與風(fēng)速的關(guān)系為例，介紹動(dòng)態(tài)三維散點(diǎn)圖的制作方法。動(dòng)態(tài)散點(diǎn)圖可在動(dòng)態(tài)二維散點(diǎn)圖的基礎(chǔ)上改造而成，改造過(guò)程包括準(zhǔn)備工作、圖表制作、圖表展示三個(gè)階段。12.5動(dòng)態(tài)三維散點(diǎn)圖（1）創(chuàng)建項(xiàng)目根目錄12.5.1準(zhǔn)備工作<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><linkrel="stylesheet"href="{{url_for('static',filename='CSS/main.css')}}"><scriptsrc="{{url_for('static',filename='JS/echarts.js')}}"></script>
<scriptsrc="{{url_for('static',filename='JS/echarts-gl.min.js')}}"></script><scriptsrc="{{url_for('static',filename='JS/jquery.min.js')}}"></script><title>三維散點(diǎn)圖</title></head><body><divid="scatter3D"></div><scriptsrc="{{url_for('static',filename='JS/scatter3D.js')}}"></script></body></html>12.5.1準(zhǔn)備工作（2）創(chuàng)建
index.html，引入
Echarts-GLfromaqiimportget_iaqi_pm25,get_iaqi_pm10,get_iaqi_so2,get_iaqi_no2, get_iaqi_co,get_iaqi_o3,get_aqi,get_aqi_classimportjsondefgetScatter3DJSON(data):returnDct={}aqi_uv=[]forstationindata:value_pm25=station[0]value_pm10=station[1]12.5.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：定義“getScatter3DJSON()”函數(shù)
value_so2=station[2]
value_no2=station[3]
value_co=station[4]
value_o3=station[5]
value_u=station[6]
value_v=station[7]
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)staAqi=get_aqi(iaqi_pm25,iaqi_pm10,iaqi_so2,iaqi_no2,iaqi_co, iaqi_o3)lst=[value_u,value_v,staAqi]aqi_uv.append(lst)returnDct['aqi_uv']=aqi_uvreturnjson.dumps(returnDct,ensure_ascii=False)12.5.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：定義“getScatter3DJSON()”函數(shù)fromflaskimportFlask,render_templatefrommodelimportgetDatafrompreprocessimportgetScatter3DJSONapp=Flask(__name__)@app.route('/')defindex():returnrender_template('index.html')12.5.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON數(shù)據(jù)接口：添加視圖函數(shù)“json_for_scatter3D()”@app.route('/json_for_scatter3D')defjson_for_scatter3D():
sql='''
SELECTpm25,pm10,so2,no2,co,o3,abs(u),abs(v)
FROM airpollution
'''
returngetScatter3DJSON(getData(sql))
if__name__=='__main__':
app.run()12.5.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換測(cè)試JSON數(shù)據(jù)接口：“:5000/json_for_scatter3D”letcontainer=$("#scatter
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 2025福建福州古厝集團(tuán)有限公司招聘6人筆試參考題庫(kù)附帶答案詳解(3卷合一版)
- 2025湖北荊州市城市發(fā)展控股集團(tuán)有限公司招聘21人筆試參考題庫(kù)附帶答案詳解(3卷合一版)
- 2025年中國(guó)電力技術(shù)裝備有限公司招聘13人(第一批)筆試參考題庫(kù)附帶答案詳解(3卷)
- 2025“才聚齊魯成就未來(lái)”山東省科創(chuàng)集團(tuán)有限公司權(quán)屬企業(yè)招聘1人筆試參考題庫(kù)附帶答案詳解(3卷)
- 中學(xué)化學(xué)實(shí)驗(yàn)教學(xué)中的過(guò)程性評(píng)價(jià)策略優(yōu)化研究教學(xué)研究課題報(bào)告
- 廣西壯族自治區(qū)2024廣西河池市羅城仫佬族自治縣調(diào)解處理土地山林水利糾紛工作中心就業(yè)見(jiàn)習(xí)筆試歷年參考題庫(kù)典型考點(diǎn)附帶答案詳解(3卷合一)
- 金融精英之路融資項(xiàng)目經(jīng)理面試題集
- 仁化縣2024廣東韶關(guān)市仁化縣第一期“青年人才”公開(kāi)招聘考試筆試歷年參考題庫(kù)典型考點(diǎn)附帶答案詳解(3卷合一)
- 中國(guó)聯(lián)通員工關(guān)系專員面試題及答案解析
- 渠道經(jīng)理崗面試題及答案
- 消毒隔離制度課件
- 成品綜合支吊架深化設(shè)計(jì)及施工技術(shù)專項(xiàng)方案
- 改革開(kāi)放簡(jiǎn)史智慧樹(shù)知到課后章節(jié)答案2023年下北方工業(yè)大學(xué)
- 木薯變性淀粉生產(chǎn)應(yīng)用課件
- 校門(mén)安全管理“十條”
- 超全QC管理流程圖
- 臨時(shí)工勞動(dòng)合同簡(jiǎn)易版可打印
- 潔凈室施工及驗(yàn)收規(guī)范標(biāo)準(zhǔn)
- -井巷工程課程設(shè)計(jì)
- pks r5xx裝機(jī)及配置手冊(cè)
- GB/T 17215.322-2008交流電測(cè)量設(shè)備特殊要求第22部分：靜止式有功電能表(0.2S級(jí)和0.5S級(jí))
評(píng)論
0/150
提交評(píng)論