很有用！swiper 循环模式下的Echarts图展示问题

最新推荐文章于 2023-10-25 10:33:47 发布

原创最新推荐文章于 2023-10-25 10:33:47 发布 · 748 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#echarts #js

博客内容讲述了在使用轮播组件（swiper）结合Echarts时遇到的问题，即只有第一个swiper-item中的Echarts图表能够正常显示，而后续的图表无法展示。问题的原因在于id或者$ref的重复，导致Echarts初始化失败。解决方案是通过获取具有特定类名（class）的元素集合，然后循环初始化Echarts实例，从而成功解决图表不显示的问题。

用了轮播 + echarts 会出现第一个swiper-item会展示echarts图，而后面的不会展示

但是如果echarts换成文本没有影响，

解决：

var mytest=document.getElementsByClassName('doubleCubes');
if(mytest&&mytest.length>1){
for(var i=0;i<mytest.length;i++){
var myChart = echarts.init(mytest[i]);
myChart.setOption(this.option);
}
}

id或者说$ref复制重复导致，采用class类循环初始化解决问题