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

在动态图里，往往需要用到定时器去动态渲染数据，我的需求是：当x轴类目过多的时候，就让它自动滚动，这个时候需要用到定时器去动态的控制dataZoom里endValue的值，

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);

然后我就遇到一个bug，发现怎么也清除不了这个定时器，现在讲一下解决思路
造成这个bug的原因是：
因为要将后端返的数据赋值给柱形图里series的data，我一开始采用的方式是，用watch监听返回的值，然后赋值给data，这样做的目的是为了能够渲染出图形，如果直接赋值，图形是不会生效的。关键就在这个watch监听，因为我一直在监听，导致一直生成定时器，才使得用clearInterval也无法清除掉定时器，因为你即使清除了 它又立马生成了一个新的定时器。

分析出问题所在，那我们就换一种方式去赋值，然后我采用了
在.then里使用this.$nextTick 去调用生成echarts图形的函数，也就是

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);  
}		

采用这种方式后，就不会一直生成定时器了，直接用clearInterval(this.barInter)就能清除掉
整体就这么一个思路，其实解决起来也很简单，只是换了一种动态赋值方式，关键是要分析正确导致问题的原因。