search

apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.74k stars 19.62k forks source link

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

Open aaulthudl opened 1 month ago

aaulthudl commented 1 month 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.

image

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 1 month 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 1 month 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 🙏

aaulthudl commented 1 month ago

I've encountered another issue with the z values unrelated to the markLine work around so this is still an issue for me sadly.

I need to display the markArea over the top of the line series so I tried to make 2 markArea, one with z: 0 and color: 'transparent' underneath the line series which had the right click context menu logic enabled for it, and then the other overlaying the line series with silent: true so it visually looks like the mark area is on top of the line series but it still allows for hovering over of the line series.

helgasoft commented 1 month ago

looks like a duplicate of #19108

I've encountered another issue with the z values unrelated ....

Please provide code example.

MatthiasMert commented 1 month ago

You can leave silent = true and just sort out events triggered by the markArea in the callback.

Example

aaulthudl commented 1 month ago

You can leave silent = true and just sort out events triggered by the markArea in the callback.

Example

I'm unsure if that is the correct link posted? I've updated it and you can see that when silent: true for the markArea you don't get contextmenu events for the markArea

https://echarts.apache.org/examples/en/editor.html?c=line-simple&code=PYBwLglsB2AEC8sDeAoWsAeBBDEDOAXMmurGAJ4gCmRA5AMYCGYVA5sAE7m0A0J6AE2aMiAbVoBZGL1i0AKgFcqM2gHUqAlXIAWClQDEOEFQGVmphdFoBdEgF8-6cjnxFUpMpRqyAbowA2SrT2jrB4VEZUhLCi_MQegsJiAIwArAAMPLAATADMmTnZACxZ2ckAHFnJualVRQDspQBs6dahHhTUdP4Q0MrtpGBGrKwRADK9VACiPlTQYERDSgPoALaMHADWWBxUIvEJ6BAsqyYU_t7uh6T0wP6cdEOM0HggG3NgvHGHAEacAhEAMJ3B6yXaaFYJP4cAEcVQQARgbREZLfUgONGJMD7WLXUi4vGkJDOXDRNLpDGEokk1w5dIUzGkWx4tqMvAQC7zRYcJRoykJABeRHScTsJFsdgA3CgZatyIDtBswAA6GAACloq2ACnCwFmHBkareHEYqzwAEoEAA-A4QABmsCNG1NeGVt1WIBgHzkXgQ8EQmo2212jFolt2YAUHGg0vQJFuLzuVGV91YTpNZvN0rs5tl8sVHBV6oYMBYGDAqzmeiy6ZdlvgNquCbwSZTwDTtG0EWUWZQOaAA

aaulthudl commented 1 month ago

@helgasoft

looks like a duplicate of #19108

I've encountered another issue with the z values unrelated ....

Please provide code example.

There's a minimal reproduction in the ECharts example linked in the ticket. I have 3 elements:

In the example you can see that the markArea with z: 2 is being displayed underneath the line series with z: 1. If you instead change the line series to be z: 0 and the markArea to be z: 1 it works as expected (just to demonstrate that it's nothing inherent in the line series/markArea interaction).

I have experimented with many different values of z or zlevel and any value besides 0 or 1 for z does not result in the correct ordering.

helgasoft commented 1 month ago

@aaulthudl, in #19108 I explain that markArea z-value is hardcoded as 1. Also there is no z-value in markArea API. So setting z-value to markArea is irrelevant and is ignored. Same for markLine and markPoint. However one could lift/lower other items around. Like your example with "change the line series to be z: 0".

With intention to put this issue to a close, I built an interactive testbed to experiment with lines, markers and z-values. Note: when two z-values are identical, priority comes by order of appearance - second item will come on top of first.

Ovilia commented 1 month ago

@helgasoft Thanks for helping out constantly!

Apache ECharts is currently running a special promotion for users who have great contributions to the project (like you) or submit a Pull Request between September 25, 2024, and December 31, 2024. Eligible participants will receive a two-year enterprise membership to Baidu Comate, valued at 2000 RMB (approximately 285 USD).

To learn more about this product, please visit https://comate.baidu.com/. If you are interested in this offer, kindly send an email with the link to your Pull Request along with your Comate username and email address to ovilia@apache.org to claim your membership.

Thank you once again for your support!