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）位于左上角。