search

apache / echarts

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

[Question] Dyanmic chart removes all existing chart #20326

Closed SeanErvinson closed 2 months ago

SeanErvinson commented 2 months ago

What problem does this feature solve?

Hi, I've been playing around with e-charts for a bit now, and I've been trying to dynamically add new chart in a single grid but every time I add a new chart the old one disappears. I've tried playing around with replceMerge but for some reason can't seem to make it work. I can enable notMerge option but this conflicts with any state (datazoom, legend, etc).

https://github.com/user-attachments/assets/7493badc-43f0-46fe-b035-ad821bdec195

I suspect what's happening is the height of the first grid doesn't get applied properly. I've read through the replaceMerge docs but maybe I've overlooked at how it works. My understanding is that any existing component with Id doesn't get recreated but applied over it and anything with an id gets appended to the tail.

I've attached the sample github repo to show https://github.com/SeanErvinson/sample-echart/blob/master/src/GraphV2.tsx

Sample site https://magnificent-baklava-2c5d4a.netlify.app/

What does the proposed API look like?

It should be able to dynamically add chart to existing grid

MatthiasMert commented 2 months ago

only the existing components that has its id declared in the incoming option will be kept, other existing components will be removed

If you pass an option to setOption with {replaceMerge: ['series']}, any series that is missing in the new passed option and exists in the previous option will be removed.

SeanErvinson commented 2 months ago

only the existing components that has its id declared in the incoming option will be kept, other existing components will be removed

If you pass an option to setOption with {replaceMerge: ['series']}, any series that is missing in the new passed option and exists in the previous option will be removed.

Thanks, I tried all the possible combinations but still no luck. (XAxis,YAxis, Grid, Series, Dataset)

MatthiasMert commented 2 months ago

I suspect echarts is merging something in an unintended way which leads to some inconsistentcy. I would assign everything an id to prevent echarts from accidently merging unrelated components. Here is a small example how it can work (click the button in the top right corner). I hope this helps.

SeanErvinson commented 2 months ago

I suspect echarts is merging something in an unintended way which leads to some inconsistentcy. I would assign everything an id to prevent echarts from accidently merging unrelated components. Here is a small example how it can work (click the button in the top right corner). I hope this helps.

Sorry for the late response. Just as you suggested, I tried switching to using IDs and set replaceMerge to grid, xAxis, yAxis, series, and dataset and it worked. I guess using indexes and possibly the way I was setting the components was causing issue with how eCharts merges. Thanks a lot @MatthiasMert