用4个章节，带你快速上手热力图设计（上）

更多数据可视化教程：

引言

近年来，随着数据可视化技术的迅猛发展，热力图凭借其直观且高效的可视化表达方式，在多个领域得到了广泛应用。

从地理信息系统中的交通拥堵、疫情分布、降雨量等，到各类 B 端业务场景，如充电站选址、用电负荷分布、用户行为分析、销售数据挖掘以及设备状态监控，热力图无处不在。

本文将以热力图的基础概念为切入点，结合丰富且具代表性的具体案例，深入挖掘其在技术应用层面的实际价值，并有案例的详尽解析。旨在助力读者全面且透彻地领悟热力图在行业中的重要价值，为相关行业提供启示与思路。

一、什么是热力图

1. 简易版解读

“世上本没有路，走的人多了也就成了路”

鲁迅先生的这句名言，是解读热力图最形象的比喻。

将这种现象类比到热力图，它展现的是“踩踏多”或“利用高”的区域：可以是网页的高点击率区域、商场内人流密集区、城市道路的交通热点，甚至是全国气温分布。

数据越密集，痕迹越明显，这便是热力图关于数据分布的直观表达。

2. 专业版解读

在 AntV 的官方文档里，对热力图的概念有如下专业的描述：

“热力图(Heat Map)，“热力图”一词最初是由软件设计师 Cormac Kinney 于 1991 年提出并创造的，用来描述一个 2D 显示实时金融市场信息。最开始的热力图，是矩形色块加上颜色编码。经过多年的演化，习语上的热力图，如今更规范，更被大多数人理解的是这种经过平滑模糊过的热力图谱。”

简言之，热力图通过颜色的深浅渐变，直观展现数据的大小和分布：颜色越深表示数值越大，颜色越浅则反之。

通过这种简单却强大的表达方式，热力图被广泛应用于各行业数据的分析与决策。

通过两种解读方式，我们对热力图有了初步的认知，它具体可以传递哪些信息、又可应用于哪些场景呢？

二、热力图的信息传递

尽管热力图以颜色变化传递信息，其包含的数据维度却具有极大的实用性。以下是热力图的主要信息传递能力：

1. 分布与密度

热力图通过颜色的梯度展示数据分布及其密集程度。例如，在充电站选址中，热力图可显示充电桩的密度分布，帮助运营者快速识别适合建站的高需求区域。

以下是一张充电选址的蜂窝热力图，借助颜色的深浅变化，能够辅助客户进行决策，筛选出最佳的充电桩建站地址，这类信息无疑具备极为强大的商业价值。

实际案例示意图

2. 趋势与模式

在呈现事物发展趋势方面，热力图同样表现出色。它可借助颜色变化，直观呈现数据随时间、空间变化而展现出的规律。

下图是一张来自 Metacritic 网站，关于各种电影类型在不同年份评分的可视化呈现。Y 轴的不同电影类型（如喜剧片、纪录片、动画片、战争片等）随着 X 轴的时间推移（10 年一个跨度，从 1890 到 2020 年间），展示了不同电影类型评分随年代的起伏，直观呈现文化偏好的演变。

图片引自MongoDB官网

3. 热点区域

热力图善于标识热点区域，用于市场分析和用户行为研究。

例如以下两张网页热力图，精准反映了用户在页面上的点击、浏览等各类行为，据此能够判断出页面中最受用户关注的区域，这类数据为 PC 端产品的优化提供了极为有力的理论支撑。

图片引自 Instapage 网站

4. 关联性

在生物医学领域，热力图可用于呈现基因表达量的相关性。

在《生物信息分析之热图(Heatmap)》一文中，描述了通过颜色变化来呈现多个基因的全局表达量变化。下图中颜色越红数值越大，表示关联性越强，反之则数值越小。

三、热力图的应用案例

上文已介绍了热力图能够传递的信息种类，若对其进行大体归类，其应用场景主要涵盖以下 4 大方面：

接下来，我们将通过具体案例，深入探究其实际应用场景。

1. 充电选址

随着新能源汽车的迅猛崛起，各大充电桩的需求急剧攀升。在选择最佳的充电车场地理位置时，仅凭主观感知判断远远不够，此时热力图便能发挥它的优势。

以下是一张城市充电热力图，其提供的数据维度极为丰富，涵盖该城市不同电站的单日快、慢充电量，以及不同片区的充电站数量。

借助这样的 “上帝视角” 观测区域内的充电量与电站数量，能够为运营工作指明更为明确的方向。

实际案例示意图

当然，热力图的配色并非局限于单色，而应依据实际场景灵活选择恰当的配色方案。

实际案例示意图

2. 电力监测

在电力监测领域，除了常见的大屏浮标显示数据，还可以将电网负荷、用电检修、电费回收等数据生成城市热力图，更高效的保障居民用电体验。

实际案例示意图

3. 网站分析

此应用场景主要用于追踪用户在网站上的点击、滚动和停留时间等行为。通过深入分析这些数据，能够对网页布局进行优化，进而提升用户体验与转化率。

例如下图，一篇热力图分析文章中的案例佐证，通过对热力图的分析，发现版本 A 右侧点击按钮的关注度弱于上面的 banner。基于此发现，版本 B 进行了优化迭代，对按钮与 banner 的位置加以调整。

如此微小的改动竟使整体转化率提升了 62%。

这充分彰显了热力图在市场分析中的价值。尤其是在体验设计类工作进行产品优化时，有了数据的有力支撑，产品优化将更具说服力。

实际案例示意图

4. 气象分布

天气预报中的热力图是大众最为熟知的表现形式之一，它基于地理信息，全面展示全国各地的雨水、温度等各类天气的分布情形。如下可看到全国范围内的降雨量分布。

