如何获取heatmapjs-vue的heatmapInstance实例并调用getValueAt方法

解决步骤 #

1. 首先给<heatmapjs-vue>组件添加ref属性，方便后续直接获取子组件实例：

<heatmapjs-vue
  ref="heatmapComp"
  class="heatmapjs-container"
  :max="max"
  :min="min"
  :data="heatData"
>

2. 调整mouseposition方法，通过ref获取到heatmap组件内置的heatmapInstance实例即可调用getValueAt方法：

mouseposition() {
  // 直接通过ref获取热图容器，不需要querySelector获取
  const heatmapContainer = this.$refs.heatmapComp.$el
  const heatmapInstance = this.$refs.heatmapComp.heatmapInstance
  this.tooltip = document.querySelector(".tooltip")
  heatmapContainer.onmousemove = (ev) => {
    var x = ev.layerX
    var y = ev.layerY
    // 直接调用实例方法
    var value = heatmapInstance.getValueAt({ x, y })
    console.log(value)
  }
}

注意事项 #

• 不要在created生命周期调用该方法，此时子组件还未渲染完成，$refs.heatmapComp会返回空值，你当前在mounted中调用符合要求。
• 如果你的项目是Vue3写法，需要先给组件声明ref变量再绑定，获取实例的逻辑基本一致。

内容的提问来源于stack exchange，提问作者Ludwig Loth