数据可视化之笛卡尔坐标系热力图：概述，特点，应用场景，以及效果展示与代码绘制
数据可视化之笛卡尔坐标系热力图：概述，特点，应用场景，以及效果展示与代码绘制
·
一,笛卡尔坐标系热力图来历
- 笛卡尔坐标系是由法国数学家勒内・笛卡尔（René Descartes）创立的，为数学和科学领域提供了一种用代数方法描述几何图形的有效方式。而热力图（Heat Map）的概念最初源于计算机科学和信号处理领域。
- 它是一种将数据以颜色深浅来表示数值大小的可视化方法，通过在笛卡尔坐标系基础上，利用颜色的渐变来展示数据的分布情况。
- 这种可视化技术随着数据可视化需求的增长，特别是在分析具有二维空间分布的数据（如地理信息、图像数据等）和多变量数据（如在数据矩阵中表示变量间的相关性）等场景下得到了广泛的应用和发展。
二,笛卡尔坐标系热力图概述
- 笛卡尔坐标系热力图是一种在笛卡尔坐标系（通常是二维平面，由 x 轴和 y 轴构成）中，以颜色的变化来表示数据强度或密度的可视化图表。
- 在这个图表中，每个数据点（由 x 和 y 坐标确定位置）都被赋予一个数值，该数值通过颜色映射（例如，从冷色如蓝色表示较低值，到暖色如红色表示较高值）来直观展示。
- 例如，在一个展示城市气温分布的笛卡尔坐标系热力图中，地图上的每个位置（由经度和纬度对应的 x、y 轴坐标表示）的气温数值会被转化为颜色显示在图中，让用户可以一眼看出哪些区域温度高，哪些区域温度低。
三,笛卡尔坐标系热力图特点
- 直观的数值展示
- 通过颜色的渐变，能够非常直观地呈现数据的大小或密度分布。
- 用户不需要查看具体的数值标签，就可以快速感知数据的整体趋势。例如，在分析网站用户点击行为的热力图中，颜色较深的区域（如红色）代表用户点击频率高的区域，而颜色较浅的区域（如蓝色）代表点击频率低的区域，这种直观的视觉呈现方式可以帮助网站开发者快速定位用户感兴趣的内容区域。
- 突出数据分布模式
- 可以有效地展示数据的分布模式，如聚集性、离散性等。当数据呈现出一定的聚集趋势时，热力图中会出现颜色较深的块状或带状区域，反映数据的集中位置；而当数据比较离散时，颜色分布相对均匀且较浅。
- 例如，在分析城市人口分布的热力图中，可以明显看到城市中心区域人口密度高（颜色深），而郊区人口密度低（颜色浅）的分布模式。
- 结合笛卡尔坐标系的空间定位优势
- 由于基于笛卡尔坐标系，它继承了坐标系的空间定位功能。这使得在展示具有空间属性的数据（如地理坐标数据、建筑布局数据等）时，能够明确数据点的位置关系。
- 例如，在地理信息系统（GIS）中，使用笛卡尔坐标系热力图可以展示地震活动在地理空间上的分布，用户可以根据地图上的经纬度坐标（笛卡尔坐标系）来确定地震高发区域的具体位置。
- 多变量关联展示潜力
- 可以与其他变量结合展示，通过在笛卡尔坐标系的基础上添加其他维度的信息，如时间、类别等，可以展示更复杂的多变量关系。
- 例如，在展示股票市场数据时，x 轴可以表示时间，y 轴表示股票价格区间，颜色表示股票的成交量，这样可以同时观察到股票价格的波动、成交量在不同价格区间的变化以及随时间的演变情况。
四,笛卡尔坐标系热力图应用场景
- 地理信息分析
- 城市规划：用于展示城市土地利用类型的分布密度，如商业用地、住宅用地、工业用地等的分布情况。也可以分析城市交通流量的时空分布，帮助规划交通设施和优化交通路线。
- 环境研究：展示环境数据，如空气质量指数（AQI）、水质污染程度、土壤重金属含量等在地理区域的分布。通过热力图可以快速定位污染严重的区域，为环境治理提供决策依据。
- 商业数据分析
- 网站分析：在互联网行业，用于分析网站用户行为，包括页面浏览量、点击热点、停留时间等。通过热力图可以了解用户在网站页面上的行为模式，优化网站布局和内容展示，提高用户体验。
- 零售分析：展示店铺内顾客的流动路径和停留区域，帮助零售商优化店铺布局，确定商品陈列位置，提高顾客的购物效率和购买率。
五,代码绘制与效果演示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=no">
<title>热力图</title>
<script src="../echarts.js"></script>
<!-- 直角坐标系中的热力图-->
</head>
<body>
<div id="rootreli" style="width: 100%;height: 700px;"></div>
<script>
var mycharreli = echarts.init(document.getElementById('rootreli'));
//处理x坐标和y坐标的数据
const hours = [] //['1h', '2h', '3h', '4h', '5h', '6h', '7h', '8h', '9h', '10h', '11h', '12h']
for (let i = 1; i < 13; i++) {
hours.push(i + "h")
}
const days = ["周一", "周二", "周三", "周四", "周五", "周六", "周七"]
var optionrili = {
//x和y坐标必须按照类目去写
xAxis: {
type: "category",
data: hours
},
grid: {
left: "10%" //调整图表的位置
},
yAxis: {
type: "category",
data: days
},
//直角坐标系的热力图 必须要有 visualMap组件
visualMap: {
type: "continuous", //柱状的图例
min: 0,
max: 10, //最大值和最小值
calculable: true, //可拖拽的手柄
orient: "vertical",// 组件是横着还是竖着 horizontal这个是竖着
},
tooltip:{
},
series: [{
type: "heatmap", //热力图的类型
name: "人力需求",
data: [ //第一个对应的x轴 第二个对应的y轴 第三个和第四个是其他维度的信息 自定义
[3.4, 4.5, 15,],
[4.2, 2.3, 20],
[0, 3, 30],
[8, 1, 1],
[0, 2, 18],
[12, 4, 6],
],
label:{
show:true
}
}],
};
mycharreli.setOption(optionrili)
</script>
</body>
</html>
<!-- <script type="text/javascript"-->
<!-- src="https://api.map.baidu.com/api?v=3.0&ak=28Eh7nSCsRy1yWYXW074th4bVvHxEsj6">-->
<!-- </script>-->
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
26
0- 0
已为社区贡献7条内容
所有评论(0)