[Bug] z / zlevel not working with values outside of 0 and 1

aaulthudl commented 2 hours ago

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5JALZW0kC-ANCeTvkaqWUo1YtAG4BDADYBXZm07o8VAE4QqhWAG0S6fgNjRxTOgGUVavLACMtBforU6kiNGZ2BAE3FhxRbftJNWgAmAAZggBYAWlCrGJt2WDCAXXd9ILDI-Jjg21gAVlDUnXSQ8OjYmIBmPKsUtIEM8uzQiLyADiKS9GKAgC8iKxKOEr0BQ2MRM1V1JNtuwUcRZ1d5gK8fPwX0JqzK2NrQoobAsr248NrO3oCtM4qLmsSANmPtu8yHmLbEqyqugI3AQDazDNJjUgTYS0ACy4mUAGtYFhlFRxGt7EInC43AsNr4tEDSAx4QiUWi-O98VtboF3gIIbT0NxcBpCvTSCMmaRGUyWbxrOzuehWBzku8icCiKETugIGAqAwTBRJMJeQIAMbASTAZR0ZQAcwARuIABTBfL5X4AdiqNutiVCADoIgBKFi00UBL2c8ELKF0OGI5Go9EnBzQla49beAmaSWwEmI8kE9WwalaDn-YVpgL8tmhDki2X6XP6fNEIXCn208W1ksg4Il-WK5XkVWU7mgcQa-XkQYl9BG3UeFQAYW1uv1VA8GNpw-Uo-UAHUIB4wAALSvvGuc4YkcWsADcQA

Steps to Reproduce

Chart is made up of line series, 1 mark area which acts as a traditional area and a second mark area which acts like a border for the first mark area.

No action is required to repro.

Current Behavior

The first mark area has z: 0 and this appears behind everything ✅ , the line series have z: 1 and this appears on top of the first mark area ✅ but the border of the mark area (a second mark area) has z:2 and this does not appear above the line series ❌ .

The problem I've found is that any combo of z values of 0 or 1 work but as soon as you change it to any other value then it doesn't work as expected. I tried different combinations of zlevel with z values to try to get this setup to work and I had no luck.

Expected Behavior

The first mark area with z: 0 appears behind everything else, the line series with z: 1 appears next and then the border of the mark area with z:2 to appears on top of the line series.

Environment

- OS: macOS Ventura 13.6.1
- Browser: Chrome 129.0.6668.90
- Framework: React@18.3.1

Any additional comments?

For more context, in my real code I have a mouseover event triggered when mousing over the line series and I also have a right click context menu on the first mark area. This is why I have to have them on different z to ensure this behaviour works. Visually I need to have the border of the mark area be on top which is why this needs to be on a different z to the line series.

MatthiasMert commented 2 hours ago

The properties zlevel and z only exist on series level, not on markArea level. The z value of the markArea seems to be hard coded and unrelated to the z value of the containing series.

MarkLine seems to have a higher z value and can be used as an alternative in your case: Example

aaulthudl commented 2 hours ago

The properties zlevel and z only exist on series level, not on markArea level. The z value of the markArea seems to be hard coded and unrelated to the z value of the containing series

If I change the z on the line series to 0 and the z on the main markArea to 1 it works as expected and vice-versa which seems to suggest that something is working. When I change these values to anything other than 0 or 1 is when the problem occurs.

MarkLine seems to have a higher z value and can be used as an alternative in your case: Example

Great suggestion! I'll have a look into this 🙏

apache / echarts