图片来自网络 侵删

以及具体省份中各个城市的温度分布。

图片来自网络 侵删

5. 城市规划

在城市规划进程中，热力图可用于剖析交通流量、人口密度和环境污染等问题。例如，交通流量热力图有助于精准识别交通拥堵点，从而制定更为高效的交通管理方案。

以下是高德开发平台的 DEMO 案例，从中可直观感受到中间红色区域的拥堵指数颇高，而绿色部分颜色由深至浅的变化，也清晰传达了拥堵程度逐渐减弱的信息。

依据这些数据，能够对交通路线规划、公共设施布局以及环保措施进行优化完善。

图片引自高德平台

6. 市场分析

热力图在市场分析中能够清晰展示消费者的行为模式与购买热点。

例如，下图在商超当中使用热力图，深色区域表示顾客停留时间较长，据此可精准判断出顾客最常驻足和购买的区域，进而优化商品摆放位置，实现销售额的显著提升。

图片引自网络 侵删

以下这个数据决策系统源自帆软（文末提供了地址，可免费试用），对全国的销售情况依据地域进行可视化呈现。

图片引自帆软

7. 医学研究

在医学领域，热力图被用于展示疾病的地理分布以及医疗资源的利用情况。

借助这些数据，能够对公共卫生策略与资源分配进行优化调整。例如，流感传播热力图有助于预测疫情高发区域，以便提前采取防控措施。

图片引自国家地球系统科学数据中心

此外，热力图还可用于显示基因表达、蛋白质结构和代谢通路等生物数据的分布与变化，助力研究人员探寻关键的生物过程与信号通路，如基因表达水平、药物效应、病理分布等。

热力图能够协助研究人员发现相关规律与模式，还可用于剖析医学图像中的病变区域，从而辅助医生做出更为精准的诊断。

图片引自《生信数据分析——绘制差异热图 》

8. 趋势研究

下图的案例，呈现了日本东京 142 年里的温度变化。Y 轴是从 1880 年 2010 年，每 10 年一个区间，X 轴是 6 月-9 月的温度变化。

可以清晰地看到，在 1880 年至 1920 年期间，高温红色区域占比较小，蓝绿色居多；越接近 2010 年，红色、橙色区域面积越大。这表明在每年最热的 6 - 9 月中，东京的高温天气总时长呈现逐年上升趋势。

这张图传达的核心信息是：东京越来越热了。

图片引自东洋经济

四、在线绘制热力图网站

上文我们了解到热力图的概念以及使用范围，若想进一步了解还需要大家动手试试。目前热力图的实现方式基本分为以下三种：

1. 现成的框架和开源工具
2. 第三方服务
3. 自定义开发

第一种方式对于学习查看而言，成本相对较高，需要具备一定的代码相关知识，更适宜研发人员；而第二种方式则较为适合新手入门探索。以下是笔者列举的一些可在线试用的平台以及相关的可视化图表介绍网站，有助于大家更好地理解热力图的概念。。

1. 热图绘制网站

网址：https://www.bioladder.cn/web/#/pro/index

选择里面的热力图模块，然后通过上传数据，体验热力图的可视化呈现效果。

2. 高德开放平台

网址：https://developer.amap.com/demo/loca-v2/demos/cat-heatmap/heatmap-diff

高德开放平台提供第三方服务，集成了各种样式的可视化案例。本文的诸多案例截图均来自于此。大家可在线了解一下高德的 DEMO 平台，加深对于热力图的理解。

3. 帆软

网址：https://www.fanruan.com/

帆软在数据可视化这块也是相当专业。他有配套的免费试用平台，下载后会提供一个激活码，包含了多种类型的数据可视，可以点击看看里面相关的热力板块。

4. 百度在线体验 DEMO

网址：https://tongji.baidu.com/main/overview/demo/overview/index

这是一个后台流量监控的 DEMO 平台，里面有部分模块的数据分析用到了热力，这也是本文所阐释的很重要的使用场景之一，根据监控进行网站分析。

5. 阿里云数据可视化平台

网址：https://datav.aliyun.com/portal/editor

阿里云的数据可视化做的真的很不错，不过需要购买后方可体验。该平台对于各种数据大屏等都实现了组件化搭建，拖拖拽拽即可完成一个可视化界面的展示。

总结

热力图以其高效、直观的数据可视化能力，已成为跨行业的重要工具。从展示数据分布到揭示趋势规律，它助力优化用户体验、提升运营效率，并提供强大的决策支持。随着技术的持续进步，热力图的应用场景将更加丰富，其潜力也将持续释放。

热力图让复杂数据“跃然纸上”，从视觉层面架起了数据与决策之间的桥梁，值得每一位数据工作者深入探索。

文末，我们用一张图来进行全文重点知识的总结：

然而，热力图的世界广袤无垠，远不止于此。不同类型的热力图在特定场景下各具优势，而配色的抉择更是决定一张热力图能否清晰准确传达信息的核心要素。

在下一篇文章中，我们将深入探究热力图的细分种类及其适用场景，并分享一些实用的配色技巧，诚邀大家一同开启这段探索之旅！

参考文献

1. 百度统计热力图：点击热力图是什么？：http://loooooong.com/288
2. MongoDB 官网热力图趋势详解：https://www.mongodb.com/zh-cn/docs/charts
3. 《生物信息分析之热图(Heatmap)》：https://zhuanlan.zhihu.com/p/585512411
4. 图之典热力图详解：http://www.tuzhidian.com/chart
5. 热图分析：画出用户的行为：https://www.woshipm.com/data-analysis/722475.html
6. Instapage 网站：https://instapage.com/blog/landing-page-heat-map