apache / echarts

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

[Bug] Zooming Y Axes controlled by one dataZoom component when using DataZoom Toolbox feature #20120

Open erickmp07 opened 1 month ago

erickmp07 commented 1 month ago

Version

5.5.1

Link to Minimal Reproduction

https://codesandbox.io/s/9fdg8f

Steps to Reproduce

  1. Open the link to minimal reproduction;
  2. Click on DataZoom feature at Toolbox;
  3. Drag to zoom some chart area.

The gif bellow shows the steps zoom-bug

Current Behavior

The zoom not correspond the area selected. It happens only when multiple Y Axis is configured to be controlled by one DataZoom Component and when it's using the Toolbox DataZoom feature. If the zoom is done using the DataZoom Component or the mouse scroll the behavior is as expected.

Expected Behavior

The zoom should correspond the area selected considering that the chart has multiple Y Axis and one DataZoom Component controls both y axes. The behavior expected is equal to using the DataZoom Component to zoom or the mouse scroll. Both cases the zoom works on both y axes.

Environment

- OS: Windows 10
- Browser: Chrome 125.0.6422.142 (64-bit)
- Framework: JavaScript

Any additional comments?

No response

helgasoft commented 1 month ago

seems to work fine when last two dataZoom are set as yAxisIndex:0 instead of yAxisIndex:[0,1] 📌 please close issue if problem solved.

erickmp07 commented 1 month ago

seems to work fine when last two dataZoom are set as yAxisIndex:0 instead of yAxisIndex:[0,1] 📌 please close issue if problem solved.

When the last two dataZoom are set as yAxisIndex: 0 the dataZoom component doesn't work fine. The bug is replaced. Note that the green and the pink series are set yAxisIndex: 0 (Left Axis) and the red one is yAxisIndex: 1 (Right Axis). My dataZoom component is set to control both y axes as yAxisIndex: [0, 1] (ref). And the axes have different max value. So when the zoom is done, both y axes should change. Compare the gifs bellow for futher information.

Zoom by Toolbox DataZoom feature (unexpected behavior - bug). Note that before the zoom the datazoom component max correspond the max of Left Axis (yAxisIndex: 0) and after the zoom both axes and the datazoom max are equals: zoom-bug-1

Zoom by DataZoom commponent and by mouse scroll (expected behavior). Note that before and after the zoom the datazoom component max and the Left Axis max are equals and the zoom works fine. zoom-bug-2

Additional comment: if the last two dataZoom are set as suggested the behavior between the zoom modes changes. That is, the zoom by Toolbox DataZoom feature becomes expected behavior but the zoom by DataZoom component or by mouse scroll becomes unexpected behavior.

helgasoft commented 1 month ago

let see if you can find "unexpected behavior" with this example

erickmp07 commented 1 month ago

let see if you can find "unexpected behavior" with this example

Yes. I found some. Compare the gifs:

Here the datazoom move affects only the axis controlled by it (note the axis min-max). That's correct - expected. zoom-bug-3

Here the datazoom move affects both axes (axes min-max) but the component was set to control only the left axis. That's unexpected. zoom-bug-4

helgasoft commented 1 month ago

ok, good examples, agree. Left zoom should act like right zoom - freezing one Y-axis and only zooming the other, but it doesn't.