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 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,以确保它们在事件触发时执行。这样当鼠标移入图表时,滚动将停止;当鼠标移出图表时,滚动将继续。
本回答被题主选为最佳回答 , 对您是否有帮助呢? 本回答被专家选为最佳回答 , 对您是否有帮助呢? 本回答被题主和专家选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏举报微信扫一扫点击复制链接分享编辑预览轻敲空格完成输入- 显示为
- 卡片
- 标题
- 链接
评论按下Enter换行,Ctrl+Enter发表内容
编辑
预览
轻敲空格完成输入
- 显示为
- 卡片
- 标题
- 链接
报告相同问题?
提交
- 2022-11-16 02:28回答 2 已采纳 tooltip 配置加上 confine: true 就可以了 是否将 tooltip 框限制在图表的区域内。 当图表外层的 dom 被设置为 'overflow: hidden',或者移动端窄
- 2022-03-18 02:53回答 2 已采纳 可能是获取dom绘制时布局还没有完成,获取到的宽高不正确。将this.initEcharts()放入$nextTick()试试mounted() { this.$nextTick(() =>
- 2023-03-10 03:42回答 3 已采纳 你可以参考下这个问题的回答, 看看是否对你有帮助, 链接: https://ask.csdn.net/questions/7781182你也可以参考下这篇文章:解决 Echarts 图表在旧容器上重新
- 2023-03-17 01:51梁小茹的博客 示例: 主要就加两块代码直接... myChart.on('mouseover',this.stop) myChart.on('mouseout',this.goMove) },2000) } //停止滚动 stop(){ clearInterval(this.timeOut) }, //继续滚动 goMove(){ this.autoMove() }
- 2023-02-10 06:35回答 3 已采纳 可以通过判断数据的数量,如果数据数量较少,就将dataZoom组件的enabled属性设置为false,如果数据数量较多,就将enabled属性设置为true。这样可以在数据数量变化时动态地控制dat
- 2022-04-05 11:12回答 2 已采纳 看控制台有什么报错没有
- 2022-03-26 15:46回答 2 已采纳 你可以将动态数据在option传过去https://blog.csdn.net/qq_36802726/article/details/118730719
- 2023-10-07 07:23温柔于心动的博客 首次移入的时候,出现滚动条及抖动
- 2022-01-18 12:39回答 3 已采纳 看题 x 轴显示不全,可以在xAxis.axisLabel 属性设置倾斜; axisLabel: { interval:0, rotate:40 } 效果如图: x轴移
- 2021-07-23 03:43回答 3 已采纳 option = { xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri',
- 2019-09-25 03:54回答 1 已采纳 https://www.echartsjs.com/zh/option.html#series-line.itemStyle ``` series: {
- 2022-03-21 09:501024_Byte的博客 原因:当时设置了tooltip时,鼠标移入会触发悬浮事件,并且会有一个默认的0.4秒过渡时间值 当我们把值设置为0时,紧跟着鼠标移动就会解决抖动问题 tooltip: { transitionDuration:0,//[defaule:0.4] echart防止...
- 2022-05-28 07:23瑞晟技术服务中心-耿瑞的博客 这个是个比较坑的问题 我之前这样写的 series: [{ barWidth:'20', name: '部门', type: 'bar', data: ydata, color: 'rgba(69,114,167)' }] 其中color: 'rgba(69,114,167)'是不规范的 要写成color: ‘rgba(69,...
- 2023-05-26 08:50疾风剑索的博客 【代码】echarts饼图实现自动轮播效果,鼠标滑入时停止轮播,鼠标移出时继续轮播。
- 2024-10-09 10:23毛三仙的博客 【代码】echarts 图表鼠标放上去展示tooltip碰到屏幕边缘隐藏了。
- 没有解决我的问题, 去提问
问题事件
悬赏问题
- ¥15 PADS Logic 原理图
- ¥15 PADS Logic 图标
- ¥15 电脑和power bi环境都是英文如何将日期层次结构转换成英文
- ¥20 气象站点数据求取中~
- ¥15 如何获取APP内弹出的网址链接
- ¥15 wifi 图标不见了 不知道怎么办 上不了网 变成小地球了
联系我们(工作时间:8:30-22:00)
400-660-0108kefu@csdn.net在线客服
- 京ICP备19004658号
- 经营性网站备案信息
- 公安备案号11010502030143
- 营业执照
- 北京互联网违法和不良信息举报中心
- 家长监护
- 中国互联网举报中心
- 网络110报警服务
- Chrome商店下载
- 账号管理规范
- 版权与免责声明
- 版权申诉
- 出版物许可证
- ©1999-2025北京创新乐知网络技术有限公司