引言

近年來，隨著數(shù)據(jù)可視化技術的迅猛發(fā)展，熱力圖憑借其直觀且高效的可視化表達方式，在多個領域得到了廣泛應用。

從地理信息系統(tǒng)中的交通擁堵、疫情分布、降雨量等，到各類 B 端業(yè)務場景，如充電站選址、用電負荷分布、用戶行為分析、銷售數(shù)據(jù)挖掘以及設備狀態(tài)監(jiān)控，熱力圖無處不在。

本文將以熱力圖的基礎概念為切入點，結合豐富且具代表性的具體案例，深入挖掘其在技術應用層面的實際價值，并有案例的詳盡解析。旨在助力讀者全面且透徹地領悟熱力圖在行業(yè)中的重要價值，為相關行業(yè)提供啟示與思路。

一、什么是熱力圖

1. 簡易版解讀

"世上本沒有路，走的人多了也就成了路"

魯迅先生的這句名言，是解讀熱力圖最形象的比喻。

將這種現(xiàn)象類比到熱力圖，它展現(xiàn)的是"踩踏多"或"利用高"的區(qū)域：可以是網(wǎng)頁的高點擊率區(qū)域、商場內(nèi)人流密集區(qū)、城市道路的交通熱點，甚至是全國氣溫分布。

數(shù)據(jù)越密集，痕跡越明顯，這便是熱力圖關于數(shù)據(jù)分布的直觀表達。

2. 專業(yè)版解讀

在 AntV 的官方文檔里，對熱力圖的概念有如下專業(yè)的描述：

"熱力圖(Heat Map)，"熱力圖"一詞最初是由軟件設計師 Cormac Kinney 于 1991 年提出并創(chuàng)造的，用來描述一個 2D 顯示實時金融市場信息。最開始的熱力圖，是矩形色塊加上顏色編碼。經(jīng)過多年的演化，習語上的熱力圖，如今更規(guī)范，更被大多數(shù)人理解的是這種經(jīng)過平滑模糊過的熱力圖譜。"

簡言之，熱力圖通過顏色的深淺漸變，直觀展現(xiàn)數(shù)據(jù)的大小和分布：顏色越深表示數(shù)值越大，顏色越淺則反之。

通過這種簡單卻強大的表達方式，熱力圖被廣泛應用于各行業(yè)數(shù)據(jù)的分析與決策。

通過兩種解讀方式，我們對熱力圖有了初步的認知，它具體可以傳遞哪些信息、又可應用于哪些場景呢？

二、熱力圖的信息傳遞

盡管熱力圖以顏色變化傳遞信息，其包含的數(shù)據(jù)維度卻具有極大的實用性。以下是熱力圖的主要信息傳遞能力：

1. 分布與密度

熱力圖通過顏色的梯度展示數(shù)據(jù)分布及其密集程度。例如，在充電站選址中，熱力圖可顯示充電樁的密度分布，幫助運營者快速識別適合建站的高需求區(qū)域。

以下是一張充電選址的蜂窩熱力圖，借助顏色的深淺變化，能夠輔助客戶進行決策，篩選出最佳的充電樁建站地址，這類信息無疑具備極為強大的商業(yè)價值。

實際案例示意圖

2. 趨勢與模式

在呈現(xiàn)事物發(fā)展趨勢方面，熱力圖同樣表現(xiàn)出色。它可借助顏色變化，直觀呈現(xiàn)數(shù)據(jù)隨時間、空間變化而展現(xiàn)出的規(guī)律。

下圖是一張來自 Metacritic 網(wǎng)站，關于各種電影類型在不同年份評分的可視化呈現(xiàn)。Y 軸的不同電影類型（如喜劇片、紀錄片、動畫片、戰(zhàn)爭片等）隨著 X 軸的時間推移（10 年一個跨度，從 1890 到 2020 年間），展示了不同電影類型評分隨年代的起伏，直觀呈現(xiàn)文化偏好的演變。

圖片引自MongoDB官網(wǎng)

3. 熱點區(qū)域

熱力圖善于標識熱點區(qū)域，用于市場分析和用戶行為研究。

例如以下兩張網(wǎng)頁熱力圖，精準反映了用戶在頁面上的點擊、瀏覽等各類行為，據(jù)此能夠判斷出頁面中最受用戶關注的區(qū)域，這類數(shù)據(jù)為 PC 端產(chǎn)品的優(yōu)化提供了極為有力的理論支撐。

圖片引自 Instapage 網(wǎng)站

4. 關聯(lián)性

在生物醫(yī)學領域，熱力圖可用于呈現(xiàn)基因表達量的相關性。

在《生物信息分析之熱圖(Heatmap)》一文中，描述了通過顏色變化來呈現(xiàn)多個基因的全局表達量變化。下圖中顏色越紅數(shù)值越大，表示關聯(lián)性越強，反之則數(shù)值越小。

