vue中在echarts里设置的定时器清除不掉问题及解决

this.barInter = setInterval(() => {
        // 每次向后滚动一个，最后一个从头开始。
        // console.log(this.xNum)
        if (option.dataZoom[0].endValue >= option.series[0].data.length) {
          option.dataZoom[0].endValue = that.xNum;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + that.xNum;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + that.xNum;
        }
        myChart.setOption(option);
}, 1000);

getData(){
    this.$axios.selectEfficiencyExhibition(data).then((res) => {
        // console.log("设备OEE");
        // console.log(res.data.data);
        if (res.data.data) {
            this.barData=res.data.data
            this.$nextTick(()=>{
                this.barChart()
              })
        }
    })
}
barChart(){
      let myChart = that.$echarts.getInstanceByDom(
        document.getElementById("productivity")
      ); //有的话就获取已有echarts实例的DOM节点。
      if (myChart == null) {
        // 如果不存在，就进行初始化。
        myChart = that.$echarts.init(document.getElementById("productivity"));
      }
    var option={
        //其他配置我就跳过不写了
        dataZoom: [
          {
            type: "inside", //拖拽 slider 为滚动
            xAxisIndex: 0, //控制第一个x轴
            startValue: 0,
            endValue: that.xNum,//这个值是我动态设置显示多少个柱形
            show: true,
          },
        ],
        series:{
            name: "绿灯",
            type: "bar",
            stack: "total",
            barMaxWidth: 50,
            data: this.barData,//后端返的柱形图数据
            itemStyle: {
              normal: { color: "#14ee14" },
            },
        }
    }
    // 使用刚指定的配置项和数据显示图表。
      this.barInter = setInterval(() => {
        // 每次向后滚动一个，最后一个从头开始。
        if (option.dataZoom[0].endValue >= option.series.data.length) {
          option.dataZoom[0].endValue = this.xNum;
          option.dataZoom[0].startValue = 0;
        } else {
          option.dataZoom[0].endValue = option.dataZoom[0].endValue + 1;
          option.dataZoom[0].startValue = option.dataZoom[0].startValue + 1;
        }
        myChart.setOption(option);
      }, 1000);  
}    

// 查询按钮点击事件
const search = () => {
    if (listParams.datePicker) { //如果是时间则取消自动刷新
        clearInterval(time.value)
        getAllList()
        titleBegin.value = '开启自动刷新'
    } else {
        getAllList()
        titleBegin.value = '关闭自动刷新'
    }
}
//监听数据并计时
watch(
    () => chartAvgCostData.value,
    (newVal) => {
        if (!listParams.datePicker) {
            clearInterval(time.value)
            timeOut()
        }
    }
)
//累计计时的方法
const timeOut = () => {
    time.value = setInterval(() => {
        getAllList()
    }, 1000 * 20)
}
//清空定时器效果
onUnmounted(() => {
    clearInterval(time.value)
})
// 需要在切换到其他页面时停止自动刷新，切回来时再开启
document.addEventListener('visibilitychange', () => {
    if (
    !listParams.projectName && 
    Object.keys(chartAvgCostData.value).length > 0
    )
    {
        return
    }
    if (document.hidden) {
        // 清除定时任务
        clearInterval(time.value)
        time.value = null
    } else {
        // 开启定时任务
        getAllList()
    }
})
//数据值大导致起伏不明显问题
yAxis: {
     min: function (value:any) { // 取最小值向下取整为最小刻度
         return 0
     },
            // 设置y轴最大值
    max: function (value:any) { // 取最大值向上取整为最大刻度
        return Math.floor(value.max + (Math.floor(value.max / 4)))
   },
}
series：[
markPoint: {
     data: [
        { type: 'max', name: 'Max' },
        { type: 'min', name: 'Min' }
     ]
},
]
//组件初次进来或者销毁清空图表
onMounted(() => {
    nextTick(() => {
        let myChart = echarts.getInstanceByDom(document.getElementById(myCanvas.value)!)
        if (myChart) {
            myChart.clear()
        }
        if (myChart === undefined) {
            myChart = echarts.init(document.getElementById(myCanvas.value) as HTMLElement)
            myChart.group = 'group1'
            myChart.setOption(datas.option)
            echarts.connect('group1')
            window.addEventListener('resize', () => { setTimeout(() => { myChart?.resize() }, 300) }) // 自适应屏幕
        }
    })
})
onBeforeUnmount(() => {
    const myChart = echarts.getInstanceByDom(document.getElementById(myCanvas.value)!)
    if (myChart) {
        myChart.clear()
    }
})