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%"><divv-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>

效果图