**技术栈:**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初始化,导致的问题,执行的时机,复制的顺序是解题的关键

Logo

前往低代码交流专区

更多推荐