vue项目中heatmap.js应用

发表于 | 分类于 | 阅读次数：
本文字数： 2.8k | 阅读时长 ≈ 3 分钟
借助heatmap.js绘制热力图。

在项目中需要绘制热力图，经过搜索发现heatmap.js比较容易使用，方便自定义内容，因此选择借助heatmap.js绘制热力图。在此做一些基本记录（官方文档）。

在vue项目中的使用：首先安装heatmap.js：npm install heatmap.js –save，然后在vue项目中引用import Heatmap from ‘heatmap.js’。以下通过具体代码和注释进行说明。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!-- 热力图 -->
<template>
  <div class="heatmapArea" style="width: 100%; height: 100%">
    <div class="basic_img" ref="basic_img">
      // 热力图的底图，也是创建热力图的容器
      // 需要获取图片的尺寸，因此操作需要在图片加载完成之后执行，onload事件
      <img src="../../assets/img/bg.png" @load="imgReady" />
    </div>
  </div>
</template>

<script>
// 引入heatmap.js
import Heatmap from "heatmap.js";
export default {
  name: "heatmapArea",
  data() {
    return {
      // 比例关系，图片可能随着父容器尺寸自适应，因此坐标也需要按比例进行变化
      rate: 1,
      // 定义一些随机点，分别用xPoints和yPoints来表示这些随机点的x，y坐标
      xPoints: [0, 20, 30, 2, 80, 4, 10, 50, 100, 200, 180, 180, 420, 400],
      yPoints: [0, 10, 40, 12, 60, 24, 20, 30, 50, 150, 110, 0, 10, 20],
    };
  },
  components: {},
  mounted() {},
  methods: {
    // 底图load完成后开始加载热力图
    imgReady() {
      this.getSize();
    },
    // 获取原始图片大小
    getSize() {
      // 注意this的指向问题
      let _this = this;
      let rate;
      var img = new Image();
      // 热力图底图，根据其原始宽高和实际页面中的宽高来计算比例，使坐标按照比例变化
      img.src = require("../../assets/img/icons/bg.png");
      img.onload = () => {
        _this.rate = _this.$refs.basic_img.offsetWidth / img.width;
        // 底图load完成后开始加载热力图
        this.getChart();
      };
    },
    // 加载热力图
    getChart() {
      let heatmapInstance = Heatmap.create({
        // 指定绘制热力图的容器
        container: this.$refs.basic_img,
        gradient: {
          // 自定义渐变颜色
          ".5": "#8CB8FE",
          ".7": "#2791F9",
          ".95": "#6146F3"
        },
        // 最大透明度
        maxOpacity: 0.9,
        // 最小透明度
        minOpacity: 0
      });
      // 构建数据点
      let points = [];
      let val = Math.floor(Math.random() * 100);
      for (let i = 0; i < this.xPoints.length; i++) {
        // 将x坐标和y坐标按比例转换后设置为点
        let point = {
          x: this.xPoints[i] * this.rate,
          y: this.yPoints[i] * this.rate,
          value: val
        };
        points.push(point);
      }
      let max = 0;
      let data = {
        max: max,
        data: points
      };
      // 设置数据
      heatmapInstance.setData(data);
    }
  }
};
</script>

<style type="text/less" lang="less" scoped>
</style>