<div style="height: 100px; width: 200px" id="heatmap"></div>

<script src="https://lib.baomitu.com/heatmap.js/2.0.2/heatmap.min.js"></script>
<script type="text/javascript">
    // 创建一个heatmap实例对象
    // “h337” 是heatmap.js全局对象的名称.可以使用它来创建热点图实例
    // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
    var heatmapInstance = h337.create({
        container: document.querySelector('#heatmap'),

/*backgroundColor:'red',
gradient: {
    '0.5': 'blue',
    '0.8': 'red',
    '0.95': 'white',
    '0.6':'yellow',
    '0.5':'green'
},
radius: 50,
opacity:0.8,*/

    });
    //构建一些随机数据点,网页切图价格这里替换成你的业务数据
    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,
        data: points
    };
    //因为data是一组数据,web切图报价所以直接setData
    heatmapInstance.setData(data); //数据绑定还可以使用
</script>