vue-awesome-swiper结合echarts的那些坑~

前题

vue项目中引用vue-awesome-swiper轮播组件通过动态组件动态加载Echarts绘成的图形，进行轮播翻转，我们项目中所采用的slide的切换效果为"cube"（方块）效果~

问题1：

设置swiper的loop（环路）为true后发现echarts的图形渲染不出来会出现白页的情况，后来才知道是使用swiper loop:true后，slide被克隆导致id不再是唯一，所以echarts的图形出不来。
备注： loop模式：会在原本slide前后复制若干个slide(默认一个)并在合适的时候切换，让Swiper看起来是循环的。
可通过以下方式来解决

var mytest=document.getElementsByClassName('test');
for(var i=0;i<mytest.length;i++){
    var myChart = echarts.init(mytest[i]);
    myChart.setOption(option);
}

问题2

在“cube”方块模式下，绘制出来的echarts进行3d翻转会出现背影映射的情况，
(如图所示)

1782229170.jpg

，想了很久也没找到合适的办法，最后是用jq解决,大概原理是通过swiper提供的activeIndex来设置当前的slider的层级为2就可以了。代码如下

data(){
    return  {
      isIndex:'',                                  // 为了解决this指向问题
      options: {
            effect: 'cube',                        // 类型
            direction: 'vertical',                 // 垂直
            loop：true，                           //环路
            autoplay:{
              delay:3000,
            },
            keyboard: true,                       // 键盘是否开启
            mousewheel: true,                     // 鼠标
            initialSlide: 0,                      // 设置从第几slider个开始
            on:{
              slideChangeTransitionEnd:function(){
                this.Index= this.activeIndex;
                if(this.activeIndex == ''|| this.activeIndex == undefined){
                  this.activeIndex = 0;
                }
                // 目前还不能多个同时运转，待研究
                $('.swiper-wrapper').children().eq(this.activeIndex).siblings().removeClass("newZ");
                $('.swiper-wrapper').children().eq(this.activeIndex).addClass("newZ");
              },
            },
            pagination: {
              el: '.swiper-pagination',
              clickable: true,                      // 小圆点
              bulletClass: 'my-bullet',             // 自定义分页器样式添加类
              bulletActiveClass: 'my-bullet-active' //当前slider
            },
          },
        }
      }
      computed:{
        swiper(){
          if(this.isPreview && this.json.isAnimation == 'true'){
          return this.$refs.NSwiper.swiper
        }
      },
       Index(){
        return this.isIndex;
      },
    },      

愿遇到同样问题的你，看了此文章对你有帮助~，喜欢的话记得点赞和关注哦0.0