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

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
[x] Windows
[ ] Linux
[ ] Others / 其他

Browser / 浏览器

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

Nov 19 '25 03:11 wisonic-s

@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。

参考文档

总结

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

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

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

Nov 19 '25 03:11 github-actions[bot]

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

Nov 19 '25 06:11 interstellarmt

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

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

Nov 19 '25 06:11 wisonic-s

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

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

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

Nov 19 '25 06:11 interstellarmt

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

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

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

OK，我先这么用吧，多谢

Nov 19 '25 06:11 wisonic-s