echarts图标-悬浮效果消失优化

1、展示描述

1）当前问题：悬浮框显示后，点击图标外的其他区域，有时候浮框会消失，有时候不会消失，体验不好

2）改成：悬浮框显示后，点击图标外的其他区域，浮框必须消失

2、优化代码

在组件挂载时添加一个全局的 pointerup 事件监听器，当组件销毁前移除该监听器。具体如下：

• 组件挂载时：添加全局 pointerup 事件监听器，调用 handleDocumentClick 方法。
• 组件销毁前：移除全局 pointerup 事件监听器。

  mounted() {
    document.addEventListener("pointerup", this.handleDocumentClick);
  },
  beforeDestroy() {
    document.removeEventListener("pointerup", this.handleDocumentClick);
  },

 

这段代码的功能是处理点击事件，判断点击是否发生在图表容器外部。如果是，则隐藏图表提示信息。具体逻辑如下：

• 获取图表容器元素
• 判断点击目标是否在图表容器外
• 如果在外部且图表对象存在，则隐藏提示信息

 handleDocumentClick(event) {
      const chartContainer = this.$refs.chartContainer;
      if (chartContainer && !chartContainer.contains(event.target)) {
        console.log("Click outside the chart", "myChart:", this.myChart);
        if (this.myChart) {
          this.myChart.dispatchAction({
            type: "hideTip",
          });
        }
      }
    },

通过上述方法优化，悬浮框显示后，点击图标外的其他区域，浮框就会消失