解决echarts报错：Uncaught TypeError: Cannot read property ‘getBoundingClientRect‘ of null at VueComponent

原创已于 2023-09-28 16:52:38 修改 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #前端 #javascript

于 2023-09-28 16:51:29 首次发布

文章讲述了如何在Vue移动端使用Echarts时，避免图表外部点击触发tooltip并处理组件缓存导致的事件冲突。作者分享了在`mounted`、`beforeDestroy`和`deactivated`生命周期钩子中管理点击事件的方法，以及遇到的问题和解决方案。

1.需求：vue 移动端的echarts点击图表外部隐藏tooltip

methods:{
    //监听鼠标点击的位置，清除tooltip
    handleChartClick(e) {
      // 判断点击的位置是否在图表上

      const { left, top, width, height } = document
        .getElementById(this.id)
        .getBoundingClientRect();
      const x = e.clientX;
      const y = e.clientY;
      if (x < left || x > left + width || y < top || y > top + height) {
        // 隐藏tooltip
        this.myChart.dispatchAction({ type: "hideTip" });
      }
    },
},

2. 在mouted里面监听点击事件，在beforeDestory移除事件

mounted() {
    // 监听点击事件隐藏tooltip
    document.addEventListener("click", this.handleChartClick, true);
  },
  beforeDestroy() {
    // 解绑点击事件
    document.removeEventListener("click", this.handleChartClick, true);
  },

好家伙报错了，并且是跳到下一页点击页面之后，才会报错：

Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null at VueComponent.handleChartClick；

搜了一圈都没找到解决方法，然后看到关键字段：VueComponent，打开谷歌调试工具，发现组件没有销毁，处在inactive（未激活）状态，才想起写了keepAlive缓存页面。。。TT

3. 所以需要在deactivated未激活状态移除点击事件：

 deactivated(){ 
    //因为组件缓存，所以也要解绑点击事件
    document.removeEventListener("click", this.handleChartClick, true);
  }