[Bug] Size VisualMap label collides in horizontal position

[WojciechKrakowiak]

Version

5.5.1

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=scatter-simple&code=PYBwLglsB2AEC8sDeAoWsDmAnCATAXMmurGKIQIwCsADADTHoBGwYZAtpbQybADYBTAGZgu9RrBwYAFqNjUaxAL49YADwCCaiAGdCSFcQCeW3fsPoAbroCuAQz4BZOyEIBtVL0EjK43mVd5Gj8SMCMQAUIAcgBjGEhoG2AbHSjVdBiHGJs-OyZBQjAsGwF02FwIdgFoHShoQhD0CGgAJTtoDEiiXnQdI3YWPgBlCAAvLrcKelhaGgBdCSVlOk8SKVlfMoDfRtJwrtj45qSUtIlMvmzc_K6ikrKKqpq6hrLmto6u1d4-geBhsYTKZ0GbBBa8CywFTfWDAHDVORRaRwsbxBxnLzCORTXbbIJbfbROLQBInVJlC5XPIFUjFUoSR7VWowV4Sd7tTr6CS9fqDEbjdzA0HzRbLGEohHRZE4UZovgYkjebHBMosNjATj4iRhCJEo6JZLk85ZHLU250h6VJkvWC7dmfLk9WC_PmAwXTWbgkiQ6ESJWbbXkWAAZhV2sJsEOJOOhoVGRN1xpd3pvEZzxZtrFEnWyq2QdDuIjUdJsYpCbNhQtDKt6fqmfQvt4EpJUpRspJ6LK_pDYf8QeB4d1keJJdOZcuppulfu1aezLrigbKwkzcR0tRHflXaxhALqtYHAD_iLI5jY-NE8T5pnqZr84ayjmqh0AnhelgbgkMJ5fwBAtgABMuzoLgdhgHY7jciQkw0AAdNMAAc8EACxPlB6BuEhNAAOwggAbLBACcVBoU6GEUMG8EgthsFUAhpFkW4hHwVQIJIQhFAMU6kwUFRsBIcGwZcT0kzIXxNF4Xhwm8JMlHIfhsEcdJ0FTHxBGCcp5FiYhRFSWUMkUABtEKQhAGaR-zHUNRsFmfpKm8axsA0bZ6EfpRNDBiCYkAUJdnkUZAHWQhvmuW4Rk0IFsBich2HmZMLEgpRGl-R-2mOWJhF6aFBEedZAGoSlkzhQpAFZWRH6GXx7EFaFNE0AhIJUIpLnlW4TURY1sF4fRUHKTqBw6JkbCvlEoroAsSgANxAA

Steps to Reproduce

Create continuous visual map with "inRange" affecting "symbolSize", "calculable" set to "true" and "orient" set to "horizontal"

E.g.

{
    type: 'continuous',
    calculable: true,
    dimension: 0,
    inRange: {
      symbolSize: [10, 500]
    },
  }

Current Behavior

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.

Expected Behavior

Expecting the label not to collide and keep reasonable distance from the handle.

Possible solution include:
a) keeping the distance between handle and label constant, equal to the largest distance possible for particular visualMap
b) changing the way of calculating the distance between handle and text. 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". To consider would be the overall distance between labels and handles, if it should be narrowed down to avoid getting a big gap for the larger handle.

echarts/src/component/visualMap/ContinuousView.ts

Line 625 in 7955a46

verticalAlign: 'middle',

Environment

- OS: MacOS Sonoma 14.5
- Browser: Chrome 127.0.6533.88 (Official Build) (arm64)

Any additional comments?

I'll be happy to contribute on that, just any feedback about my solutions proposals would be welcome.