Hello，大家好。在当今数字化时代，理解用户行为成为了企业成功的关键之一。随着互联网的发展，用户与网站、应用和产品的互动变得愈发复杂而多样化。在这样的背景下，埋点系统成为了洞察用户行为的重要工具之一。而其中的热力图分析，则更加直观的帮助我们分析用户的喜好。
之前我们介绍了什么是热力图，以及它如何成为理解用户行为的有力工具。今天我们从技术的角度来看，如何实现热力图效果呢？
热力图是埋点系统必不可少的一项能力，可以来看看Webfunny一体化埋点系统的效果
一、有哪些免费工具可以实现热力图效果
热力图主要的实现方式，还是利用目前现有的开源工具，如：百度的echarts、阿里系的G2、还有就是我们今天要说的heatmap.js。
当然，你如果有兴趣和精力，可以自己手搓一个，原理也不是特别复杂，关于热力图的实现原理：
一般可大致归纳为以下几个步骤：
-
为每个数据点设置一个从中心向外灰度渐变的圆；
-
利用灰度可以叠加的原理，计算每个像素点数据交叉叠加得到的灰度值；
-
根据每个像素计算得到的灰度值，在一条彩色色带中进行颜色映射，最后对图像进行着色，得到热力图。
百度echarts的热力图效果
阿里系的G2热力图效果
heatmap.js热力图效果
根据效果来看，其中G2和heatmap.js的热力图效果都比较符合我们的使用场景，heatmap.js已经处理好颜色效果了，所以最后选择了heatmap.js。
二、如何采集网页上的热力数据
热力图在我们的印象中，主要的使用场景是在地图上，比如哪个地方温度，就会呈现红色，哪个地方的温度低就会呈现蓝色。而我们今天要做的是，采集网页上的热力图，主要包含三个指标的数据。
网页上又没有温度，哪来的热力值呢，他们分别是：鼠标点击量、鼠标停留时长、页面元素曝光时长
1. 点击热力数据
点击量热力图和好理解，点击的越多，热力值则越高。采集方式是通过监听全局点击事件，需要采集的几个主要的指标有：
页面地址：这个是用来确定是哪个页面的；
页面宽度/高度：这个是用来确定页面尺寸的；
鼠标点击位置（x坐标，y坐标）：这个是用来锁定页面坐标，计算热力值的；
/**
* 启动点击事件监听
*/
export function startClickRecord() {
window.addEventListener('click',function(e){
console.log('触发点击事件！', e)
if (!e) return
/** 检查定时器是否开启 */
if (store.timerStatus === 'off') {
console.log('定时器已结束，触发鼠标点击，则重新开启')
store.timerStatus = 'on';
startGlobalTimer()
}
try {
const scrollWidth = (document.body ? document.body.scrollWidth : 0) || window.innerWidth
const weTitle = document.title
const wePath = Utils.b64Code(Utils.getPath())
const weFullPath = Utils.b64Code(Utils.getPath('full'))
const weScrollWidth = scrollWidth - scrollWidth %