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

下载本文档

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

文档简介

第八章

热力图GOAL学习目标1了解热力图的概念、特点和应用场景2了解Echarts日历热力图的核心组件及常用属性3掌握Echarts日历坐标系组件、视觉映射组件的基本用法4掌握利用Web前端开发技术制作静态日历热力图的方法5掌握综合利用Web前后端开发技术制作动态日历热力图的方法目录Contents8.1热力图简介8.2Echarts日历热力图核心组件8.3静态日历热力图8.4动态日历热力图8.1热力图简介

热力图又称热图，是一种通过颜色表现数值大小的图表，在各种业务数据分析场景中有着十分广泛的应用。热力图通常与空间或时间坐标系结合，用于展示业务数据在空间或时间上的分布状态。当热力图与日历坐标系结合时，就形成了日历热力图，以日历的形式展示数据的密集程度或变化趋势。8.1

热力图简介8.1

热力图简介日历热力图示例8.2Echarts日历热力图核心组件Echarts热力图数据系列组件常用属性8.2.1数据系列组件属性说明type图表类型，设置为“heatmap”（热力图）。coordinateSystem该系列使用的坐标系，可选项有“cartesian2d”（笛卡尔坐标系）、“geo”（地理坐标系）、“calendar”（日历坐标系）。data数据体，结构形如：“[['2018-01-01',84.82],......]”。label标签，可利用formatter属性实现格式化输出。日历坐标系组件常用属性8.2.2日历坐标系组件属性说明cellSize日历单元格的尺寸，支持自适应设置。range日历坐标的范围，支持年、月、日等多种日期格式。itemStyle日历单元格的样式。dayLabel设置日历坐标系中“星期轴”的样式，包含若干子属性。dayLabel.firstDay每周从周几开始，默认值为“0”，即从周日开始。dayLabel.margin星期标签与轴线之间的距离。dayLMap标签的显示效果，可选项有：“EN”（英文），“ZH”（中文）或自定义。monthLabel设置日历坐标系中“月份轴”的样式，包含若干子属性。monthLabel.formatter用于格式化月份标签，支持字符串模板和回调函数两种形式，默认显示range属性定义的月份。yearLabel设置日历坐标中“年”的样式，包含若干子属性。yearLabel.formatter用于格式化年份标签，支持字符串模板和回调函数两种形式，默认显示range属性定义的年份。连续型视觉映射组件常用属性8.2.3视觉映射组件属性说明type组件类型，可选项有“piecewise”（分段型）和“continuous”（连续型）。pieces定义每一段的取值范围、标签和样式，取值示例：[{min:0,max:35,label:'0~35μg/m^3',color:'lime'}]orient布局方式，可选项有：“vertical”（垂直）和“horizontal”（水平）。itemWidth色标的宽度。itemHeight色标的高度。text色标两端的标签文本，如：['High','Low']。8.3静态日历热力图8.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>PM2.5浓度监测日历热力图</title></head><body><divid="heatmap"></div><scriptsrc="JS/heatmap.js"></script></body></html>8.3.1准备工作（2）创建HTML文档body{background-color:black;}#heatmap{position:absolute;left:15%;top:15%;width:70%;height:70%;}8.3.1准备工作（3）设置元素样式新建名为“main.css”的CSS文档[['2018-01-01',84.82],['2018-01-02',86.28],['2018-01-03',94.59],['2018-01-04',84.94],['2018-01-05',143.21],['2018-01-06',217.20],['2018-01-07',111.68],['2018-01-08',36.17],['2018-01-09',24.53],['2018-01-10',31.62],['2018-01-11',43.92],['2018-01-12',85.70],['2018-01-13',162.49],['2018-01-14',244.47],['2018-01-15',220.71],['2018-01-16',147.08],['2018-01-17',172.81],['2018-01-18',207.00],['2018-01-19',175.46],['2018-01-20',226.61],['2018-01-21',54.49],['2018-01-22',76.07],['2018-01-23',76.96],['2018-01-24',85.94],['2018-01-25',105.63],['2018-01-26',50.46],['2018-01-27',105.17],['2018-01-28',142.73],['2018-01-29',58.13],['2018-01-30',41.87],['2018-01-31',34.24]]8.3.1准备工作（4）数据准备title:{text:'PM2.5浓度监测日历热力图',textStyle:{color:'lightgray',fontSize:28},subtext:'监测站：SJZ01',show:true,subtextStyle:{color:'lightgray',fontSize:20,},left:'center'},8.3.2图表制作（1）标题组件calendar:{cellSize:'auto',orient:'vertical',left:'20%',right:'20%',top:'25%',bottom:'20%',range:'2018-01',itemStyle:{borderWidth:0.5,shadowColor:'white',shadowBlur:10,},8.3.2图表制作（2）日历坐标系组件dayLabel:{firstDay:1,margin:'35%',nameMap:'ZH',textStyle:{color:'lightgray',fontSize:20}},monthLabel:{show:true,nameMap:'ZH',formatter:'{yyyy}年{M}月',textStyle:{color:'lightgray',fontSize:28,}},yearLabel:{show:false}},visualMap:{type:'piecewise',pieces:[{min:0,max:35,color:'lime'},{min:35,max:75,color:'yellow'},{min:75,max:115,color:'orange'},{min:115,max:150,color:'red'},{min:150,max:250,color:'purple'},{min:250,max:350,color:'brown'}],orient:'horizontal',right:'20%',8.3.2图表制作（3）视觉映射组件bottom:'20%',itemWidth:30,itemHeight:30,text:['High','Low'],textStyle:{color:'lightgray',fontSize:18},show:true},series:[{type:'heatmap',coordinateSystem:'calendar',data:[['2018-01-01',84.82],......],label:{show:true,formatter:function(params){returnecharts.format.formatTime('d',params.value[0]);},fontSize:18,color:'black',}}],8.3.2图表制作（4）数据系列组件8.3.3图表展示使用浏览器打开“index.html”查看热力图显示效果

8.4动态日历热力图8.4.1准备工作创建项目目录结构importjsondefgetHeatJSON(data):dct={}pm25=[]foritemindata:day=item[0]pm25.append([day,item[1]])dct['pm25']=pm25returnjson.dumps(dct,ensure_ascii=False)8.4.2图表制作（1）数据转换组装JSON字符串：修改“preprocess.py”@app.route('/json_for_heatmap')defjson_for_heatmap():sql='''SELECTDATE_FORMAT(date,'%Y-%m-%d')asday,pm25FROMairpollutionWHEREstation='SJZ01''''returngetHeatJSON(getData(sql))8.4.2图表制作（1）数据转换发布JSON数据接口：添加视图函

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

温馨提示

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

最新文档

评论

0/150

提交评论