echartsapache-echarts

Apache ECharts: How to zoom independantly on different yAxis on a graph, while being able to setOption?


I have an application using Apache ECharts where I can add or remove series on a line chart. Each series has its own yAxis. I use dataZoom on the xAxis (with scrollwheel and slider). I would like to be able to interact with zoom of each yAxis independently (maybe scroll/drag on a yAxis to zoom/pan this yAxis). I need this zoom change to be persistent between calls to setOption (in order to not loose the modified zoom value of a yAxis when adding a new series etc).

For the moment I have a handler on click event that opens a new dataZoom slider for the clicked yAxis, I can change the zoom of the yAxis, but then zoom is reset when I click on an other yAxis, add a series or any other action that involves setOption.

How to use and persist zoom on several independent yAxis ?

Edit : I'm using setOption with replaceMerge dataZoom (and other keys). This code shows the problem: echarts example


Solution

  • Per default the zoom is not reset when you use setOption as you can see in this example. Why the zoom is reset in your case is very hard to tell without seeing your code.

    I suspect that you are adding and removing the dataZoom from your option. If this is the case, you can change the visibility instead: show: false.


    EDIT:

    Simply dont use replaceMerge: ["dataZoom"] if you dont want to remove any dataZoom options or specify an id for your dataZoom objects and pass in the id of a dataZoom if you dont want to change it.

    Example