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

技術棧：vue + swiper + echarts 

1.0遇到的問題

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

Key : 百度了一下，有網友提到，是id或者說$ref復制重復導致，之后采用class類循環初始化解決問題

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

 

2.0遇到的問題

使用class類循環初始化，但是echarts圖還是不顯示，

Key: 猜測可能是循環顯示的時機問題，添加定時將執行時機滯后，顯示成功，

 

　　　　　　let that = this;
　　　　　　　　setTimeout(()=>{
     　　　　　　　　this.$nextTick(()=>{
           　　　　　　this.initChart();
      　　　　})
　　　　　　},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類，

　　　　　　<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的初始化對象就是唯一的。

 

　　　　　　　initChart(){
                if(this.modelTypeArr.includes('ratioEcharts') ) {
                    // 獲取父元素的類名 
                    let dom = document.getElementsByClassName(`echarts-box${this.modelName}`)               
                    for(var i=0;i<dom.length;i++){
                        var mytest= dom[i].children[0].children[0]
                        var myChart = echarts.init(mytest);
                        myChart.setOption(this.option);   
                    }
                }
        　　}

 

 

一、個人小結

 

其中的坑主要是開啟loop循環的時候常用的獲取$ref或者id初始化，導致的問題，執行的時機，復制的順序是解題的關鍵