heatmap.js实现vue3.0自定义图片显示热力图

最近在做vue的项目,用vue cil3.0搭建,其中有一个需求是要求实现办公区域人员活动的热力图.

如图,是一个简单的demo.....

做热力图的时候以为很简单,毕竟有那么多的插件,比如echarts..等等,但是在网上查了很多资料,没有查到完整的demo.因为我也是第一次做这种热力图显示,确实也是费了很大力气,不过还好,总算是实现了.开心!!!

废话不多说了,说一下实现步骤吧,希望会给有需求的人带来一丝帮助.

第一步,安装heatmap.js

npm install heatmap.js

第二步,在vue的项目中引入

import Heatmap from 'heatmap.js'

第三歩,使用

 mounted: function () {
      // 创建一个heatmap实例对象
      // 这里直接指定热点图渲染的div了.heatmap支持自定义的样式方案,网页外包接活具体可看官网api
      var heatmapInstance = Heatmap.create({
        container: document.getElementById('heatmap')
      });
      // 构建一些随机数据点,网页切图价格这里替换成你的业务数据
      var points = [];
      var max = 0;
      var width = 600;
      var height = 400;
      var len = 50;
      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
      heatmapInstance.setData(data)
    },

好了,这样就可以出来效果了.还是挺简单的!

希望可以帮到大家,如果有问题也可以跟我联系(*^▽^*)

另附上官网地址:https://www.patrick-wied.at/static/heatmapjs/index.html