apache / echarts

Apache ECharts is a powerful, interactive charting and data visualization library for browser
https://echarts.apache.org
Apache License 2.0
60.2k stars 19.61k forks source link

[Bug] VisualMap Feature alternates the Line Marker color even when it is turned off #20327

Closed hzmacso closed 1 week ago

hzmacso commented 1 week ago

Version

echarts-for-react": "^3.0.2"

Link to Minimal Reproduction

https://codesandbox.io/p/sandbox/visualmap-yl4h4r

Steps to Reproduce

To replicate the issue, here is a boilerplate code for a chart with a visual map, with a toggle button to enable or disable the visual map. https://codesandbox.io/p/sandbox/visualmap-yl4h4r

Current Behavior

when I click the "Hide Visual Map" button, the marker colors remain as per the visual map's threshold colors. What I want is for the markers to revert to the default line color when the visual map is turned off. Currently, the only way to achieve this is setting enableVisualMap: false in the config, i.e. completely removing the visual map-related code. Or could there be something I missed regarding the toggle state?
image

Expected Behavior

What I want is for the markers to revert to the default line color when the visual map is turned off. image

Environment

- OS: Windows
- Browser: Chrome
- Framework: React

Any additional comments?

No response

MatthiasMert commented 1 week ago

Looks to me like your Button is only disabling the areaStyle. If you want to remove the visualMap you should use setOption with {replaceMerge: ['visualMap]} as option. At least in vanilla echarts. cant speak for your framework.

As a workaround solution you could also set seriesIndex to an invalid value: Example

hzmacso commented 1 week ago

Looks to me like your Button is only disabling the areaStyle. If you want to remove the visualMap you should use setOption with {replaceMerge: ['visualMap]} as option. At least in vanilla echarts. cant speak for your framework.

As a workaround solution you could also set seriesIndex to an invalid value: Example

Hey Matthias, I played around with setOption and it works! Thank you very much