vue-apexchart updateSeries 移动页面滚动

如何解决vue-apexchart updateSeries 移动页面滚动

我正在使用实时折线图，当我在每次更新时向下滚动图表时，它会向上移动页面滚动一点（我的间隔是 1000，所以每秒）

代码如下：

<template>
  <div id="chart">
    <apexchart type="line" height="100" ref="chart" :options="chartOptions" :series="series"></apexchart>
  </div>
</template>

<script>
let lastDate = 0;
let data = []
let TICKINTERVAL = 86400000
let XAXISRANGE = 777600000
function getDayWiseTimeSeries(baseval,count,yrange) {
  let i = 0;
  while (i < count) {
    let x = baseval;
    let y = Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min;

    data.push({
      x,y
    });
    lastDate = baseval
    baseval += TICKINTERVAL;
    i++;
  }
}
  
getDayWiseTimeSeries(new Date('11 Feb 2017 GMT').getTime(),10,{
  min: 10,max: 90
})

function getNewSeries(baseval,yrange) {
  let newDate = baseval + TICKINTERVAL;
  lastDate = newDate

  for(let i = 0; i< data.length - 10; i++) {
    // IMPORTANT
    // we reset the x and y of the data which is out of drawing area
    // to prevent memory leaks
    data[i].x = newDate - XAXISRANGE - TICKINTERVAL
    data[i].y = 0
  }

  data.push({
    x: newDate,y: Math.floor(Math.random() * (yrange.max - yrange.min + 1)) + yrange.min
  })
}

function resetData(){
  // Alternatively,you can also reset the data at certain intervals to prevent creating a huge series 
  data = data.slice(data.length - 10,data.length);
}

export default {
  name: "BtcChart",props: {
    color: String,},data() {
    return {
      series: [{
        data: data.slice()
      }],chartOptions: {
        chart: {
          id: 'realtime',height: 100,type: "line",zoom: {
            enabled: false,animations: {
            enabled: true,easing: "linear",dynamicAnimation: {
              speed: 1000
            }
          },toolbar: {
            show: false,dataLabels: {
          enabled: false,stroke: {
          curve: "smooth",width: 2,colors: [this.color],grid: {
          show: false,tooltip: {
          enabled: false,x: {
            format: "dd MMM yyyy",xaxis: {
          axisBorder: {
            show: false,axisTicks: {
            show: false,labels: {
            show: false,yaxis: {
          show: false,};
  },mounted: function () {
    var me = this
    window.setInterval(function () {
      getNewSeries(lastDate,{
        min: 10,max: 90
      })
      
      me.$refs.chart.updateSeries([{
        data: data
      }])
    },1000)
  
    // every 30 seconds,we reset the data to prevent memory leaks
    window.setInterval(function () {
      resetData()
      
      me.$refs.chart.updateSeries([{
        data
      }],false,true)
    },30000)
  },};
</script>

那么我的代码有什么问题？我已经有八个这样的图表，当我向下滚动时，它会向上移动页面直到到达图表部分