堆叠柱状图悬停时如何为Tooltip实现两种不同光标效果

问题本质 #

要实现的悬停效果包含两个分层的视觉元素：

• 柱体下层：覆盖整根柱体全高的灰色高亮背景
• 柱体上层：竖线形态的指示光标
  之前尝试的方案存在两个核心缺陷：
• 将两个视觉元素统一放在顶层tooltip容器渲染，会导致灰色背景遮挡柱体内容
• 绑定单个柱段的悬停事件，只能拿到当前分段的高度参数，无法获取整柱的完整高度，做不出通高的背景效果

实现方案 #

分层固定渲染层级 #

不要把两个光标元素耦合在同一个tooltip组件中，按从底到顶的顺序固定所有元素的渲染层级，z-index从小到大依次为：

1. 坐标轴、网格线
2. 灰色柱体高亮背景
3. 堆叠柱状图的所有彩色柱段
4. 竖线指示光标
5. 悬停提示文本

核心逻辑：灰色背景单独放在低于柱体的层级渲染，竖线光标和提示文本放在高于柱体的层级渲染，从结构上避免背景遮挡柱体的问题，不需要额外处理事件穿透或者透明度。

整柱高度获取方式 #

不要监听单个柱段的元素悬停事件，改为监听x轴的轴指针悬停事件：

• 触发悬停时，先拿到当前悬停位置对应的x轴类目索引
• 遍历该类目下所有归属同一堆叠组的系列数据，累加数值后结合坐标轴的像素换算规则，直接算出整根柱体的上下边界、总高度、左右坐标，不需要依赖单个柱段返回的尺寸参数

双光标同步控制 #

两个光标共用同一个悬停状态变量，不需要分别绑定事件：

• 轴指针触发悬停时，同时更新灰色背景的位置、尺寸，以及竖线光标的x轴坐标
• 鼠标移出图表绘图区时，同步隐藏两个光标元素

参考实现代码（适配ECharts技术栈，与复现示例逻辑对齐） #

// 按层级顺序挂载独立图形元素
<GridAxis z={0} />
<BarHighlightBg z={1} /> {/* 灰色背景层，z低于柱体 */}
<StackedBarSeries z={2} /> {/* 堆叠柱体层 */}
<VerticalLineCursor z={3} /> {/* 竖线光标层，z高于柱体 */}
<TooltipPanel z={3} /> {/* 提示文本层，z高于柱体 */}

// 统一绑定轴指针事件做状态同步
const chart = useRef<echarts.ECharts>(null);
useEffect(() => {
  const instance = chart.current;
  if (!instance) return;

  const handleHover = (params: { dataIndex: number; left: number }) => {
    const currentCategoryIndex = params.dataIndex;
    // 累加当前类目下所有堆叠系列的数值，计算整柱尺寸
    const stackTotal = SERIES_LIST.reduce((acc, curr) => {
      return acc + curr.data[currentCategoryIndex];
    }, 0);
    // 同步更新两个光标的渲染状态
    updateHighlightBg(currentCategoryIndex, stackTotal);
    updateVerticalLine(params.left);
  };

  const handleLeave = () => {
    hideHighlightBg();
    hideVerticalLine();
  };

  instance.on('axisPointer:update', handleHover);
  instance.on('globalout', handleLeave);

  return () => {
    instance.off('axisPointer:update', handleHover);
    instance.off('globalout', handleLeave);
  };
}, []);

效果校验 #

该方案实现后不存在遮挡问题：

• 灰色背景始终在柱体下方，不会覆盖柱段的彩色内容
• 竖线光标始终在柱体上方，显示清晰无截断
• 两个光标完全同步，不会出现位置错位

内容的提问来源于stack exchange，提问作者Denis Kondratiuk