First of all, we need to listen to the sliding event in echarts. The code is as follows: In the echarts graph, click on the highlight, and the position of the slider does not need to update the configuration.
In this way, the start position and end position of the slider can be monitored, and then the values of start and end can be recorded.
Then when the event is clicked, reset the start and end properties of datazoom in the option, and finally re-render echarts.setOption() again.
That's it, perfectly solved the problem.
It is also the first time to use datazoom in echarts. I feel that some configurations are not fully understood. You can learn more from echarts official documents. Some attribute configurations are actually very simple to use, and we don’t need to write more code to achieve it. , it can be realized by direct configuration, so that the code will be more concise and beautiful.