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