对heatmap代码做一下笔记。
使用前最好先看看heatmap中的api和官网demo ,Demo地址:https://www.patrick-wied.at/static/heatmapjs/examples.html
我的heatmap页面。
业务需求:将heatmap引入页面中,做成一个可引入的框架,使用于所有页面。代码如下。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.heatmap {
width:1900px; height:1900px;
}
</style>
<script src="js/heatmap.min.js"></script>
<script src="js/jquery.js"></script>
</head>
<body>
<input id=xxx type=hidden value="">
<input id=yyy type=hidden value="">
<input id="array" type="button" value="点击查看数组内容" οnclick="getindex()"/>
<div class="demo-wrapper">
<div class="heatmap" style="position: relative;">
<div><img src="image/1.jpg" ></div>
</div>
</div>
</body>
<script src="js/heatmap.min.js"></script>
<script>
<!--heapmap热力图-->
var heatmapInstance = h337.create({
container: document.querySelector('.heatmap'),
radius: 50
});
document.querySelector('.demo-wrapper').onmousemove = function(ev) {
heatmapInstance.addData({
x: ev.layerX,
y: ev.layerY,
value: 1
});
};
<!--鼠标点击-->
var pointx = new Array();
var pointy = new Array();
var i = 0;//数组下标
function mouseMove(ev) {
Ev = ev || window.event;
var mousePos = mouseCoords(ev);
document.getElementById("xxx").value = mousePos.x;
pointx[i] = document.getElementById("xxx").value ;//x坐标值写入数组
console.log("x:"+document.getElementById("xxx").value);
document.getElementById("yyy").value = mousePos.y;
pointy[i] = document.getElementById("yyy").value;//y坐标值写入数组
console.log("y:"+document.getElementById("yyy").value);
// 执行完之后数组下标加一
i++;
console.log(i);//打印下标
}
function mouseCoords(ev) {
if (ev.pageX || ev.pageY) {
return {x: ev.pageX, y: ev.pageY};
}
return {
x: ev.clientX + document.body.scrollLeft - document.body.clientLeft,
y: ev.clientY + document.body.scrollTop - document.body.clientTop
};
}
document.onmousemove = mouseMove;
$(function(){
var s ="";
s += window.screen.height+"*"+window.screen.width;
console.log("当前屏幕分辨率是:"+s);
<!--动态改变div宽高-->
$(".heatmap").width($("body").width());
$(".heatmap").height($("body").height());
});
</script>
</html>
需要引入的js在https://github.com/pa7/heatmap.js 获取。
鼠标点击和移动事件可以百度的到。就不贴js了。
所用的heatmap是https://www.patrick-wied.at/static/heatmapjs/
【后期更新echarts使用笔记。】