swiper 循環模式下的Echarts圖展現問題小結

技術棧：vue + swiper + echarts vue

1.0遇到的問題echarts

swiper開啓loop循環模式，每個slide中包含一個echarts圖，使用之前通用的模式循環在echarts中使用id或者$refs獲取元素初始化，出現循環的echarts圖不顯示，可是slide中的文本沒有影響，dom

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遇到的問題ide

使用class類循環初始化，可是echarts圖仍是不顯示，oop

Key: 猜想多是循環顯示的時機問題，添加定時將執行時機滯後，顯示成功，this

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

3.0 遇到的問題spa

echarts圖數據錯亂code

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初始化，致使的問題，執行的時機，複製的順序是解題的關鍵