fix(visualMap): handle label collides with horizontal size visualMap

[WojciechKrakowiak]

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

It switches visualMap handle label vertical align property basing on the visual map orientation and layout.

Fixed issues

• Fix [Bug] Size VisualMap label collides in horizontal position #20248

Details

Before: What was the problem?

Label for handle at minimum position collides with the handle. The reason is that the distance between label and handle is based on the handle size and it changes depending on handle position. Currently label has always verticalAlign set to "middle", which is the cause of the collision (when distance is less than the half of the label height, the items collide). For labels below, vertical align could be "top" and for labels above, vertical align could be "bottom".

After: How does it behave after the fixing?

The labels below maximum range in horizontal visualMap get a slight offset to avoid collision.
This solution is not perfect, as the calculation method is different for vertical and horizontal visualMap, but I see no better way for now, to both fix the issue and keep other labels positions unchanged.

Document Info

One of the following should be checked.

• This PR doesn't relate to document changes
• The document should be updated later
• The document changes have been made in apache/echarts-doc#xxx

Misc

ZRender Changes

• This PR depends on ZRender changes (ecomfe/zrender#xxx).

Related test cases or examples to use the new APIs

• visualMap-layout.html – duplicated cases for color visualMap, to cover all cases for size visualMap
• visualMap-continuous.html – added a case that gathers color and size visualMap in all positions on single chart (the case presented in examples)

Others

Merging options

• Please squash the commits into a single one when merging.

Other information

[echarts-bot]

Thanks for your contribution!
The community will review it ASAP. In the meanwhile, please checkout the coding standard and Wiki about How to make a pull request.

[github-actions]

The changes brought by this PR can be previewed at: https://echarts.apache.org/examples/editor?version=PR-20249@dd131a0

[Ovilia]

It seems to break down some default label positions. You may check them by running npm run test:visual and run the demos containing "visualMap".

[WojciechKrakowiak]

It seems to break down some default label positions. You may check them by running npm run test:visual and run the demos containing "visualMap".

Thank you for quick review. I implemented other solution, that affects only cases, where the labels collide. I updated the description and the screenshots.

I also noticed, that visualMap-continuous displays only one case in automated tests (while the file consists of 5 tests now). I fixed that issue, by changing the container height from relative to absolute (also did some minor refactor of the test code).

BEFORE (only first test case rendered):

AFTER (all test cases rendered):

[WojciechKrakowiak]

Better review the test file changes with the ignore of the whitespace enabled (refactor affected the indentations).

[WojciechKrakowiak]

@Ovilia is there anything more I should do, or anyone I should consult with regarding these changes?

[Ovilia]

We sincerely appreciate your valuable contributions! We are currently running a special promotion for users who 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 [email protected] to claim your membership.

Thank you once again for your support!

[echarts-bot]

Congratulations! Your PR has been merged. Thanks for your contribution! 👍