swiper插件实现echarts 轮播

背景：我想在大屏上使用轮播的echarts图。原本打算使用bootstrap的causal来实现，但实际运用发现了一下问题：

1. 加载第二页的时候，echarts会变得很小
2. 每次轮播都需要重新调用接口，增加了开销

最后采用swiper插件来实现需求。
swiper官网

<div class="swiper-container visual_swiper2">
    <div class="swiper-wrapper">
        <div class="swiper-slide">这里放echarts 1</div>
        <div class="swiper-slide">这里放echarts 2</div>
    </div>
    
    <!-- 如果需要分页器 
    <div class="swiper-pagination"></div>-->
    
    <!-- 如果需要导航按钮
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
    
    <!-- 如果需要滚动条 
    <div class="swiper-scrollbar"></div> -->
</div>

js部分：

<script>        
  var mySwiper = new Swiper ('.visual_swiper2', {
    direction: 'horizontal', // 水平切换选项 垂直:vertical
    // loop: true, 
    // autoplay: true,//可选选项，自动滑动
    // speed: 10000,//可选选项，滑动速度
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
    
    // 如果需要滚动条
    scrollbar: {
      el: '.swiper-scrollbar',
    },
  })        
  </script>