[Bug] Tooltip formatter has include all values when visualMap hidden them.

[AndreyPatseiko]

Version

5.4.3

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?c=area-simple&reset=1&edit=1&renderer=svg&code=DYUwLgBARghgziCBeCBqAdiA7hAIjMEACgEYBOANgA4AaCMugZgEoBuAKFEgHtN8BPZBABMAFggAqCIwoAGWZIgl5sjlwgATAohQBtALprwmgjCG6AsgQAWAOgBOMdBu4BbIs0WN5h9gDNuewgidQBLIRJWCHCAHhEVVWjUVE8Ab3YICAA3GCD0bhwUTBx8QiIiWAQ0FF4QAWY2DJNCWwAHAFc4ayJdfKxbAHNwADF24GAATRBcjzo-wfALXjBuz1QlOYKFsFLiZn1bACtuUPQiAHIAenOGjkytMBg2zu6rFYdududyt7tHZzcHggAFoILJbABWTxSYQKdYPGC6cKgkj6W7sAC-7G4rTAoV4QnSmTA3G4wDxrQAXBAiZkIGB7KEBkN7NTzjAAB6hODnGhNDF8pocgCCXLg1NpxP4rRAbIAxtoBoF-Lympk1c0YNSHiB-XzMvxRdyJRqwNLZRBzjlgO0QKq6dBPs5cvwAOIwKkQXSyOjnZSyACk530eqaCIAWqTXNTdBrJXSzTK2ac4KENHb9Q6IHBHvYwNSfRrMiBnNTlBqBXGi9nc_mwZmHSWNGXZBWmvpMwhGSBxV6q1mIOgYK4LedhjAANaIUowe1ZxOj4CnDPVhHa0xtzIdppZbntGDAKye-OuU4FhsQVycluFh0K4BysYwKCgakM20X-zTcmhEfUvwHggF6nAASk4QwmgOcpkoEMYAEQAMSMCQMhkBCcF0IhogQgA7BCUCiBhECIThogwBoGgkERiHPhoZAgGQ1EISAsh-IwfhUExfjcX4UB-FxIAsWQshcVoIAUFRmEIX4ogUBooiMExGg4d4wg4UxMAQvIwgUHBIYOlimSVhirBAA

Steps to Reproduce

Open any line chart with tooltip. Set tooltip.trigger to axis Add some visual map settings.

visualMap: {
    min: 0,
    max: 100,
    calculable: true,
    realtime: false,
    inRange: {
      color: ["#313695", "#4575b4", "#74add1", "#abd9e9", "#e0f3f8", "#ffffbf", "#fee090", "#fdae61", "#f46d43", "#d73027", "#a50026"]
    }
  }

Then move visual map slider to the middle.

Current Behavior

User can see tooltips for invisible charts.

Expected Behavior

If visual map sort some data, tooltip also shouldn't present them. (Maybe make sense to add some param to the tooltip.formatter).

Environment

- OS:macOS Monterey
- Browser:Chrome 96.0.4664.55
- Framework:LitElements

Any additional comments?

No response

[AndreyPatseiko]

I found one work around for that, it's filter params and check marker's style in the tooltip.formatter. Simple check styles for marker.

tooltip: {
    formatter:(params) => {      
      const isHidden = params.marker.indexOf('background-color:rgba(0,0,0,0)') > -1;
      if(isHidden) {
        return ''
      }else {
        return `${params.marker} ${params.value[2]}`;
      }
    }
  }

But found other problem. I want use two visualMap for chart. And when I use couple vm - this work around doesn't work.

Link for example When I change continuous visual map, tooltip still appears for invisible item. =(

[AndreyPatseiko]

Another workaround it's to set color for outOfRange: { color: 'rgba(0,0,0,0)' },. and in tooltips check this color. Like I menteont before

[github-actions[bot]]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[github-actions[bot]]

This issue has been automatically closed because it did not have recent activity. If this remains to be a problem with the latest version of Apache ECharts, please open a new issue and link this to it. Thanks!