Zoom stops working when using graphic elements

[mass85]

Confirmation

• [X] I can confirm this problem is not reproducible with ECharts itself.

How are you introducing Vue-ECharts into your project?

ES Module imports

Versions

├─┬ vue-echarts@6.6.8
│ ├── echarts@5.4.3
│ ├─┬ vue-demi@0.13.11
│ │ └── vue@3.2.47 deduped
│ └── vue@3.2.47 deduped
├─┬ vue-router@4.2.5
│ └── vue@3.2.47 deduped
├── vue@3.2.47
└─┬ vuex@4.1.0
  └── vue@3.2.47 deduped

Details

I'm writing an application that allows user to change width of rectangles rendered as custom series. I add graphic circle elements to the chart that user can drag to change start and end of rectangles (windows). It worked fine until I added zoom functionality. When I try to zoom i.e. via scroll, the zoom blocks. See the reproduction project.

Reproduction

https://codesandbox.io/p/sandbox/floral-hill-gyw6dm

[Justineo]

You can specify :update-options="{ notMerge: false }" so that the chart instance will adopt incremental updates instead. Otherwise ECharts will discard its internal states (including those of the dataZoom feature).

[mass85]

Thank you. A follow up question: how to avoid rendering of these graphic elements out of grid area? In other words how to find range of x and y axis values visible for current zoom settings in order to hide graphic element when it is beyond?

Second question - what is your recommended pattern for setting options, use ref and modify its contents or use computed and modify refs that it depends on?

[Justineo]

A follow up question: how to avoid rendering of these graphic elements out of grid area? In other words how to find range of x and y axis values visible for current zoom settings in order to hide graphic element when it is beyond?

This is beyond the scope of this project (which is only integrating ECharts with Vue). I suggest you seek help in the ECharts community.

Second question - what is your recommended pattern for setting options, use ref and modify its contents or use computed and modify refs that it depends on?

I think both are acceptable. But note that Vue-ECharts implicitly handles updates differently based on whether the reference has changed.