npm install heatmap.js
import Heatmap from 'heatmap.js'
export default {
name: 'HelloWorld',
props: {
msg: String
},data() {
return{
heatmapInstance:null
}
},
mounted: function () {
this.heatmapInstance = Heatmap.create({
container: document.getElementById('heatmap')
});
var timerID = setInterval(this.updatedate, 500);
this.updatedate();
},
methods: {
updatedate() {
// 创建一个heatmap实例对象
// 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
// 构建一些随机数据点,网页切图价格这里替换成你的业务数据
var points = [];
var max = 80;
var width = 400;
var height = 600;
var len = 30;
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)
}
//console.log(points);
var data = {
max: max,
data: points
}
// 因为data是一组数据,web切图报价所以直接setData
this.heatmapInstance.setData(data)
}
}
}