大数据技能竞赛 echarts热力图简写易懂版本 over

最新推荐文章于 2023-11-02 14:19:46 发布

清晨Q

最新推荐文章于 2023-11-02 14:19:46 发布

阅读量1.4k

点赞数 1

分类专栏：笔记文章标签： echarts 前端可视化 javascript flask

本文链接：https://blog.csdn.net/weixin_51026773/article/details/121618270

版权

笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

一、热力图
二、使用步骤
- 1.引入库 [echartsJS文件连接下载地址](https://www.jsdelivr.com/package/npm/echarts)
- 2.准备好代码容器
引入echarts js文件

一、热力图

热力图是指将特定区域中的数据点进行叠加计算，通过颜色渐变反应数据点密度，颜色越深则数据密度越大。热力图可以反映出不同区域的各种信息，通常适用于数据量比较多且在一定地域范围内相对密集的业务场景，比如展示某个商圈的人流分布、物流企业在某区域的网点数量分布情况、客户分布情况等。

二、使用步骤

1.引入库 echartsJS文件连接下载地址

选择 dist/echarts.js，点击并保存为 echarts.js 文件。

2.准备好代码容器

请添加图片描述

引入echarts js文件

请添加图片描述
这一步是为了设置好容器放入数据

数据集完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		.box{
			width: 600px;
			height: 600px;
			margin: auto;
			background-color: #F0F8FF;
		}
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="echarts.min.js"></script>
		<script>
		mychart=echarts.init(document.querySelector(".box"))
		const data=[
			[0, 0, 2], [0, 1, 1], [0, 2, 0], [0, 3, 0],
						[0, 4, 0], [0, 5, 0], [0, 6, 0], [0, 7, 0], [0, 8, 0], 
						[0, 9, 0], [0, 10, 0], [0, 11, 2], [0, 12, 4], [0, 13, 1],
						[0, 14, 1], [0, 15, 3], [0, 16, 4], [0, 17, 6], [0, 18, 4], 
						[0, 19, 4], [0, 20, 3], [0, 21, 3], [0, 22, 2], [0, 23, 5],
						[1, 0, 7], [1, 1, 0], [1, 2, 0], [1, 3, 0], [1, 4, 0], 
						[1, 5, 0], [1, 6, 0], [1, 7, 0], [1, 8, 0], [1, 9, 0], 
						[1, 10, 5], [1, 11, 2], [1, 12, 2], [1, 13, 6], [1, 14, 9], 
						[1, 15, 11], [1, 16, 6], [1, 17, 7], [1, 18, 8], [1, 19, 12], 
						[1, 20, 5], [1, 21, 5], [1, 22, 7], [1, 23, 2], [2, 0, 1], 
						[2, 1, 1], [2, 2, 0], [2, 3, 0], [2, 4, 0], [2, 5, 0],
						[2, 6, 0], [2, 7, 0], [2, 8, 0], [2, 9, 0], [2, 10, 3],
						[2, 11, 2], [2, 12, 1], [2, 13, 9], [2, 14, 8], [2, 15, 10], 
						[2, 16, 6], [2, 17, 5], [2, 18, 5], [2, 19, 5], [2, 20, 7],
						[2, 21, 4], [2, 22, 2], [2, 23, 4], [3, 0, 7], [3, 1, 3],
						[3, 2, 0], [3, 3, 0], [3, 4, 0], [3, 5, 0], [3, 6, 0],
						[3, 7, 0], [3, 8, 1], [3, 9, 0], [3, 10, 5], [3, 11, 4],
						[3, 12, 7], [3, 13, 14], [3, 14, 13], [3, 15, 12], [3, 16, 9],
						[3, 17, 5], [3, 18, 5], [3, 19, 10], [3, 20, 6], [3, 21, 4],
						[3, 22, 4], [3, 23, 1], [4, 0, 1], [4, 1, 3], [4, 2, 0],
						[4, 3, 0], [4, 4, 0], [4, 5, 1], [4, 6, 0], [4, 7, 0], 
						[4, 8, 0], [4, 9, 2], [4, 10, 4], [4, 11, 4], [4, 12, 2],
						[4, 13, 4], [4, 14, 4], [4, 15, 14], [4, 16, 12], [4, 17, 1],
						[4, 18, 8], [4, 19, 5], [4, 20, 3], [4, 21, 7], [4, 22, 3],
						[4, 23, 0], [5, 0, 2], [5, 1, 1], [5, 2, 0], [5, 3, 3], 
						[5, 4, 0], [5, 5, 0], [5, 6, 0], [5, 7, 0], [5, 8, 2], 
						[5, 9, 0], [5, 10, 4], [5, 11, 1], [5, 12, 5], [5, 13, 10],
						[5, 14, 5], [5, 15, 7], [5, 16, 11], [5, 17, 6], [5, 18, 0],
						[5, 19, 5], [5, 20, 3], [5, 21, 4], [5, 22, 2], [5, 23, 0],
						[6, 0, 1], [6, 1, 0], [6, 2, 0], [6, 3, 0], [6, 4, 0],
						[6, 5, 0], [6, 6, 0], [6, 7, 0], [6, 8, 0], [6, 9, 0], 
						[6, 10, 1], [6, 11, 0], [6, 12, 2], [6, 13, 1], [6, 14, 3], 
						[6, 15, 4], [6, 16, 0], [6, 17, 0], [6, 18, 0], [6, 19, 0],
						[6, 20, 1], [6, 21, 2], [6, 22, 2], [6, 23, 6]
		]
		.map(function(item){
		return [item[0],item[1],item[2]||'-'];
			
		});
		var option={
			title:{
			text:'sad',
			subtext:'asdasd',
			txtStyle:{
				color:'rgb(255,0,0,1)'
			},
			subtxtStyle:{
				color:'rgb(255,0,0,1)'
			}
			},
			legend:{
				ledt:'left'
			},
			tooltip:{
				trgger:'item'
			},
			xAxis:{
				type:'category'
			},
			yAxis:{
				type:'category'
			},
			visualMap:{
				max:15,
				min:1
			},
			
			series:[{
				data:data,
				type:'heatmap',
				label:{
					show:true
				},
				
			}]
			
		};
		mychart.setOption(option);
		
		</script>
	</body>
</html>

cost data数组是定义里面的数据量

.map(function(item){ return [item[0],item[1],item[2]||’-’]; });

这一块代码是为了返回数组数据以及判断热力空格条件为白色

visualMap:{max:15,min:1},

设置好大小区间

本次简单学习完成祝大家天天向上有错误地方欢饮讨论

请添加图片描述

清晨Q

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
大数据技能竞赛 echarts热力图简写易懂版本 over

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档文章目录一、热力图二、使用步骤1.引入库 [echartsJS文件连接下载地址](https://www.jsdelivr.com/package/npm/echarts)2.准备好代码容器引入echarts js文件数据集完整代码cost data数组是定义里面的数据量.map(function(item){ return [item[0],item[1],item[2]||'-']; });visualMap:{max:15,min
复制链接

扫一扫