echartstooltip被遮挡

一、问题描述

当使用 echarts 在页面中展示图表时，鼠标移动到图表上会出现 echarts 的提示框（tooltip）。但是，当页面中有较多的图形、文本等元素时，echarts 的提示框可能会被遮挡，导致无法显示完整的内容。

二、影响因素

1、提示框的层级过低

echarts 的提示框默认的 z-index 值为 7，如果页面中其他元素的层级高于 7，就可能会遮挡提示框。


// 解决方案：可以通过设置提示框的 z-index 值为一个较大的值，如：
option.tooltip.zIndex: 9999;

2、父元素的 overflow 属性

当提示框的父元素设置了 overflow: hidden，就会导致提示框被裁剪掉一部分。


// 解决方案：可以通过将提示框的父元素的 overflow 属性设置为 visible，如：
/* css */
.echarts-wrap {
  overflow: visible !important;
}
/* js */
var chart = echarts.init(document.getElementById('chartId'));
chart._dom && (chart._dom.style.overflow = 'visible');

3、提示框的位置

当提示框的位置被一些元素（如柱状图的柱子）遮挡时，要么改变提示框的位置，要么将遮挡元素的 z-index 值调小。


// 解决方案：可以通过设置提示框的 position 属性为 data 或者其他矩形内部的居中位置，如：
option.tooltip.position: 'inside';

三、诊断工具

除了通过手动调节上述因素来解决问题，还可以使用 Chrome 开发者工具中的「可见性」功能快速定位问题所在。

在 Chrome 中打开开发者工具，点击 Elements 选项卡，找到页面中的 echarts 元素，右键点击选择「检查」，在 Elements 面板中将鼠标移至样式栏中的 tooltip 元素，勾选 Show User Agent Shadow DOM 和 Show User Agent Browser Shadow DOM 两个选项，若 tooltip 元素被遮挡，则显示为半透明的灰色。


// 解决方案：根据定位到的遮挡元素，逐一尝试修改其相关样式来解决问题。

四、实际案例

以下是一个使用 echarts 展示柱状图的示例。当图表区域被其他元素遮挡时，提示框可能无法完整展示。

案例代码：




   
      
      echarts tooltip 被遮挡

在该示例中，图表区域被一个灰色方块元素遮挡，当移动鼠标到柱子上时，提示框将无法完整展示。

为了解决问题，我们可以通过将提示框的 z-index 值提高，同时将遮挡元素的 z-index 值降低来解决问题：


/* css */
.echarts-tooltip {
  z-index: 9999;
}
.gray-box {
  z-index: 1;
}

加入以上代码后，再次查看页面，发现提示框已完整展示。

五、总结

当 echarts 的提示框被遮挡时，很可能是由于提示框的层级、父元素的 overflow 属性或提示框的位置等因素引起的。在解决问题时，可以通过手动调节相应的样式来解决，也可以使用 Chrome 开发者工具进行辅助诊断。