三、熱力圖的應用案例

上文已介紹了熱力圖能夠傳遞的信息種類，若對其進行大體歸類，其應用場景主要涵蓋以下 4 大方面：

接下來，我們將通過具體案例，深入探究其實際應用場景。

1. 充電選址

隨著新能源汽車的迅猛崛起，各大充電樁的需求急劇攀升。在選擇最佳的充電車場地理位置時，僅憑主觀感知判斷遠遠不夠，此時熱力圖便能發(fā)揮它的優(yōu)勢。

以下是一張城市充電熱力圖，其提供的數(shù)據(jù)維度極為豐富，涵蓋該城市不同電站的單日快、慢充電量，以及不同片區(qū)的充電站數(shù)量。

借助這樣的 "上帝視角" 觀測區(qū)域內(nèi)的充電量與電站數(shù)量，能夠為運營工作指明更為明確的方向。

實際案例示意圖

當然，熱力圖的配色并非局限于單色，而應依據(jù)實際場景靈活選擇恰當?shù)呐渖桨浮?/p>

實際案例示意圖

2. 電力監(jiān)測

在電力監(jiān)測領域，除了常見的大屏浮標顯示數(shù)據(jù)，還可以將電網(wǎng)負荷、用電檢修、電費回收等數(shù)據(jù)生成城市熱力圖，更高效的保障居民用電體驗。

實際案例示意圖

3. 網(wǎng)站分析

此應用場景主要用于追蹤用戶在網(wǎng)站上的點擊、滾動和停留時間等行為。通過深入分析這些數(shù)據(jù)，能夠?qū)W(wǎng)頁布局進行優(yōu)化，進而提升用戶體驗與轉(zhuǎn)化率。

例如下圖，一篇熱力圖分析文章中的案例佐證，通過對熱力圖的分析，發(fā)現(xiàn)版本 A 右側點擊按鈕的關注度弱于上面的 banner?；诖税l(fā)現(xiàn)，版本 B 進行了優(yōu)化迭代，對按鈕與 banner 的位置加以調(diào)整。

如此微小的改動竟使整體轉(zhuǎn)化率提升了 62%。

這充分彰顯了熱力圖在市場分析中的價值。尤其是在體驗設計類工作進行產(chǎn)品優(yōu)化時，有了數(shù)據(jù)的有力支撐，產(chǎn)品優(yōu)化將更具說服力。

實際案例示意圖

4. 氣象分布

天氣預報中的熱力圖是大眾最為熟知的表現(xiàn)形式之一，它基于地理信息，全面展示全國各地的雨水、溫度等各類天氣的分布情形。如下可看到全國范圍內(nèi)的降雨量分布。

圖片來自網(wǎng)絡 侵刪

以及具體省份中各個城市的溫度分布。

圖片來自網(wǎng)絡 侵刪

5. 城市規(guī)劃

在城市規(guī)劃進程中，熱力圖可用于剖析交通流量、人口密度和環(huán)境污染等問題。例如，交通流量熱力圖有助于精準識別交通擁堵點，從而制定更為高效的交通管理方案。

以下是高德開發(fā)平臺的 DEMO 案例，從中可直觀感受到中間紅色區(qū)域的擁堵指數(shù)頗高，而綠色部分顏色由深至淺的變化，也清晰傳達了擁堵程度逐漸減弱的信息。

依據(jù)這些數(shù)據(jù)，能夠?qū)煌肪€規(guī)劃、公共設施布局以及環(huán)保措施進行優(yōu)化完善。

圖片引自高德平臺

6. 市場分析

熱力圖在市場分析中能夠清晰展示消費者的行為模式與購買熱點。

例如，下圖在商超當中使用熱力圖，深色區(qū)域表示顧客停留時間較長，據(jù)此可精準判斷出顧客最常駐足和購買的區(qū)域，進而優(yōu)化商品擺放位置，實現(xiàn)銷售額的顯著提升。

圖片引自網(wǎng)絡 侵刪

以下這個數(shù)據(jù)決策系統(tǒng)源自帆軟（文末提供了地址，可免費試用），對全國的銷售情況依據(jù)地域進行可視化呈現(xiàn)。

圖片引自帆軟

7. 醫(yī)學研究

在醫(yī)學領域，熱力圖被用于展示疾病的地理分布以及醫(yī)療資源的利用情況。

借助這些數(shù)據(jù)，能夠?qū)残l(wèi)生策略與資源分配進行優(yōu)化調(diào)整。例如，流感傳播熱力圖有助于預測疫情高發(fā)區(qū)域，以便提前采取防控措施。

圖片引自國家地球系統(tǒng)科學數(shù)據(jù)中心

此外，熱力圖還可用于顯示基因表達、蛋白質(zhì)結構和代謝通路等生物數(shù)據(jù)的分布與變化，助力研究人員探尋關鍵的生物過程與信號通路，如基因表達水平、藥物效應、病理分布等。

