swiper 循环模式下的Echarts图展示问题小结

**技术栈：**vue + swiper + echarts

1.0遇到的问题

swiper开启loop循环模式，每一个slide中包含一个echarts图，使用以前通用的模式循环在echarts中使用id或者$refs获取元素初始化，出现循环的echarts图不显示，但是slide中的文本没有影响，

Key : 百度了一下，有网友提到，是id或者说$ref复制重复导致，之后采用class类循环初始化解决问题

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

2.0遇到的问题

使用class类循环初始化，但是echarts图还是不显示，

Key: 猜测可能是循环显示的时机问题，添加定时将执行时机滞后，显示成功，

1 　　　　　　let that = this;
2 　　　　　　　　setTimeout(()=>{
3      　　　　　　　　this.$nextTick(()=>{
4            　　　　　　this.initChart();
5       　　　　})
6 　　　　　　},0)

3.0 遇到的问题
echarts图数据错乱

Key: 通过数据打印发现使用class类循环的echarts图一直会展示最后一个使用的数据，数据不具有唯一性，解决办法，轮播图复制的slide使用class特定的echarts初始化，其他的还是使用id或者$ref初始化 ，解决问题

4.0 遇到的问题

客户反映，轮播图复制的部分必须使用特定的echart图，编辑器操作不太方便，希望改进

Key:
*思路一，*在echarts图初始化的时候进行判断，如果哪个存在则使用哪一个。失败

*思路二，*可能是id不具有唯一性，如果动态生成id使id具有唯一性是否解决class类循环的不唯一导致的echarts图数据错乱问题，结果发现复制的数据上 math.random生成的id也被复制 失败

*思路三，*执行的时机，需要在轮播图初始化后再初始化echarts图，

第一种 将echarts图初始化在其父组件swiper初始化完后执行，因为封装的层数太多无法实现，

考虑第二种 方法将class类绑定到echartbox组件上，因为文本的复制并没有导致问题，所以将值传入echarts中，在echarts中初始化的时候遍历同一个轮播图中的class类，

1 　　　　　　<div class="echarts-box " :class= " `echarts-box${IdFlag} `" >   
2     　　　　　　<all-charts  :model-type="modelTypeArr" :model-name="tempList.modelName"  :chart-name="tempList.chartName" >
3     　　　　　　</all-charts>
4 　　　　　　</div>  

获取其子元素echarts的对象然后初始化。这样每一个echarts的初始化对象就是唯一的。

 1 　　　　　　　initChart(){
 2                 if(this.modelTypeArr.includes('ratioEcharts') ) {
 3                     // 获取父元素的类名 
 4                     let dom = document.getElementsByClassName(`echarts-box${this.modelName}`)               
 5                     for(var i=0;i<dom.length;i++){
 6                         var mytest= dom[i].children[0].children[0]
 7                         var myChart = echarts.init(mytest);
 8                         myChart.setOption(this.option);   
 9                     }
10                 }
11         　　}

一、个人小结

其中的坑主要是开启loop循环的时候常用的获取$ref或者id初始化，导致的问题，执行的时机，复制的顺序是解题的关键