1概述
网站热力图以特殊高亮的形式显示访客热衷的页面区域，能够让网站制作者直接清晰的了解网站各个位置被用户点击的频率。
经过调研，网站热力图主要有两种形式。一种是通过不同的颜色来标记网站页面不同位置的点击频率。另一种是通过给页面元素加边框，通过的边框的粗细来反映元素的点击频率。
2热力图技术之一 heatmap.js
一种比较成熟的热图技术heatmap.js，通过不同的颜色来标记不同位置(页面上的坐标点)的访问频率。
效果图如下
image.png
部分代码实现
// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案
var heatmapInstance = h337.create({
container: document.querySelector('#heatmap'),
});
//构建一些随机数据点
var points = [];
var max = 0;
var width = document.body.clientWidth;
var height = document.body.clientHeight;
var len = 300;
while (len--) {
var val = Math.floor(Math.random()*100);
max = Math.max(max, val);
var point = {
x: Math.floor(Math.random()*width),
y: Math.floor(Math.random()*height),
value: val
};
points.push(point);
}
var data = {
max: max,
data: points
};
//因为data是一组数据
heatmapInstance.setData(data); //数据绑定还可以使用
参考链接
官网地址https://www.patrick-wied.at/static/heatmapjs/
git地址https://github.com/pa7/heatmap.js
使用demo参考 https://blog.csdn.net/Jermyo/article/details/110561098
3热力图技术之二 事件监听
给当前页面的window对象添加一个事件监听器。
在用户点击的时候，上报被点击元素的信息(主要包括url和element path等)。
在展示的时候，计算每个节点的点击PV和UV，并通过元素outline的宽度展示元素的点击量，当鼠标移动到某个元素上时，会出现tip提示框，显示具体的PV和UV数据
效果图如下
image.png
部分代码实现
window.addEventListener("click", function(e){
console.log(e.target.tagName);
report( url, element_path )
});
function _x(STR_XPATH) {
var xresult = document.evaluate(STR_XPATH, document, null, XPathResult.ANY_TYPE, null);
var xnodes = [];
var xres;
while (xres = xresult.iterateNext()) {
xnodes.push(xres);
}
return xnodes;
}
