需求

在前端定时获取数据并动态展示在图表中，可以鼠标拖动查看不同时间段的数据。

实现方法

实时更新数据方法就是每次调用接口获取数据成功后，将数据push到存放数据的数组中，然后调用ECharts的setOption方法重新绘制即可，鼠标拖动查看使用dataZoom即可。

问题

dataZoom重置

在用户使用dataZoom组件查看数据时，数据进行了更新并调用了setOption重绘，这时dataZoom被重置为初始状态。我们希望在dataZoom选择的位置不会因为数据更新而改变，产生跳动的情况。

dataZoom中使用start和end标记数据窗口的显示范围，在用户操作后，记录下当前的start和end值，在下次数据刷新时使用，就能使窗口位置保持不变。

this.myChart.on('dataZoom', (event) => {
  this.dataZoom.end = event.end
  this.dataZoom.start = event.start
})

动态刷新后x，y轴数据不对应

平滑曲线下

折线图

解决方法：

1. 在setOption中设置animation: false 关闭动画

2. 在dataZoom中设置filterMode: 'empty'