vue插件——网站点击量热力图功能实现——技能提升

最近在做后台管理系统，遇到一个需求，就是要实现一个网站首页的点击率热力图展示。

效果图如下：

为了实现这个功能，可以通过heatmapjs-vue插件来实现。

1.安装npm install heatmapjs-vue

npm install heatmapjs-vue

安装插件npm install heatmapjs-vue

2.main.js中引入和注册插件

import Vue from 'vue'
import heatmapjsVue from 'heatmapjs-vue'
Vue.use(heatmapjsVue)

3.组件的基本使用

<style>
  .heatmapjs-container {
    
    
    width: 1000px;
    height: 500px;
  }
</style>
<heatmapjs-vue class="heatmapjs-container" :max="100" :min="0" :data="[{ x: 10, y: 15, value: 5}]"></heatmapjs-vue>

4.为了实现效果图，则需要有个透明度的蒙层

<heatmapjs-vue
    class="heatmapjs-container"
    :max="100"
    :min="0"
    :clickDrawable="true"
    :drawValue="1"
    @change="heatChange"
    :data="heatData"
  >
    <div style="width: 100%; height: 100%; position: relative">
      <div
        @mousemove="mousemove"
        @mouseenter="mousemove"
        @click="mousemove"
        style="
          position: absolute;
          top: 0;
          left: 0;
          z-index: 2;
          right: 0;
          bottom: 0;
          background: rgba(0, 0, 0, 0.5);
        "
      ></div>
      <span
        v-if="currentPoint.value"
        class="showDetail"
        style="
          position: absolute;
          z-index: 3;
          padding: 20px;
          color: #f90;
          background: #fff;
        "
        :style="{
    
    
          left: currentPoint.x * 1 + 10 + 'px',
          top: currentPoint.y * 1 + 10 + 'px',
        }"
      >
        点击量：{
    
    {
    
     currentPoint.value }}
      </span>
      <iframe
        src="https://www.51pcb.com/"
        frameborder="0"
        width="100%"
        height="100%"
      ></iframe>
    </div>
  </heatmapjs-vue>

script部分代码

<script>
export default {
    
    
  data() {
    
    
    return {
    
    
      heatData: [
        {
    
    
          x: '52',
          y: '150',
          radius: 40,
          value: 5,
        },
        {
    
    
          x: '57',
          y: '124',
          radius: 40,
          value: 5,
        },
      ],
      currentPoint: {
    
    },
    };
  },
  methods: {
    
    
    mousemove(e) {
    
    
      let x = e.layerX;
      let y = e.layerY;
      let arr = this.heatData.filter(
        (item) =>
          x > item.x * 1 - item.radius / 2 &&
          x < item.x * 1 + item.radius / 2 &&
          y > item.y * 1 - item.radius / 2 &&
          y < item.y * 1 + item.radius / 2
      );
      let maxArr = arr.sort(this.sortBy('value')); //sortBy是根据value字段对对象数组进行排序
      if (maxArr && maxArr[0] && maxArr[0].value) {
    
    
        console.log(
          '有数据',
          maxArr[0],
          maxArr[0].value,
          maxArr[0].x,
          x,
          maxArr[0].y,
          y
        );
        this.currentPoint = maxArr[0];
      } else {
    
    
        this.currentPoint = {
    
    };
      }
    },
    heatChange(arr) {
    
    
      this.heatData = arr;
    },
  },
};
</script>

css代码

<style scoped lang="less">
.heatmapjs-container {
    
    
  width: 100%;
  height: calc(100vh - 140px);
  background: #fff;
}
</style>

最终效果如下：

点击的次数越多，热点的颜色越深，如上图所示：点击次数较低时，是浅浅的蓝色，次数再多就变成了绿色，再就是黄色 红色。。。

通过颜色就可以区分点击率

多多积累，多多收获！！！