heatmap使用心得

最新推荐文章于 2024-06-21 09:43:19 发布

fengzibs

最新推荐文章于 2024-06-21 09:43:19 发布

阅读量6.1k

点赞数

分类专栏： heatmap 文章标签： heatmap js

本文链接：https://blog.csdn.net/fengzibs/article/details/79530299

版权

heatmap 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

对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使用笔记。】

fengzibs

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
heatmap使用心得

对heatmap代码做一下笔记。使用前最好先看看heatmap中的api和官网demo ，Demo地址：https://www.patrick-wied.at/static/heatmapjs/examples.html我的heatmap页面。业务需求：将heatmap引入页面中，做成一个可引入的框架，使用于所有页面。代码如下。&lt;!DOCTYPE html&gt;&lt;html&gt;...
复制链接

扫一扫

专栏目录