在一张图片上显示热力图
#实现这个功能主要是用到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>