ECharts中如何正确设置系列和组件的zIndex以控制显示层级？

Question

在ECharts中，如何正确设置系列和组件的zIndex以实现理想的显示层级？ ECharts的图表由多个系列和组件构成，当需要调整它们的显示层级时，可以通过设置`z`、`zlevel`和`zIndex`属性来控制。但开发者常遇到问题：为何设置了`zIndex`，显示层级仍不符合预期？这是因为`zIndex`仅对同一`zlevel`内的元素生效，而`zlevel`用于划分图层，不同`zlevel`的元素会渲染到不同的canvas中。因此，若需精确控制层级，应综合考虑`z`、`zlevel`和`zIndex`的值，确保在同一层级内调整`zIndex`，或通过调整`zlevel`改变渲染图层。例如，将tooltip或legend设置为较高`zlevel`，可确保其始终位于图表上方。

Answer 1

在ECharts中正确设置系列和组件的zIndex以实现理想的显示层级

1. 基础概念：理解`z`, `zlevel`, 和`zIndex`

ECharts中的显示层级控制主要依赖于三个属性：`z`, `zlevel`, 和`zIndex`。

• `z`: 用于在同一`zlevel`内的元素之间进行排序，数值越大越靠前。
• `zlevel`: 决定渲染图层，不同`zlevel`的元素会渲染到不同的canvas上，`zlevel`值大的canvas会覆盖小的。
• `zIndex`: 只在同一个`zlevel`内生效，用于进一步细化显示顺序。

例如：

option = {
    series: [{
        type: 'bar',
        z: 10,
        zIndex: 5
    }]
};
    

2. 常见问题分析：为何设置了`zIndex`仍无效？

开发者常遇到的问题是即使设置了`zIndex`，显示层级仍不符合预期。这是因为`zIndex`仅对同一`zlevel`内的元素生效。

例如，如果一个系列的`zlevel`为2，而另一个组件的`zlevel`为3，即使系列的`zIndex`设得再高，也无法超越`zlevel`更高的组件。

组件	zlevel	zIndex
Series A	2	5
Tooltip	3	1

如上表所示，尽管Series A的`zIndex`为5，但由于其`zlevel`低于Tooltip的`zlevel`，因此它无法覆盖Tooltip。

3. 解决方案：综合考虑`z`, `zlevel`, 和`zIndex`

为了精确控制显示层级，需要同时调整`z`, `zlevel`, 和`zIndex`。

1. 首先确定每个组件或系列的`zlevel`，确保关键组件（如tooltip、legend）处于较高的`zlevel`。
2. 然后在同一`zlevel`内，通过`z`和`zIndex`进一步调整显示顺序。

例如，将tooltip设置为较高的`zlevel`：

option = {
    tooltip: {
        zlevel: 100
    },
    series: [{
        type: 'line',
        zlevel: 1,
        zIndex: 5
    }]
};
    

4. 实际应用案例：复杂图表的层级管理

以下是一个实际案例，展示如何通过合理设置`z`, `zlevel`, 和`zIndex`来实现复杂的显示效果。

假设我们需要一个包含多个系列和组件的图表，并且希望tooltip始终位于最上方。

option = {
    tooltip: {
        trigger: 'axis',
        zlevel: 100
    },
    legend: {
        zlevel: 90
    },
    series: [{
        name: 'Series A',
        type: 'bar',
        data: [120, 200, 150],
        zlevel: 1,
        zIndex: 5
    }, {
        name: 'Series B',
        type: 'line',
        data: [130, 180, 160],
        zlevel: 2,
        zIndex: 3
    }]
};
    

在此配置中，tooltip的`zlevel`最高，确保其始终位于图表上方；legend次之；两个系列则分别设置不同的`zlevel`和`zIndex`以实现特定的显示顺序。

5. 流程图：层级设置步骤

以下是通过流程图展示如何设置层级：

graph TD;
            A[开始] --> B[确定组件重要性];
            B --> C{是否需要顶层显示?};
            C --是--> D[设置高zlevel];
            C --否--> E[设置基础zlevel];
            D --> F[调整z和zIndex];
            E --> F;
            F --> G[完成];