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 :

[Justin-ZS]

LGTM

[Resbi-Anik]

Hi @Justin-ZS ,
Could you please approve the workflow so the checks can run?
Thanks!

[github-actions]

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

[Resbi-Anik]

Hi @Justin-ZS,
All checks have passed, and the PR looks ready.
Could you please merge when possible? Thanks!

[Justin-ZS]

Hi @Justin-ZS, All checks have passed, and the PR looks ready. Could you please merge when possible? Thanks!

Since ECharts 6.1 is coming this week, I’ll merge it after the 6.1 release if there are no further comments from other maintainers.