echarts折线图x轴滚轮放大后，数据刷新返回原始时间状态

echarts 折线图X轴设置为可缩放

dataZoom: ［{
start: 0,
end:100,
show: false,
type: 'inside'
}］

初始状态:当前时刻前数两个小时的数据

滚轮时间范围几分钟放大状态:

数据刷新后/还是返回了原始两个小时的数据量:

怎样设置才可以记录我的滚轮放大那个状态，数据刷新折线图上依然显示放大后的数据量

img

我不知道回复你们的功能点哪里，我折线图是一个组件，引入到一个主页面，父组件给子组件穿参，子组件watch监听数据变化，setOption

通过缓存机制可以吗

你是如何更新数据的，我这里写的demo不会重置zoom

img

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="chart" style="width: 400px; height: 280px;"></div>
  <button id="btn">update data</button>
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.js"></script>
  <script>
    const chart = echarts.init(document.getElementById('chart'))
    const btn = document.getElementById('btn')
    chart.setOption({
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      dataZoom: {
        type: 'inside'
      },
      series: [
        {
          data: [820, 932, 901, 934, 1290, 1330, 1320],
          type: 'line',
          areaStyle: {}
        }
      ]
    })
    // 可以在这里监听dataZoom
    chart.on('dataZoom', params => {
      console.log('params: ', params);
    })
    btn.onclick = () => {
      let data = []
      for (let i = 0; i < 7; i++) {
        data.push(Math.random() * 100)
      }
      chart.setOption({
        series: [{
          data
        }]
      })
    }
  </script>
</body>
</html>