码海探路 2023-03-17 04:45 采纳率: 66.7%
浏览 63
已结题

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()
        },
  • 写回答

3条回答 默认 最新

  • a1015255088 2023-03-17 05: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,以确保它们在事件触发时执行。这样当鼠标移入图表时,滚动将停止;当鼠标移出图表时,滚动将继续。

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(2条)
编辑
预览

报告相同问题?

问题事件

  • 系统已结题 3月24日
  • 已采纳回答 3月17日
  • 创建了问题 3月17日

悬赏问题

  • ¥15 PADS Logic 原理图
  • ¥15 PADS Logic 图标
  • ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
  • ¥20 气象站点数据求取中~
  • ¥15 如何获取APP内弹出的网址链接
  • ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
手机看
程序员都在用的中文IT技术交流社区

程序员都在用的中文IT技术交流社区

专业的中文 IT 技术社区,与千万技术人共成长

专业的中文 IT 技术社区,与千万技术人共成长

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

关注【CSDN】视频号,行业资讯、技术分享精彩不断,直播好礼送不停!

客服 返回
顶部