热力图heatmap.js插件的最基础用法

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