Echarts 오류 해결: Uncaught TypeError: VueComponent에서 null의 'getBoundingClientRect' 속성을 읽을 수 없습니다.

1. 요구 사항: vue mobile echarts는 툴팁을 숨기려면 차트 외부를 클릭합니다.

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. moought에서 click 이벤트를 수신하고 beforeDestory에서 이벤트를 제거합니다.

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

좋은 사람이 오류를 보고했는데 다음 페이지로 이동하여 해당 페이지를 클릭한 후에만 오류가 보고되었습니다.

잡히지 않은 TypeError: VueComponent.handleChartClick에서 null인 'getBoundingClientRect' 속성을 읽을 수 없습니다.

이리저리 찾아보았으나 해결방법을 찾지 못하여 핵심 필드인 VueComponent를 보았습니다. Google 디버깅 도구를 열었고 해당 구성 요소가 파괴되지 않고 비활성 상태에 있음을 발견했습니다. 그러다가 keepAlive 캐시 페이지를 작성하는 것을 기억했습니다. . . . TT

3. 따라서 비활성화된 상태에서 클릭 이벤트를 제거해야 합니다.

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