2D熱力圖執行個體

<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>