echarts图表中如何实现鼠标移入时停止滚动,移出时继续滚动


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 之类的事件的代码,控制下滚动