【7.Vue 利用Heatmap.js 制作自定义热力图】

1.效果

2.背景

需要根据后端检测的设备的数值显示设备周围的空气情况，用户希望用热力图的方式来显示，于是在网上找了资料，发现可以用Heatmap.js来实现。
Heatmap.js 官网：https://www.patrick-wied.at/static/heatmapjs/

3.引入组件

安装Heatmap.js

npm install Heatmap.js

Vue组件引入

import Heatmap from “heatmap.js”;

4.代码实现

一个渲染热力图的容器Div：

 <div id="div_body" style="width: 100%; height: 100%"></div>

渲染热力图

  // 获取热力图
    // 点位信息
    getHeartMap(points, maxValue) {
      var heatmapInstance = Heatmap.create({
        container: document.querySelector("#div_body"),
      });

      var data = {
        max: maxValue / 20, //max值表示数据中参数最大的一个，也可以说是热力图中颜色最深的一个，是一个标准
        // data: points
        // data: [
        //   { x: 1010, y: 600, value: 555, radius: 250 }, // radius表示区域大小
        //   { x: 700, y: 300, value: 453, radius: 380 },
        //   { x: 256, y: 600, value: 122, radius: 175 },
        //   { x: 220, y: 600, value: 888, radius: 589 },
        //   { x: 380, y: 100, value: 120, radius: 254 },
        // ],
        data: points,
      };

      heatmapInstance.setData(data);
    },

5.扩展(点击点位显示点位的详情信息)

思路

创建跟点位位置相同的透明div覆盖在点位上面，给Div创建点击事件即可

代码

 <div id="div_body" style="width: 100%; height: 100%">
  <div
        v-for="item in this.heartPointList"
        @click="cleanClick(item.id, item.x, item.y)"
        :key="item.id"
        :id="item.id"
        :style="[
          { top: item.y - item.radius / 2 + 'px' },
          { left: item.x - item.radius / 2 + 'px' },
          { width: item.radius + 'px' },
          { height: item.radius + 'px' },
          { 'z-index': '99999999999' },
          // { 'background-color': 'white' },
          { position: 'absolute' },
        ]"
      ></div>
</div>

效果图

注意点

只要点位的value值靠近maxvule就会变红，所以如果想让数据超过maxvlaue值才变红，可以将值先判断一下，不超过maxvalue的值可以乘以一个比例系数，让其变小。这样就不会变红色了。