版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第十三章
聯(lián)動(dòng)圖表GOAL學(xué)習(xí)目標(biāo)1了解聯(lián)動(dòng)圖表的概念、特點(diǎn)和應(yīng)用場(chǎng)景2了解Echarts時(shí)間軸組件的常用屬性3掌握Echarts時(shí)間軸組件的基本用法4掌握利用Web前端開(kāi)發(fā)技術(shù)制作靜態(tài)聯(lián)動(dòng)圖表的方法5掌握綜合利用Web前后端開(kāi)發(fā)技術(shù)制作動(dòng)態(tài)聯(lián)動(dòng)圖表的方法目錄Contents13.1聯(lián)動(dòng)圖表簡(jiǎn)介13.2
Echarts
時(shí)間軸組件13.3
靜態(tài)聯(lián)動(dòng)圖表13.4
動(dòng)態(tài)聯(lián)動(dòng)圖表13.1聯(lián)動(dòng)圖表簡(jiǎn)介
聯(lián)動(dòng)圖表是指在同一個(gè)Echarts實(shí)例中通過(guò)多圖表混搭和聯(lián)動(dòng)，對(duì)多維度數(shù)據(jù)進(jìn)行同步展示的一種可視化方案。Echarts支持任意圖表的混搭，其中比較常見(jiàn)的組合方式是條形圖與餅圖或折線圖與餅圖。13.1聯(lián)動(dòng)圖表簡(jiǎn)介13.2
Echarts
時(shí)間軸組件
時(shí)間軸（timeline）是實(shí)現(xiàn)面板數(shù)據(jù)可視化的核心組件。與常用的坐標(biāo)軸組件不同，時(shí)間軸組件不僅提供了一條坐標(biāo)軸，而且提供了一組控制按鈕，用于支持在多個(gè)可選配置項(xiàng)（switchableOption）的視圖之間進(jìn)行切換的功能。引入時(shí)間軸組件之后，在一個(gè)Echarts實(shí)例中需要定義兩類配置項(xiàng)：基礎(chǔ)配置項(xiàng)（baseOption）和可選配置項(xiàng)（switchableOption），分別用于設(shè)置多個(gè)視圖之間統(tǒng)一的和獨(dú)立的內(nèi)容和樣式。13.2
Echarts
時(shí)間軸組件13.2
Echarts
時(shí)間軸組件屬性說(shuō)明show是否顯示，取值為“true”或“false”。默認(rèn)值為“true”，設(shè)置為“false”時(shí)，時(shí)間軸將隱藏，但功能仍在。axisType坐標(biāo)軸類型，可選項(xiàng)有：“value”（數(shù)值型）、“category”（類目型）、和“time”（時(shí)間型）。autoPlay是否自動(dòng)播放，可選項(xiàng)有：“true”和“false”。playInterval播放的速度，單位為毫秒，默認(rèn)值為2000毫秒。Echarts時(shí)間軸組件的常用屬性13.2
Echarts
時(shí)間軸組件屬性說(shuō)明replaceMerge替換合并策略，表示對(duì)哪些組件，使用可選配置項(xiàng)的內(nèi)容替換基礎(chǔ)配置項(xiàng)。取值可以是組件的類型，如：“xAxis”或“series”；也可以是類型的數(shù)組，如：“['xAxis','series']”；也可使用默認(rèn)值“NORMAL_MERGE”，表示對(duì)所有相同組件均使用替換策略。lineStyle坐標(biāo)軸線的樣式。label坐標(biāo)軸標(biāo)簽的樣式。itemStyle時(shí)間坐標(biāo)圖形的樣式。checkpointStyle檢查點(diǎn)圖形的樣式。controlStyle控制按鈕的樣式，包括：播放按鈕、前進(jìn)按鈕、后退按鈕。13.3
靜態(tài)聯(lián)動(dòng)圖表（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)13.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>聯(lián)動(dòng)圖表</title></head><body><divid="linkage"></div><scriptsrc="JS/linkage.js"></script></body></html>13.3.1準(zhǔn)備工作（2）創(chuàng)建HTML文檔body{background-color:black;}#linkage{position:absolute;width:100%;height:100%;}13.3.1準(zhǔn)備工作（3）設(shè)置元素樣式新建“main.css”文檔<divid="bar"></div>13.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備34個(gè)監(jiān)測(cè)站、連續(xù)3日的空氣質(zhì)量指數(shù)（部分）監(jiān)測(cè)站代碼AQI（2018-01-01）AQI（2018-01-02）AQI（2018-01-03）BJ01785423CC011334153CD0114213862CQ019410687CS019810970FZ01876052GY0148482413.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
時(shí)間軸組件
baseOption:{
timeline:{
axisType:"category",
autoPlay:true,
playInterval:2000,
bottom:"5%",
lineStyle:{
color:"ivory",
},label:{color:"lightgray",fontSize:18,},itemStyle:{color:"ivory",},
checkpointStyle:{
borderColor:"ivory",
},
controlStyle:{
color:"ivory",
borderColor:"ivory",
},
progress:{
label:{
color:"ivory",
fontSize:18,
fontWeight:"bolder",
},
},
data:["2018-01-01","2018-01-02","2018-01-03"],
},13.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
標(biāo)題組件title:{text:"空氣質(zhì)量指數(shù)排序與匯總聯(lián)動(dòng)圖",textStyle:{fontSize:32,color:"ivory",},left:"center",},13.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
提示框組件tooltip:{trigger:"item",},13.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
網(wǎng)格組件grid:{top:"10%",left:"20%",width:"68%",height:"78%",containLable:true,},13.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
x軸組件xAxis:{show:false,axisLabel:{interval:0,color:"lightgray",fontSize:18,},},13.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
y軸組件yAxis:{axisLabel:{interval:0,color:"lightgray",fontSize:18,},data:[],},13.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
視覺(jué)映射組件visualMap:{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"},],
right:"15%",bottom:"15%",textStyle:{color:"ivory",fontSize:18,},inverse:true,},13.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
數(shù)據(jù)系列組件：條形圖series:[{name:"AQI",type:"bar",label:{show:true,position:"insideRight",},},（1）基礎(chǔ)配置項(xiàng)
數(shù)據(jù)系列組件：餅圖{name:"數(shù)量及占比",type:"pie",center:["65%","30%"],radius:[50,150],roseType:"area",encode:{value:[1],},itemStyle:{borderRadius:8,},
label:{
alignTo:"labelLine",
backgroundColor:"ivory",
borderRadius:4,
shadowColor:"lightgray",
shadowBlur:20,
formatter:"{b|}{abg|}\n{hr|}\n
{a|{a}：{@[1]}
}{d|kyiws6i%}
",
rich:{
a:{
fontSize:14,
fontWeight:"bold",13.3.2圖表制作（1）基礎(chǔ)配置項(xiàng)
數(shù)據(jù)系列組件：餅圖
lineHeight:33,
},
hr:{
borderColor:"black",
width:"100%",
borderWidth:1,
height:0,
},
b:{
fontSize:14,
lineHeight:22,
align:"center",
fontWeight:"bold",
},
d:{
fontSize:14,
fontWeight:"bold",
color:"ivory",
backgroundColor:"black",
padding:[3,4],
borderRadius:4,
},
},
},
},
],
},13.3.2圖表制作（2）可選配置項(xiàng)
options:[{//第一天的數(shù)據(jù)
yAxis:{data:["NJ01","XA01","HRB01","ZZ01","SH01","JN01","HF01","CD01", "HZ01","CC01","WLMQ01","HK01","SJZ01","NN01","MO01", "YC01","WH01","GZ01","XN01","CS01","NC01","TJ01","SY01","CQ01","FZ01","TY01","BJ01","HHHT01","HK01","GY01","LZ01","LS01","TB01","KM01",],},series:[{data:[275,238,225,198,157,155,145,142,141,133,122,114,112,109,108,107,103,102,99,98,98,98,97,94,87,83,78,76,68,48,40,38,34,33,],},
{
data:[
{name:"優(yōu)",value:[0,5]},
{name:"良",value:[51,11]},
{name:"輕度污染",value:[101,12]},
{name:"中度污染",value:[151,3]},
{name:"重度污染",value:[201,3]},
],
},
],
},13.3.2圖表制作13.3.2圖表制作（2）可選配置項(xiàng)
{//第二天的數(shù)據(jù)
yAxis:{data:["XA01","ZZ01","HF01","JN01","WLMQ01","CD01","SJZ01", "GZ01","CS01","WH01","HZ01","CQ01","NN01","XN01","HRB01","NC01","TY01","HK01","NJ01","MO01","SH01","LZ01","FZ01","YC01","TJ01","BJ01","SY01","HK01","GY01","CC01","LS01","TB01","HHHT01","KM01",],},series:[{
data:[
278,168,166,165,141,138,114,109,109,108,108,106,104,103,101,93,91,87,82,73,72,61,60,60,58,54,53,52,48,41,39,35,34,27,],},{data:[{name:"優(yōu)",value:[0,6]},{name:"良",value:[51,13]},{name:"輕度污染",value:[101,11]},{name:"中度污染",value:[151,3]},{name:"重度污染",value:[201,1]},],},],},13.3.2圖表制作（2）可選配置項(xiàng)
{//第三天的數(shù)據(jù)
yAxis:{data:["XA01","SJZ01","WLMQ01","GZ01","NN01","WH01","XN01","CQ01","LZ01","CS01","HK01","ZZ01","CD01","TY01","HZ01", "SY01","NC01","JN01","CC01","FZ01","YC01","HF01","HRB01","MO01","HHHT01","HK01","SH01","LS01","TJ01","KM01", "NJ01","TB01","GY01","BJ01",],},series:[{data:[191,124,110,93,91,91,91,87,87,70,65,64,62,62,59,59,58,56,53,52,50,48,48,47,47,45,42,40,38,36,36,34,24,23,],},
{data:[{name:"優(yōu)",value:[0,14]},{name:"良",value:[51,17]},{name:"輕度污染",value:[101,2]},{name:"中度污染",value:[151,1]},],},],},],13.3.3
圖表展示使用瀏覽器打開(kāi)“index.html”查看圖表顯示效果。
13.4動(dòng)態(tài)聯(lián)動(dòng)圖表13.4.1準(zhǔn)備工作（1）創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)13.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換組裝JSON字符串：添加4個(gè)函數(shù)函數(shù)名稱參數(shù)返回值transform(rawData)rawData：原始數(shù)據(jù)。新數(shù)據(jù)，在原始數(shù)據(jù)基礎(chǔ)上增加了AQI。sortAQI(dct)dct：監(jiān)測(cè)站及其AQI的鍵值對(duì)。按照AQI排序后的鍵值對(duì)，用于實(shí)現(xiàn)條形圖的排序效果。countAQI(barData)barData：條形圖的數(shù)據(jù)體。餅圖的數(shù)據(jù)體，通過(guò)對(duì)條形圖的數(shù)據(jù)進(jìn)行分類匯總得到。getBarJSON(data)data：新數(shù)據(jù)。JSON字符串，用于條形圖和餅圖。13.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換發(fā)布JSON字符串：添加視圖函數(shù)“json_for_linkage()”@app.route('/json_for_linkage')defjson_for_linkage():
sql='''
SELECTstation,pm25,pm10,so2,no2,co,o3
FROM airpollution
WHERE(station='HI01' ORstation='NN01' ORstation='MO01' ORstation='HK01' ORstation='GZ01' ORstation='KM01' ORstation='TB01'
ORstation='GY01' ORstation='FZ01' ORstation='CS01' ORstation='NC01' ORstation='CQ01' ORstation='LS01' ORstation='CH01' ORstation='WH01' ORstation='HZ01' ORstation='SH01' ORstation='HF01' ORstation='NJ01' ORstation='XA01'
ORstation='ZZ01' ORstation='LZ01' ORstation='XN01' ORstation='JN01' ORstation='TY01' ORstation='SJZ01' ORstation='YI01' ORstation='TJ01' ORstation='BJ01' ORstation='HHHT01'
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 山莊購(gòu)銷合同(標(biāo)準(zhǔn)版)
- 2025年民生銀行天津分行社會(huì)招聘?jìng)淇碱}庫(kù)參考答案詳解
- 2024年廣州市番禺區(qū)教育系統(tǒng)招聘考試真題
- 2025年如皋市衛(wèi)健系統(tǒng)部分單位公開(kāi)招聘事業(yè)編制工作人員49人備考題庫(kù)及答案詳解1套
- java課程設(shè)計(jì)掃雷報(bào)告摘要
- 國(guó)家知識(shí)產(chǎn)權(quán)局專利局專利審查協(xié)作湖北中心2026年度專利審查員公開(kāi)招聘40人備考題庫(kù)參考答案詳解
- 2025 九年級(jí)語(yǔ)文下冊(cè)戲劇矛盾沖突類型分析課件
- 2025年西安市臨潼區(qū)秦漢學(xué)校教師招聘考試重點(diǎn)試題及答案解析
- 2025河北唐山一中教育集團(tuán)金楓葉學(xué)校招聘教師1人考試重點(diǎn)題庫(kù)及答案解析
- 2025海南儋州市衛(wèi)生健康委員會(huì)面向社會(huì)考核招聘衛(wèi)健系統(tǒng)事業(yè)單位編內(nèi)人員49人（一號(hào)）考試重點(diǎn)題庫(kù)及答案解析
- 知道智慧樹(shù)西方文論經(jīng)典導(dǎo)讀滿分測(cè)試答案
- 醫(yī)藥行業(yè)合規(guī)培訓(xùn)課件
- 水域事故緊急救援與處置預(yù)案
- 新能源汽車工程技術(shù)專業(yè)教學(xué)標(biāo)準(zhǔn)（高等職業(yè)教育本科）2025修訂
- 四川省成都市2023級(jí)高中畢業(yè)班摸底測(cè)試英語(yǔ)試題（含答案和音頻）
- 2025-2030中國(guó)除濕干燥機(jī)行業(yè)應(yīng)用趨勢(shì)與需求規(guī)模預(yù)測(cè)報(bào)告
- 2025廣東高考物理試題(大題部分)+評(píng)析
- 2025年中國(guó)國(guó)際貨運(yùn)代理行業(yè)市場(chǎng)情況研究及競(jìng)爭(zhēng)格局分析報(bào)告
- QGDW11447-202410kV-500kV輸變電設(shè)備交接試驗(yàn)規(guī)程
- 家庭教育概論 課件 第5章 親子關(guān)系：家庭教育的起點(diǎn)與結(jié)果
- 500千伏輸電線路工程項(xiàng)目管理實(shí)施規(guī)劃
評(píng)論
0/150
提交評(píng)論