熱力圖能夠協(xié)助研究人員發(fā)現(xiàn)相關規(guī)律與模式，還可用于剖析醫(yī)學圖像中的病變區(qū)域，從而輔助醫(yī)生做出更為精準的診斷。

圖片引自《生信數(shù)據(jù)分析——繪制差異熱圖 》

8. 趨勢研究

下圖的案例，呈現(xiàn)了日本東京 142 年里的溫度變化。Y 軸是從 1880 年 2010 年，每 10 年一個區(qū)間，X 軸是 6 月-9 月的溫度變化。

可以清晰地看到，在 1880 年至 1920 年期間，高溫紅色區(qū)域占比較小，藍綠色居多；越接近 2010 年，紅色、橙色區(qū)域面積越大。這表明在每年最熱的 6 - 9 月中，東京的高溫天氣總時長呈現(xiàn)逐年上升趨勢。

這張圖傳達的核心信息是：東京越來越熱了。

圖片引自東洋經(jīng)濟

四、在線繪制熱力圖網(wǎng)站

上文我們了解到熱力圖的概念以及使用范圍，若想進一步了解還需要大家動手試試。目前熱力圖的實現(xiàn)方式基本分為以下三種：

1. 現(xiàn)成的框架和開源工具
2. 第三方服務
3. 自定義開發(fā)

第一種方式對于學習查看而言，成本相對較高，需要具備一定的代碼相關知識，更適宜研發(fā)人員；而第二種方式則較為適合新手入門探索。以下是筆者列舉的一些可在線試用的平臺以及相關的可視化圖表介紹網(wǎng)站，有助于大家更好地理解熱力圖的概念。。

1. 熱圖繪制網(wǎng)站

網(wǎng)址：https://www.bioladder.cn/web/#/pro/index

選擇里面的熱力圖模塊，然后通過上傳數(shù)據(jù)，體驗熱力圖的可視化呈現(xiàn)效果。

2. 高德開放平臺

網(wǎng)址：https://developer.amap.com/demo/loca-v2/demos/cat-heatmap/heatmap-diff

高德開放平臺提供第三方服務，集成了各種樣式的可視化案例。本文的諸多案例截圖均來自于此。大家可在線了解一下高德的 DEMO 平臺，加深對于熱力圖的理解。

3. 帆軟

網(wǎng)址：https://www.fanruan.com/

帆軟在數(shù)據(jù)可視化這塊也是相當專業(yè)。他有配套的免費試用平臺，下載后會提供一個激活碼，包含了多種類型的數(shù)據(jù)可視，可以點擊看看里面相關的熱力板塊。

4. 百度在線體驗 DEMO

網(wǎng)址：https://#baidu.com/main/overview/demo/overview/index

這是一個后臺流量監(jiān)控的 DEMO 平臺，里面有部分模塊的數(shù)據(jù)分析用到了熱力，這也是本文所闡釋的很重要的使用場景之一，根據(jù)監(jiān)控進行網(wǎng)站分析。

5. 阿里云數(shù)據(jù)可視化平臺

網(wǎng)址：https://datav.aliyun.com/portal/editor

阿里云的數(shù)據(jù)可視化做的真的很不錯，不過需要購買后方可體驗。該平臺對于各種數(shù)據(jù)大屏等都實現(xiàn)了組件化搭建，拖拖拽拽即可完成一個可視化界面的展示。

總結

熱力圖以其高效、直觀的數(shù)據(jù)可視化能力，已成為跨行業(yè)的重要工具。從展示數(shù)據(jù)分布到揭示趨勢規(guī)律，它助力優(yōu)化用戶體驗、提升運營效率，并提供強大的決策支持。隨著技術的持續(xù)進步，熱力圖的應用場景將更加豐富，其潛力也將持續(xù)釋放。

熱力圖讓復雜數(shù)據(jù)"躍然紙上"，從視覺層面架起了數(shù)據(jù)與決策之間的橋梁，值得每一位數(shù)據(jù)工作者深入探索。

文末，我們用一張圖來進行全文重點知識的總結：

然而，熱力圖的世界廣袤無垠，遠不止于此。不同類型的熱力圖在特定場景下各具優(yōu)勢，而配色的抉擇更是決定一張熱力圖能否清晰準確傳達信息的核心要素。

在下一篇文章中，我們將深入探究熱力圖的細分種類及其適用場景，并分享一些實用的配色技巧，誠邀大家一同開啟這段探索之旅！

參考文獻

1. 百度統(tǒng)計熱力圖：點擊熱力圖是什么？：http://loooooong.com/288
2. MongoDB 官網(wǎng)熱力圖趨勢詳解：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 網(wǎng)站：https://instapage.com/blog/landing-page-heat-map

作者：徐紅蘭