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()
},

echarts图表中如何实现鼠标移入时停止滚动,移出时继续滚动
- 写回答
- 好问题 0 提建议
- 关注问题
- 邀请回答
-
3条回答 默认 最新
- a1015255088 2023-03-17 13:39关注
在为事件监听器添加回调函数时,您直接调用了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,以确保它们在事件触发时执行。这样当鼠标移入图表时,滚动将停止;当鼠标移出图表时,滚动将继续。
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报