版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡(jiǎn)介
第十一章
餅圖GOAL學(xué)習(xí)目標(biāo)1了解餅圖的概念、特點(diǎn)和應(yīng)用場(chǎng)景2了解Echarts餅圖的常用屬性3掌握標(biāo)簽內(nèi)容格式器、富文本樣式的基本用法4掌握利用Web前端開發(fā)技術(shù)制作靜態(tài)餅圖的方法5掌握綜合利用Web前后端開發(fā)技術(shù)制作動(dòng)態(tài)餅圖的方法目錄Contents11.1
餅圖簡(jiǎn)介11.2
Echarts餅圖常用屬性11.3
靜態(tài)餅圖11.4
動(dòng)態(tài)餅圖11.1餅圖簡(jiǎn)介餅圖是一種常用的統(tǒng)計(jì)圖表，主要用于展示部分占總體的比重。餅圖有三種常見形態(tài)：經(jīng)典餅圖、環(huán)形圖、南丁格爾玫瑰圖。11.1餅圖簡(jiǎn)介11.2Echarts餅圖常用屬性
11.2
Echarts餅圖常用屬性Echarts餅圖數(shù)據(jù)系列組件的常用屬性屬性說明center圓心坐標(biāo)，決定餅圖的位置，取值支持絕對(duì)值和百分比。radius餅圖半徑，決定餅圖的大小，取值支持絕對(duì)值和百分比。roseType是否使用南丁格爾玫瑰圖，取值可選：“radius”（半徑模式）或“area”（圓心角模式）。encode設(shè)置數(shù)據(jù)維度與組件的關(guān)聯(lián)關(guān)系，包含若干子屬性。encode.value將數(shù)據(jù)維度與扇區(qū)進(jìn)行關(guān)聯(lián)，設(shè)置為“[1]”時(shí)，根據(jù)數(shù)據(jù)體中“value”值的第2列數(shù)據(jù)劃分扇區(qū)。itemStyle扇區(qū)的樣式，包含若干子屬性。
11.2
Echarts餅圖常用屬性Echarts餅圖數(shù)據(jù)系列組件的常用屬性屬性說明itemStyle.borderRadius扇區(qū)內(nèi)外圓角的半徑，取值支持絕對(duì)值和百分比。label扇區(qū)的文本標(biāo)簽，包含若干子屬性。label.alignTo標(biāo)簽的對(duì)齊方式，取值可選：“none”（引導(dǎo)線的長(zhǎng)度為固定值）、“l(fā)abelLine”（引導(dǎo)線末端對(duì)齊）或“edge”（標(biāo)簽?zāi)┒藢?duì)齊）。label.formatter標(biāo)簽內(nèi)容格式器，支持字符串模板和回調(diào)函數(shù)兩種形式。label.rich在標(biāo)簽中自定義富文本樣式，包括若干子屬性。data數(shù)據(jù)體，結(jié)構(gòu)形如：“[{name:'優(yōu)',value:[0,5]}]”
11.2
Echarts餅圖常用屬性“l(fā)abel.formatter”屬性支持的模板變量模板變量說明{a}系列名，即數(shù)據(jù)系列組件的“name”屬性值。數(shù)據(jù)名，即數(shù)據(jù)系列組件“data”屬性值中“name”鍵值對(duì)的值。{c}數(shù)據(jù)值，即數(shù)據(jù)系列組件“data”屬性值中“value”鍵值對(duì)的值。ccuuwiw百分比，自動(dòng)計(jì)算得到。{@xxx}數(shù)據(jù)系列組件“data”屬性值中名為“xxx”維度的值。{@[n]}數(shù)據(jù)系列組件“data”屬性值中第n個(gè)維度的值（從0開始計(jì)數(shù)）。11.3靜態(tài)餅圖11.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>空氣質(zhì)量指數(shù)分類占比餅圖</title></head><body><divid="pie"></div><scriptsrc="js/pie.js"></script></body></html>11.3.1準(zhǔn)備工作（2）準(zhǔn)備HTML文檔body{background-color:black;}#pie{position:absolute;left:15%;top:10%;width:70%;height:80%;}11.3.1準(zhǔn)備工作（3）設(shè)置元素樣式34個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)及其所屬類別11.3.1準(zhǔn)備工作（4）數(shù)據(jù)準(zhǔn)備序號(hào)監(jiān)控站代碼AQIAQI類別1HI0168良2NN01109輕度污染3MO01108輕度污染4HK01114輕度污染5GZ01102輕度污染6KM0133優(yōu)7TB0134優(yōu)........................34個(gè)監(jiān)測(cè)站的空氣質(zhì)量指數(shù)分類匯總結(jié)果（4）數(shù)據(jù)準(zhǔn)備AQI類別數(shù)量（個(gè)）比重（%）優(yōu)514.71良1132.35輕度污染1235.30中度污染38.82重度污染38.8211.3.1準(zhǔn)備工作
按照餅圖數(shù)據(jù)系列組件“data”屬性的要求，將數(shù)據(jù)整理為如下格式：
[{name:'優(yōu)',value:[0,5]},
{name:'良',value:[51,11]},
{name:'輕度污染',value:[101,12]},
{name:'中度污染',value:[151,3]},
{name:'重度污染',value:[201,3]}]（4）數(shù)據(jù)準(zhǔn)備11.3.1準(zhǔn)備工作title:{text:'空氣質(zhì)量指數(shù)分類占比餅圖',textStyle:{fontSize:28,color:'ivory'},subtext:'日期：2018-01-01',subtextStyle:{fontSize:20,color:'ivory'},left:'center'},11.3.2
圖表制作（1）標(biāo)題組件legend:{bottom:'15%',textStyle:{fontSize:22,color:'ivory'}},11.3.2
圖表制作（2）圖例組件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'}],show:false},11.3.2
圖表制作（3）視覺映射組件series:[{name:'數(shù)量及占比',type:'pie',center:['50%','45%'],radius:[70,150],roseType:'area',encode:{value:[1]},itemStyle:{borderRadius:8},11.3.2
圖表制作（4）數(shù)據(jù)系列組件11.3.2
圖表制作（4）數(shù)據(jù)系列組件label:{alignTo:'labelLine',backgroundColor:'ivory',borderRadius:4,shadowColor:'lightgray',shadowBlur:20,formatter:'{b|}{abg|}\n{hr|}\n{a|{a}：{@[1]}}{d|ggmguyk%}',rich:{a:{fontSize:14,fontWeight:'bold',lineHeight:33},
hr:{borderColor:'black',width:'100%',borderWidth:1,height:0},b:{fontSize:14,lineHeight:22,align:'center',fontWeight:'bold'},11.3.2
圖表制作（4）數(shù)據(jù)系列組件d:{fontSize:14,fontWeight:'bold',color:'ivory',backgroundColor:'black',padding:[3,4],borderRadius:4}}},11.3.2
圖表制作（4）數(shù)據(jù)系列組件
data:[{name:'優(yōu)',value:[0,5]},{name:'良',value:[51,11]},{name:'輕度污染',value:[101,12]},{name:'中度污染',value:[151,3]},{name:'重度污染',value:[201,3]}]}]11.3.3
圖表展示使用瀏覽器打開“index.html”查看餅圖顯示效果11.4動(dòng)態(tài)餅圖11.4.1準(zhǔn)備工作創(chuàng)建項(xiàng)目目錄結(jié)構(gòu)fromaqiimportget_aqiimportjsondefgetPieJSON(data):returnDct={}count_A=0count_B=0count_C=0count_D=0count_E=0count_F=011.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換定義“getPieJSON()”函數(shù)，用于組裝JSON字符串forstationindata:aqi=get_aqi(station[1:])if0<=aqi<=50:count_A+=1if51<=aqi<=100:count_B+=1if101<=aqi<=150:count_C+=1if151<=aqi<=200:count_D+=1if201<=aqi<=300:count_E+=1ifaqi>301:count_F+=1pieData=[{'name':'優(yōu)','value':[0,count_A]},{'name':'良','value':[51,count_B]},{'name':'輕度污染','value':[101,count_C]},{'name':'中度污染','value':[151,count_D]},{'name':'重度污染','value':[201,count_E]}]returnDct['pie']=pieDatareturnjson.dumps(returnDct,ensure_ascii=False)11.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換定義“getPieJSON()”函數(shù)，用于組裝JSON字符串@app.route('/json_for_pie')defjson_for_pie():sql='''SELECTstation,pm25,pm10,so2,no2,co,o3FROM airpollution WHERE(station='HI01' ORstation='NN01' ORstation='MO01' ORstation='HK01' ORstation='GZ01'11.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換添加視圖函數(shù)“json_for_pie()”，用于發(fā)布JSON數(shù)據(jù)接口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'11.4.2圖表制作（1）數(shù)據(jù)轉(zhuǎn)換ORstation='BJ01' ORstation='HHHT01' ORstation='SY
溫馨提示
- 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ì)自己和他人造成任何形式的傷害或損失。
最新文檔
- 杭州市錢塘高級(jí)中學(xué)2026年度教師招聘?jìng)淇碱}庫有答案詳解
- 2025年實(shí)驗(yàn)室與設(shè)備管理處校內(nèi)招聘?jìng)淇碱}庫及答案詳解一套
- 2025年凌云縣振凌投資集團(tuán)有限責(zé)任公司公開招聘職業(yè)經(jīng)理人備考題庫完整參考答案詳解
- 2025年貴州蔬菜集團(tuán)農(nóng)業(yè)科技發(fā)展有限公司安龍分公司面向社會(huì)公開招聘?jìng)淇碱}庫完整答案詳解
- 中國(guó)礦業(yè)大學(xué)（北京）2026年度專任教師和輔導(dǎo)員招聘?jìng)淇碱}庫及一套完整答案詳解
- 2025年太倉市第一人民醫(yī)院第一批事業(yè)編制公開招聘專業(yè)技術(shù)人員16人備考題庫完整參考答案詳解
- 2025年寧波市奉源水利勘測(cè)規(guī)劃設(shè)計(jì)有限公司公開招聘工作人員備考題庫及答案詳解一套
- 2025年市中心醫(yī)院選聘170名人員備考題庫完整答案詳解
- 2025年徐州市云龍區(qū)圖書館運(yùn)營(yíng)單位外包服務(wù)人員招聘?jìng)淇碱}庫及一套完整答案詳解
- 2025年上海第二工業(yè)大學(xué)工作人員招聘61人備考題庫及一套答案詳解
- 【MOOC】數(shù)據(jù)結(jié)構(gòu)與算法-北京大學(xué) 中國(guó)大學(xué)慕課MOOC答案
- 《我的白鴿》課件
- 中醫(yī)內(nèi)科學(xué)智慧樹知到答案2024年浙江中醫(yī)藥大學(xué)
- 縫紉機(jī)銷售協(xié)議范例
- MOOC 理解馬克思-南京大學(xué) 中國(guó)大學(xué)慕課答案
- 安全工器具登記臺(tái)賬
- 《荷塘月色》《故都的秋》比較閱讀-統(tǒng)編版高中語文必修上冊(cè)
- 中央電大護(hù)理專業(yè)本科通科實(shí)習(xí)出科考核病歷
- 衛(wèi)生院基本公共衛(wèi)生服務(wù)獎(jiǎng)懲制度
- 氣動(dòng)沖床設(shè)備日常點(diǎn)檢標(biāo)準(zhǔn)作業(yè)指導(dǎo)書
- β-丙氨酸補(bǔ)充對(duì)運(yùn)動(dòng)能力的影響
評(píng)論
0/150
提交評(píng)論