《大数据可视化技术》课件 第十一章 饼图_第1页
《大数据可视化技术》课件 第十一章 饼图_第2页
《大数据可视化技术》课件 第十一章 饼图_第3页
《大数据可视化技术》课件 第十一章 饼图_第4页
《大数据可视化技术》课件 第十一章 饼图_第5页
已阅读5页，还剩30页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

第十一章

饼图GOAL学习目标1了解饼图的概念、特点和应用场景2了解Echarts饼图的常用属性3掌握标签内容格式器、富文本样式的基本用法4掌握利用Web前端开发技术制作静态饼图的方法5掌握综合利用Web前后端开发技术制作动态饼图的方法目录Contents11.1

饼图简介11.2

Echarts饼图常用属性11.3

静态饼图11.4

动态饼图11.1饼图简介饼图是一种常用的统计图表，主要用于展示部分占总体的比重。饼图有三种常见形态：经典饼图、环形图、南丁格尔玫瑰图。11.1饼图简介11.2Echarts饼图常用属性

11.2

Echarts饼图常用属性Echarts饼图数据系列组件的常用属性属性说明center圆心坐标，决定饼图的位置，取值支持绝对值和百分比。radius饼图半径，决定饼图的大小，取值支持绝对值和百分比。roseType是否使用南丁格尔玫瑰图，取值可选：“radius”（半径模式）或“area”（圆心角模式）。encode设置数据维度与组件的关联关系，包含若干子属性。encode.value将数据维度与扇区进行关联，设置为“[1]”时，根据数据体中“value”值的第2列数据划分扇区。itemStyle扇区的样式，包含若干子属性。

11.2

Echarts饼图常用属性Echarts饼图数据系列组件的常用属性属性说明itemStyle.borderRadius扇区内外圆角的半径，取值支持绝对值和百分比。label扇区的文本标签，包含若干子属性。label.alignTo标签的对齐方式，取值可选：“none”（引导线的长度为固定值）、“labelLine”（引导线末端对齐）或“edge”（标签末端对齐）。label.formatter标签内容格式器，支持字符串模板和回调函数两种形式。label.rich在标签中自定义富文本样式，包括若干子属性。data数据体，结构形如：“[{name:'优',value:[0,5]}]”

11.2

Echarts饼图常用属性“label.formatter”属性支持的模板变量模板变量说明{a}系列名，即数据系列组件的“name”属性值。{b}数据名，即数据系列组件“data”属性值中“name”键值对的值。{c}数据值，即数据系列组件“data”属性值中“value”键值对的值。{d}百分比，自动计算得到。{@xxx}数据系列组件“data”属性值中名为“xxx”维度的值。{@[n]}数据系列组件“data”属性值中第n个维度的值（从0开始计数）。11.3静态饼图11.3.1准备工作（1）创建项目目录结构<!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>空气质量指数分类占比饼图</title></head><body><divid="pie"></div><scriptsrc="js/pie.js"></script></body></html>11.3.1准备工作（2）准备HTML文档body{background-color:black;}#pie{position:absolute;left:15%;top:10%;width:70%;height:80%;}11.3.1准备工作（3）设置元素样式34个监测站的空气质量指数及其所属类别11.3.1准备工作（4）数据准备序号监控站代码AQIAQI类别1HI0168良2NN01109轻度污染3MO01108轻度污染4HK01114轻度污染5GZ01102轻度污染6KM0133优7TB0134优........................34个监测站的空气质量指数分类汇总结果（4）数据准备AQI类别数量（个）比重（%）优514.71良1132.35轻度污染1235.30中度污染38.82重度污染38.8211.3.1准备工作

按照饼图数据系列组件“data”属性的要求，将数据整理为如下格式：

[{name:'优',value:[0,5]},

{name:'良',value:[51,11]},

{name:'轻度污染',value:[101,12]},

{name:'中度污染',value:[151,3]},

{name:'重度污染',value:[201,3]}]（4）数据准备11.3.1准备工作title:{text:'空气质量指数分类占比饼图',textStyle:{fontSize:28,color:'ivory'},subtext:'日期：2018-01-01',subtextStyle:{fontSize:20,color:'ivory'},left:'center'},11.3.2

图表制作（1）标题组件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:'数量及占比',type:'pie',center:['50%','45%'],radius:[70,150],roseType:'area',encode:{value:[1]},itemStyle:{borderRadius:8},11.3.2

图表制作（4）数据系列组件11.3.2

图表制作（4）数据系列组件label:{alignTo:'labelLine',backgroundColor:'ivory',borderRadius:4,shadowColor:'lightgray',shadowBlur:20,formatter:'{b|{b}}{abg|}\n{hr|}\n{a|{a}：{@[1]}}{d|{d}%}',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）数据系列组件d:{fontSize:14,fontWeight:'bold',color:'ivory',backgroundColor:'black',padding:[3,4],borderRadius:4}}},11.3.2

图表制作（4）数据系列组件

data:[{name:'优',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动态饼图11.4.1准备工作创建项目目录结构fromaqiimportget_aqiimportjsondefgetPieJSON(data):returnDct={}count_A=0count_B=0count_C=0count_D=0count_E=0count_F=011.4.2图表制作（1）数据转换定义“getPieJSON()”函数，用于组装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':'优','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）数据转换定义“getPieJSON()”函数，用于组装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）数据转换添加视图函数“json_for_pie()”，用于发布JSON数据接口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）数据转换ORstation='BJ01' ORstation='HHHT01' ORstation='SY

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论