版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领
文档简介
第十章
雷达图GOAL学习目标1了解雷达图的概念、特点和应用场景2了解Echarts雷达坐标系的常用属性3掌握Echarts雷达坐标系的基本用法4掌握利用Web前端开发技术制作静态雷达图的方法5掌握综合利用Web前后端开发技术制作动态雷达图的方法目录Contents10.1雷达图简介10.2Echarts雷达图核心组件10.3静态雷达图10.4动态雷达图10.1雷达图简介
雷达图又称网络图、蜘蛛网图，是一种适用于展示指标构成以及次级指标之间权重分布的信息图表，经常应用于性能评估等场景中。雷达图上通常有三条以上的坐标轴，这些坐标轴从共同的坐标原点向四周辐射，将外接圆周平均分成面积相等的几个扇形区域，形成了类似“雷达”的图案。雷达图所围的面积能够反映综合指标的测度结果，而展布的形态则能够反映综合指标在各个次级指标上的权重分布，并有助于揭示占主导地位的次级指标。10.1雷达图简介10.1雷达图简介雷达图示例10.2Echarts雷达图核心组件10.2.1数据系列组件Echarts雷达图数据系列组件常用属性属性说明type取值为“radar”即可使用雷达图。symbol标记的图形，取值为“none”时表示不使用标记。lineStyle线条样式，包含若干子属性。data数据体，结构形如：“[{"name":"HRB01","value":[225,225,115,16,71,50,16]}]”10.2.2雷达坐标系组件雷达坐标系组件的常用属性属性说明center圆心坐标，决定雷达图的位置，取值支持绝对值和百分比。radius半径，决定坐标系的大小，取值支持绝对值和百分比。startAngle坐标系的起始角度，即第一条坐标轴的角度。axisName坐标轴名称的样式，包含若干子属性。axisLine坐标轴线的样式，包含若干子属性。shape坐标系的形状，取值为“polygon”（多边形）或“circle”（圆形）。splitNumber坐标轴的分割段数。splitLine坐标轴分隔线的样式，包含若干子属性。splitArea是否显示分隔区域。indicator指示器，用于设置坐标轴的名称和取值范围，取值示例：[{text:'AQI',max:300},{text:'IAQI_PM2.5',max:300}]10.3静态雷达图（1）创建项目目录结构10.3.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="radar"></div><scriptsrc="js/radar.js"></script></body></html>10.37.1准备工作（2）创建HTML文档body{background-color:black;}#radar{position:absolute;left:15%;top:10%;width:70%;height:80%;}10.3.1准备工作（3）设置元素样式新建名为“main.css”的CSS文档10.3.1准备工作（4）数据准备5个监测站的空气质量指数及分指数监测站AQIIAQI_PM2.5IAQI_PM10IAQI_SO2IAQI_NO2IAQI_COIAQI_O3LZ0140403614171530TY0183838348383117HK011141148112602631ZZ0119819814432101488HRB012252251151671501610.3.1准备工作（4）数据准备雷达图数据系列组件“data”属性的要求，将计算结果整理为如下格式[{"name":"HRB01","value":[225,225,115,16,71,50,16]},{"name":"ZZ01","value":[198,198,144,32,101,48,8]},{"name":"LZ01","value":[40,40,36,14,17,15,30]},{"name":"TY01","value":[83,83,83,48,38,31,17]},{"name":"HK01","value":[114,114,81,12,60,26,31]}]title:{text:'空气质量指数雷达图',textStyle:{fontSize:28,color:'ivory'},10.3.2图表制作（1）标题组件subtext:'日期：2018-01-01',subtextStyle:{fontSize:20,color:'ivory'},left:'center'},radar:[{indicator:[{text:'AQI',max:300},{text:'IAQI_PM2.5',max:300},{text:'IAQI_PM10',max:300},{text:'IAQI_SO2',max:300},{text:'IAQI_NO2',max:300},{text:'IAQI_CO',max:300},{text:'IAQI_O3',max:300}],10.3.2图表制作（2）雷达坐标系组件center:['50%','50%'],radius:200,startAngle:90,splitNumber:5,shape:'circle',axisName:{formatter:'{value}',color:'ivory',fontSize:16,fontWeight:'bold'},10.3.2图表制作（2）雷达坐标系组件splitLine:{lineStyle:{color:['rgba(254,248,239,1)','rgba(254,248,239,0.8)','rgba(254,248,239,0.6)','rgba(254,248,239,0.4)','rgba(254,248,239,0.2)','rgba(254,248,239,0.1)']}},splitArea:{show:false},axisLine:{lineStyle:{color:'rgba(238,197,102,0.5)'}}}],10.3.2图表制作（3）视觉映射组件visualMap:{show:false,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'}]},10.3.2图表制作（4）数据系列组件series:[{type:'radar',symbol:'none',lineStyle:{width:2},emphasis:{lineStyle:{width:4}},data:[{"name":"HRB01","value":[225,225,115,16,71,50,16]},{"name":"ZZ01","value":[198,198,144,32,101,48,8]},{"name":"LZ01","value":[40,40,36,14,17,15,30]},{"name":"TY01","value":[83,83,83,48,38,31,17]},{"name":"HK01","value":[114,114,81,12,60,26,31]}]}]10.3.3图表展示使用浏览器打开“index.html”查看雷达图显示效果
10.4动态雷达图10.4.1准备工作创建项目目录结构defgetRadarJSON(data):returnDct={}lst=[]forstationindata:dct={}value_pm25=station[1]value_pm10=station[2]value_so2=station[3]value_no2=station[4]value_co=station[5]value_o3=station[6]10.4.2图表制作（1）数据转换组装JSON字符串：修改“preprocess.py”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)aqi=get_aqi(station[1:])dct['name']=station[0]dct['value']=[aqi,iaqi_pm25,iaqi_pm10,iaqi_so2,iaqi_no2,iaqi_co,iaqi_o3]lst.append(dct)returnDct['radar']=lstreturnjson.dumps(returnDct,ensure_ascii=False)@app.route('/json_for_radar')defjson_for_radar():sql='''SELECTstation,pm25,pm10,so2,no2,co,o3FROMairpollutionWHERE(station='HK01' ORstation='ZZ01' ORstation='LZ01' ORstation='TY01' ORstation='HRB01')ANDdate='2018-01-0100:00:00''''returngetRadarJSON(getData(sql))10.4.2图表制作（1）数据转换发布JSON数据接
温馨提示
- 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2025年上海科技大学综合办公室招聘纪检主管1名备考题库及参考答案详解1套
- 2025年海南微城未来教育学校招聘多名教师备考题库完整答案详解
- 2025年大理白族自治州教育科学研究所公开选调事业单位工作人员备考题库完整参考答案详解
- 2025年苍南县人才科创有限公司招聘备考题库及完整答案详解一套
- 2025年泰州市中西医结合医院、泰州市高港中医院公开招聘备案制人员11人备考题库及一套答案详解
- 2025年兴国县第三中学招聘教师备考题库及参考答案详解一套
- 2025年华北电力大学公开选拔党委政策研究室主任的备考题库附答案详解
- 2025年商丘市睢县消防救援大队公开招录11名政府专职消防员备考题库及参考答案详解一套
- 2025贵州能源集团有限公司第一批综合管理岗招聘41人笔试备考重点题库及答案解析
- 2025年常州工程职业技术学院长期公开招聘高层次人才备考题库及一套完整答案详解
- 2025年下半年上海当代艺术博物馆公开招聘工作人员（第二批）参考笔试试题及答案解析
- 2026国家粮食和物资储备局垂直管理局事业单位招聘应届毕业生27人考试历年真题汇编附答案解析
- 癌性疼痛的中医治疗
- 大学生就业面试培训
- 2024年江苏省普通高中学业水平测试小高考生物、地理、历史、政治试卷及答案(综合版)
- 煎药室岗前培训PPT
- 家具制造企业安全检查表优质资料
- 如家酒店新版
- GA 1016-2012枪支(弹药)库室风险等级划分与安全防范要求
- 《电能质量分析》课程教学大纲
- 8 泵站设备安装工程单元工程质量验收评定表及填表说明
评论
0/150
提交评论