【ECharts】使用vue-echarts数据实时更新导致dataZoom（数据缩放）被重置问题

前情提要

在使用vue-echarts进行可进行数据缩放的图表的渲染，并且图表数据是实时更新的。每一次更新都会刷新图表，导致用户选择的缩放范围在更新后被重置。

基于此，希望在刷新图表数据时，能够保持缩放范围。

实现过程

1. 基本思想

监听图表的dataZoom（缩放）事件，记录缩放后的start和end（缩放范围）。在刷新图表前，将上述记录的缩放范围设置到option中dataZoom的start和end值。

2. 具体实现

1）设置事件监听

<Echarts
      :style="{ height: height + 'px' }"
      :options="options"
      :auto-resize="true"
      @datazoom="onDataZoom"
 />

2）缩放事件发生时执行的方法，主要实现缩放范围的保存

onDataZoom (event) {
   if (event.batch) {
     // 在图表内使用鼠标滚轮缩放
     this.dataZoom = {
       start: event.batch[0].start,
       end: event.batch[0].end
     }
   } else {
     // 使用滑块缩放
     this.dataZoom = {
       start: event.start,
       end: event.end
     }
   }
 }

3）更新数据后执行mergeOptions(options);chart.resize();之前，作用实现将上述缩放范围设置到当前option的dataZoom中

if (options.dataZoom && this.dataZoom) {
     options.dataZoom[0].start = this.dataZoom.start;
     options.dataZoom[0].end = this.dataZoom.end;

     options.dataZoom[1].start = this.dataZoom.start;
     options.dataZoom[1].end = this.dataZoom.end;
 }

总结

若有更好的方法也可以分享到这里！