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         　　}

 

 

1、我的小结

 

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