swiper和echarts共用，swiper设置loop为true时，排行第一位的echarts图表不显示的问题

在一个大屏项目中，需求需要把echarts图轮播起来，于是我再echarts画板外又套用了一层swiper轮播插件。

除了echarts的点击效果失效外，在swiper的loop属性设置为true时，轮播图的第一块slide和最后一块slide都会出现无法渲染的问题

点击效果本文暂时不谈，着重解决无法渲染的问题。

这主要是因为我在给标签绑定echarts时是使用查找id来绑定的，而在一个页面里id不可重复。

echarts.init(document.getElementById('echartsdom')).setOption(option)　　//option为echarts的参数

swiper的loop属性设置为true后，会复制轮播中的第一个slide和最后一个slide，因此会产生重复的id，无法确定需要被渲染的标签，最终导致了echarts图表无法渲染

(本人只是初步判断是id的问题，在后续操作中发现用v-for渲染的表格也会出现无法渲染的问题，各位看官有高见欢迎指出)

解决方案如下

将通过getElementById获取标签改为getElementsByClassName获取标签数组。然后遍历该数组，将swpier的loop属性复制出来的标签元素也通过echarts渲染一遍

let domlist=document.getElementsByClassName('echartdom')
for(let i=0;i<domlist.length;i++){
　　echarts.init(domlist[i]).setOption(option)
}　　

 

如此改正后即可正常渲染。