[Bug]: 标签与标记的 zIndex 没有同步

[wisonic-s]

Describe the bug / 问题描述

给各个 mark 设置 zIndex 之后，mark 的图形优先级确实是正确的，但是标签的优先级并没有按图形的优先级进行展示，
point 的标签会被其他的 point 遮挡，lineY 的标签甚至是被理论上低一级的 point 给遮挡了。

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

const chart = new Chart({ container: "container" });

    chart.options({
        type: "view",
        autoFit: true,
        data: [
            { country: "Asia", year: "1750", value: 502 },
            { country: "Asia", year: "1800", value: 635 },
            { country: "Asia", year: "1850", value: 809 },
            { country: "Asia", year: "1900", value: 5268 },
            { country: "Asia", year: "1950", value: 4400 },
            { country: "Asia", year: "1999", value: 3634 },
            { country: "Asia", year: "2050", value: 947 },
            { country: "Africa", year: "1750", value: 106 },
            { country: "Africa", year: "1800", value: 107 },
            { country: "Africa", year: "1850", value: 111 },
            { country: "Africa", year: "1900", value: 1766 },
            { country: "Africa", year: "1950", value: 221 },
            { country: "Africa", year: "1999", value: 767 },
            { country: "Africa", year: "2050", value: 133 },
            { country: "Europe", year: "1750", value: 163 },
            { country: "Europe", year: "1800", value: 203 },
            { country: "Europe", year: "1850", value: 276 },
            { country: "Europe", year: "1900", value: 628 },
            { country: "Europe", year: "1950", value: 547 },
            { country: "Europe", year: "1999", value: 729 },
            { country: "Europe", year: "2050", value: 408 },
            { country: "Oceania", year: "1750", value: 200 },
            { country: "Oceania", year: "1800", value: 200 },
            { country: "Oceania", year: "1850", value: 200 },
            { country: "Oceania", year: "1900", value: 460 },
            { country: "Oceania", year: "1950", value: 230 },
            { country: "Oceania", year: "1999", value: 300 },
            { country: "Oceania", year: "2050", value: 300 },
        ],
        encode: { x: "year", y: "value", color: "country" },
        axis: { x: { title: false }, y: { title: false } },
        legend: {
            color: {
                itemMarker: 'square',
                markerCursor: 'default',
                backgroundCursor: 'default',
                labelCursor: 'default',
                valueCursor: 'default',
            }
        },
        children: [
            { zIndex: 0, type: "area", style: { fillOpacity: 0.3 } },
            { zIndex: 1, type: "line", style: { strokeWidth: 2 }, tooltip: false },
            {
                zIndex: 2,
                type: "point",
                style: { fillOpacity: 1, strokeWidth: 0 },
                encode: { shape: "circle", size: 20 },
                tooltip: false,
                labels: [
                    {
                        text: d => d.value,
                        style: { fillOpacity: 1 },
                        position: "top",
                        textBaseline: "bottom",
                        transform: [{ type: "overlapHide" }, { type: "exceedAdjust" }],
                        fontFamily: "PingFang"
                    }
                ]
            },
            {
                zIndex: 4,
                type: 'lineY',
                data: [200],
                labels: [
                    {
                        text: '辅助线',
                        style: { fillOpacity: 1, zIndex: 10 },
                        position: 'left',
                        textBaseline: 'bottom',
                        transform: [{ type: 'overlapHide' }, { type: 'exceedAdjust' }],
                        fontFamily: 'PingFang'
                    }
                ]
            }
        ],
    });

    chart.render();

Version / 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[github-actions]

@wisonic-s 您好！以下是关于您问题的自动回复：

您好，感谢您的反馈和详细复现代码！

您遇到的问题是：设置了每个 mark 的 zIndex 后，图形渲染顺序是正确的，但标签（label）的渲染层级未随 mark 的 zIndex 同步，导致 point 的标签被其它 point 遮挡，lineY 的标签也可能被 point 遮挡。

---

原因分析

目前 G2 的标签渲染机制为：标签的 zIndex 默认仅在 mark 内部控制，未与 mark 的整体 zIndex 关联。因此，即使 mark 的图形优先级正确，标签可能仍然被其它 mark 或标签遮挡，特别是在多个 mark 叠加场景下。

---

解决建议

1. 手动指定标签 zIndex

您可以通过在 labels[].style.zIndex 显式设定标签的渲染层级。例如：

children: [
  {
    zIndex: 2,
    type: "point",
    labels: [
      {
        text: d => d.value,
        style: { zIndex: 20 }, // 提高 zIndex
        ...
      }
    ]
  },
  {
    zIndex: 4,
    type: 'lineY',
    labels: [
      {
        text: '辅助线',
        style: { zIndex: 30 }, // 更高 zIndex
        ...
      }
    ]
  }
]

⚠️ 注意：标签的 zIndex 仅在同一 mark 内部有效，如需跨 mark 控制，需要手动设定，并保证高优先级 mark 的 label zIndex 数值高于低优先级 mark。

---

2. 标签重叠优化

利用 label 的 transform（如 overlapHide 或 overlapDodgeY），可减少标签重叠和遮挡，但不能解决 zIndex 问题，只能缓解标签的视觉冲突。

labels: [
  {
    text: ...,
    transform: [{ type: 'overlapHide' }, { type: 'exceedAdjust' }]
  }
]

---

3. 建议优化（Feature Request）

当前 G2 未自动将 mark 的 zIndex 作用到 labels，建议后续版本支持：mark 的 zIndex 自动同步到 labels，或者提供全局 label zIndex 分组排序机制。您的反馈非常有价值，建议您也可在 issue 中提出此 feature request。

---

参考文档

• G2 Label 文档
• Label transform overlapHide
• Mark label zIndex 配置

---

总结

• 标签不会自动受 mark zIndex 控制，需手动指定 label zIndex。
• 可结合 label transform 优化标签重叠。
• 建议后续版本增强 label 与 mark zIndex 的自动同步能力。

如仍有问题，欢迎补充您的需求或追问，感谢您的支持！

---

此回复由 AI 助手自动生成。如有任何问题，我们的团队会尽快跟进。

[interstellarmt]

目前所有 label 都是放在同一个 layout 里面的，没有一个 mark 一个 label 容器 ，确实会导致上面的问题

[wisonic-s]

目前所有 label 都是放在同一个 layout 里面的，没有一个 mark 一个 label 容器 ，确实会导致上面的问题

有没有办法把标签这一层提到最前面

[interstellarmt]

目前所有 label 都是放在同一个 layout 里面的，没有一个 mark 一个 label 容器 ，确实会导致上面的问题

有没有办法把标签这一层提到最前面

目前内部的label都写死 Zindex 为 0 了，最简单的绕过的办法就是把 mark 的 Zindex 设置为 -2、-1、0

[wisonic-s]

目前所有 label 都是放在同一个 layout 里面的，没有一个 mark 一个 label 容器 ，确实会导致上面的问题

有没有办法把标签这一层提到最前面

目前内部的label都写死 Zindex 为 0 了，最简单的绕过的办法就是把 mark 的 Zindex 设置为 -2、-1、0

OK，我先这么用吧，多谢