search

xieziyu / ngx-echarts

An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
https://xieziyu.github.io/ngx-echarts/
MIT License
1.11k stars 197 forks source link

Keeping the data zoom window using dataZoom event #386

Closed anyplin closed 1 year ago

anyplin commented 1 year ago

Hello

I am trying to create a graph which keeps the data zoom window after data of different days gets loaded.

Scenario

Current zoom: start = 50, end = 100 Zooming out fully (I expected the start to be 0 and end to be 100) Using the dataZoom event the chart option get updated with the reported zoom start and end (I added console output to print the reported start value)

The issue is that the start value is not being returned as 0, mostly it is a value < 5 but there are instances where the window start is being put to 47 or even higher (see image below).

image

When I load the data from another day (Data 2) then the zoom window gets set to that value whilst I would like the zoom window to reflect the state of the previous image (fully zoomed out) image

Can anybody help me with that? I reconstructed a small example using stackblitz which you can find below https://stackblitz.com/edit/angular-yfhr1f?file=src/main.ts

xieziyu commented 1 year ago

Hi @anyplin,

There are some issues in your code and you didn't even use the ngx-echarts component. I have rewritten your example to ensure that the dataZoom property is set correctly: https://stackblitz.com/edit/angular-jzxvdo?file=src/main.ts

I hope this can help you.

anyplin commented 1 year ago

Hi @xieziyu,

this indeed makes it possible to keep the zoom window, thank you very much for the fast help