官网：HTTP：//www.patrick-wied.at/static/heatmapjs/
API：HTTP：//www.patrick-wied.at/static/heatmapjs/docs.html
官网例子：HTTP：//www.patrick-wied.at/static/heatmapjs/examples.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
</style>
</head>
<body>
<div style="height: 900px; width: 100%;" id="heatmap"></div>
</body>
<script src="js/heatmap.min.js"></script>
<script type="text/javascript">
// 创建一个heatmap实例对象
// “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
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, //max值表示数据中参数最大的一个，也可以说是热力图中颜色最深的一个，是一个标准
data: points
};
//因为data是一组数据,web切图报价所以直接setData
heatmapInstance.setData(data); //数据绑定还可以使用
</script>
</html>