在一张图片上显示热力图（前端）

最新推荐文章于 2024-12-24 09:32:39 发布

不逸青年

最新推荐文章于 2024-12-24 09:32:39 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

文章标签：前端 echarts javascript

本文链接：https://blog.csdn.net/qq_40630827/article/details/127117814

这篇博客介绍了如何在网页中利用heatmap.js库生成自定义热力图，当Echarts的热力图功能无法满足需求时，可以考虑使用heatmap.js。示例代码展示了如何创建heatmap实例、设置背景图片、生成随机数据点并绑定到热力图上，帮助开发者快速实现背景无地图的热力图效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在一张图片上显示热力图

#实现这个功能主要是用到heatmap.js

当echarts的热力图不能满足我们的需求的时候，背景不需要地图就可以使用heatmap
最简单的例子只需要给盒子设置一个背景图片其他的数据按照官方提供的形式来写
非常方便坐标和数据就可以完成热力图的显示。

<div  id="heatmap"></div>

<script type="text/javascript">
    // 创建一个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,  //max值表示数据中参数最大的一个，也可以说是热力图中颜色最深的一个，是一个标准
        // data: points
        data: [
            {x: 1010, y: 600, value: 23},
            {x: 700, y: 300, value: 45},
            {x: 300, y: 320, value: 12},
            {x: 220, y: 600, value: 50},
            {x: 380, y: 100, value: 120},
        ],
    };
    heatmapInstance.setData(data); //数据绑定还可以使用
</script>