fix(visualMap): prevent tooltip label overlap

[Resbi-Anik]

• Introduced a new margin constant for handle label overlap detection.
• Added logic to merge handle labels when they overlap, improving visual clarity.
• Refactored handle label position updates to accommodate new merging behavior.
• Implemented a method to calculate the bounding rectangle of handle labels for accurate overlap testing.

Resolves: #21585

Brief Information

This pull request is in the type of:

• bug fixing
• new feature
• others

What does this PR do?

Prevents overlapping of visualMap handle tooltip labels when the slider handles are positioned close to each other.

Fixed issues

• [Bug] VisualMap slider tooltip labels overlap when handles are close #21585: visualMap tooltip labels overlap when handles are close

Details

Before: What was the problem?

When using visualMap with calculable: true, the tooltip labels for the min and max values overlap when the slider handles are positioned close to each other.

This makes the labels unreadable and affects usability.

After: How does it behave after the fixing?

The tooltip labels no longer overlap when the handles are close.

When the distance between handles is below a threshold, the labels are adjusted/merged to maintain readability and avoid visual collision.

When there is enough spece no "-" between the values

when the values are close enough

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

Security Checking

• This PR uses security-sensitive Web APIs.

ZRender Changes

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

Merging options

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

Other information

Tested with heatmap and visualMap slider in minimal configuration. The fix works without requiring additional user configuration.

[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.

Please DO NOT commit the files in dist, i18n, and ssr/client/dist folders in a non-release pull request. These folders are for release use only.

[Justin-ZS]

Thanks for the fix, the overlap handling logic looks solid and the handleIndex === 'all' hover-link update also makes sense.

Could you also add a small regression case in test/visualMap-continuous.html (or a new visualMap HTML case) to cover both states:

1. labels overlap and are merged;
2. labels separate again and return to two draggable labels.

That would help guard against future regressions in label visibility/draggability transitions.

[Resbi-Anik]

Thanks for the fix, the overlap handling logic looks solid and the handleIndex === 'all' hover-link update also makes sense.

Could you also add a small regression case in test/visualMap-continuous.html (or a new visualMap HTML case) to cover both states:

1. labels overlap and are merged;
2. labels separate again and return to two draggable labels.

That would help guard against future regressions in label visibility/draggability transitions.

I have updated the PR with new regression case :