在动态图里,往往需要用到定时器去动态渲染数据,我的需求是:当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)就能清除掉
整体就这么一个思路,其实解决起来也很简单,只是换了一种动态赋值方式,关键是要分析正确导致问题的原因。