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] Tree chart: expanded/collapsed state of parent nodes is reset on zoom #19289

Open undeletable opened 10 months ago

undeletable commented 10 months ago

Version

5.4.3

Link to Minimal Reproduction

https://jsfiddle.net/undeletable/zrau5scd/

Steps to Reproduce

  1. Create tree chart.
  2. Expand/collapse some nodes, so that overall state is different from the initial one.
  3. Change chart zoom.

Current Behavior

Expanded/collapsed state of nodes is reset to the initial one. Obviously, that occurs because change of series value call triggers chart rerender. Note that this is the case even if reference to series remains unchanged (see https://jsfiddle.net/undeletable/z8cvfg23/).

Expected Behavior

According to https://github.com/apache/echarts/issues/16743, dataZoom property is not supported for tree charts. So the only way to change zoom is to change series.zoom property in options. Obviously, this triggers chart rerender, but as a user I'd expect chart state to be persisted if only zoom changes - no matter if it's done using current way, or if any analog for dataZoom is introduced.

Environment

- OS:Linux Mint 19.3
- Browser:Google Chrome 119.0.6045.123
- Framework:Vanilla JS, React

Any additional comments?

No response

helgasoft commented 10 months ago

the only way to change zoom is to change series.zoom property in options.

did you try roam:true for zooming ? Just add it in the tree series of the official example

undeletable commented 10 months ago

@helgasoft roam value is true in both examples I've provides links to. I believe there might be a kind of confusion here. When I say 'zooming' in context of this issue, I mean zoom in/zoom out using external UI controls (like buttons, as it can be seen in my example), not zooming by msing mouse wheel or anything similar.

helgasoft commented 10 months ago

ok, got it, and feel your pain. Controlling by zoom is tough (to the point of impractical) since one has to save all collapse/expand user actions, like myChart.on('click', 'series', (x) => { console.log(x.treeAncestors, x.collapsed) }), then restore them after each manual zoom.

undeletable commented 10 months ago

I was able to work this around without introducing additional complication of preserving the nodes state. Instead of using series.zoom, I just change width and height of parent element (e.g., if initial width is 1000px, the width after 1.5x zoom would be 1500px), and when they change, I call resize() method of chart instance, passing {height: "auto", width: "auto"} as argument.

FrontMizfaTools commented 5 months ago

Have the same issue. why should setOption series reset the state of nodes ?! for example i want to use a slider to change the fontSize of tree labels which is in series but the expand and collapse will reset for whole data