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

Question

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

Answer 1

在为事件监听器添加回调函数时，您直接调用了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，以确保它们在事件触发时执行。这样当鼠标移入图表时，滚动将停止；当鼠标移出图表时，滚动将继续。