vue+heatmap.js实现进店客流热力图显示

heatmapjs插件地址：heatmapjs  

使用vue实现热力图，切换不同日期之后，会出现多个canvas覆盖情况；

我的解决方案是：遍历dom元素，删除之前的canvas元素 。

点击放大旋转90度展示

//获取dom元素 
    const heatmapBox = val === 'show' ? document.getElementById("heatmap1") :                 
    document.getElementById("heatmap");

    const oldCanvas = heatmapBox.children[2];
//删除之前的节点，在重新渲染之前需要判断是否存在
    if (oldCanvas !== undefined) {
       heatmapBox.removeChild(heatmapBox.children[1]);
    }

手机端展示，点击热力图全屏显示，图片旋转坐标计算。 初始热力图坐标（0，0）位于左上角。

<template>
  <div class="passenger__heatMpa">
    <div id="heatmap" style="width: 100%;" @click="Overlay">
      <img :height="heightNum" id="baidu-img" src="@/assets/img/heatMap.jpg" />
    </div>
    <van-overlay :show="show" @click="showOverlay" z-index="9999999">
      <div class="wrapper" >
        <div
          class="block"
          id="heatmap1"
          :style="{width: `${screenHeight}px`}"
           style="transform: rotate(90deg);"
        >
          <img :width="`${screenHeight}px`" :style="{minWidth: `${screenHeight}px`}"  src="@/assets/img/heatMap.jpg" />
        </div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
import Heatmap from "heatmap.js";
import { TourService } from "@/api/tour-service";
import { formatDate } from "@/utils/format-data";
import { Overlay } from "vant";
export default {
  name: "passengerHeatMpa",
  components: {
    [Overlay.name]: Overlay
  },
  data() {
    return {
      show: false,
      heightNum: Math.ceil(720 / (1280 / this.screenWidth).toFixed(2)),
      xAxis: [],
      listX: [],
      listY: [],
      screenWidth: document.body.clientWidth - 20,
      screenHeight: document.body.clientHeight - 20
    };
  },
  methods: {
    Overlay() {
      this.show = true;
      this.initChart('show');
    },
    showOverlay() {
      this.show = false;
    },
    //业务数据请求
    async getData(val) {
      this.listX = [];
      this.listY = [];
      let { records } = await this.service.getPerLocation({
        orgSeq: val.orgSeq,
        optionTime: `${formatDate(
          new Date(val.currentDate),
          "yyyy-MM-dd 00:00:00"
        )}`
      });
      //遍历数据
      if (records) {
        records.map(item => {
          item.personxList.map(s => {
            this.listX.push(s);
          });
        });
        records.map(item => {
          item.personyList.map(s => {
            this.listY.push(s);
          });
        });
      }
      this.initChart();
    },
    initChart(val = 'default') {
      console.log(val)
      // 创建一个heatmap实例对象
      this.$nextTick(() => {
        const heatmapBox = val === 'show' ? document.getElementById("heatmap1") : document.getElementById("heatmap");
        //计算图片缩放比例
        let widthNum = val === 'show' ? (1280 / this.screenHeight).toFixed(2) : (1280 / this.screenWidth).toFixed(2);
        const heatmapInstance = Heatmap.create({
          container: heatmapBox,
           //根据图片大小设置不同的热力大小
          radius: val === 'show' ? Math.ceil(this.screenHeight / 33) : Math.ceil(this.screenWidth / 33),
          maxOpacity: 0.5,
          minOpacity: 0,
          blur: 0.75
        });
        const oldCanvas = heatmapBox.children[2];
        // //删除之前生成的热力图
        if (oldCanvas !== undefined) {
          //删除之前的节点
          heatmapBox.removeChild(heatmapBox.children[1]);
        }
        let points = [];
        this.listX.map((item, index) => {
          let point = {
            //根据屏幕分辨率，相对应的坐标，旋转之后坐标（0，0）位于右上角
            x:  Math.ceil(item / widthNum), 
            y:  Math.ceil(this.listY[index] / widthNum),
            value: 10
          };
          points.push(point);
        });
        let data = {
          max: 100,
          min: 0,
          data: points
        };
        // 因为data是一组数据,直接setData
        heatmapInstance.setData(data);
      });
    }
  },
  mounted() {},
  created() {
    this.service = new TourService();
  }
};
</script>
<style lang="less" scoped>
.passenger__heatMpa {
  .wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    border: none;
  }
}
</style>