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

#实现这个功能主要是用到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>