if (xData.length > 0) {
this.autoMove();
this.myChart.on('mouseover', this.stop());
this.myChart.on('mouseout', this.goMove());
}
this.option && this.myChart.setOption(this.option);
},
autoMove() {
this.timechartes = setInterval(() => {
if (this.option.dataZoom[0].endValue == this.addXseData.length) {
this.option.dataZoom[0].endValue = 10;
this.option.dataZoom[0].startValue = 0;
} else {
this.option.dataZoom[0].endValue = this.option.dataZoom[0].endValue + 1;
this.option.dataZoom[0].startValue = this.option.dataZoom[0].startValue + 1;
}
this.myChart.setOption(this.option)
}, 2000);
},
stop() {
clearInterval(this.timechartes)
},
goMove() {
this.autoMove()
},
在为事件监听器添加回调函数时,您直接调用了this.stop()和this.goMove()。这会导致在绑定事件监听器时立即执行这些函数,而不是在事件触发时执行。你需要将它们作为回调函数传递。
if (xData.length > 0) {
this.autoMove();
this.myChart.on('mouseover', () => this.stop()); // 使用箭头函数包装回调
this.myChart.on('mouseout', () => this.goMove()); // 使用箭头函数包装回调
}
this.option && this.myChart.setOption(this.option);
试一试使用箭头函数包装this.stop和this.goMove,以确保它们在事件触发时执行。这样当鼠标移入图表时,滚动将停止;当鼠标移出图表时,滚动将继续。
编写 mouse_enter mouse_leave 之类的事件的代码,控制下滚动