在项目中有个需求,使用el-carousel组件轮播许多不同的echarts图表,虽然能够正常展示,但是发现页面比较卡顿,打印台也出了许多的报错信息。
每切换一次图表,就跳许多报错,具体如下:
意思为:在 ECharts 或其他组件中添加了一个非被动的滚动事件监听器。这种类型的监听器可能会阻止浏览器正常滚动,从而导致性能问题,尤其是在移动设备上。
出现这个问题的原因是 使用 el-carousel
组件时,它会自动添加滚动事件监听器以实现轮播效果。如果页面中还包含 ECharts 组件,那么这可能会与 ECharts 的某些交互特性(如缩放和平移)产生冲突。
解决办法就是在配置echarts的option时,添加
let option = {
zoom: false,
roam: false
}
禁止echarts的平移与缩放,就可以解决冲突!