使用swiper对echart进行轮播

接到一个需求是对echarts图标进行轮播
例图：

下面的两个点代表轮播切换

安装swiper

npm install swiper@5.4.5 //据说这个版本稳定一点

swiper的使用方法：

https://www.swiper.com.cn/usage/index.html

在项目中应用swiper

<template>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide swiper-slide1">Slide 1</div>
            <div class="swiper-slide swiper-slide2">Slide 2</div>
            <div class="swiper-slide swiper-slide3">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>
</template>

<script>
import Swiper from 'swiper'; // 注意引入的是Swiper
import 'swiper/css/swiper.min.css' // 注意这里的引入

window.onload = function() {
  var mySwiper = new Swiper('.swiper-container', {
	// config...
  })
}

export default {
    name: 'HelloWorld'
}
</script>

<style scoped>
.swiper-container {
    width: 500px;
    height: 400px;
}
.swiper-slide {
    text-align: center;
    line-height: 400px;
    color: #b0b0b0;
}
.swiper-slide1 {
    background: red;
}

.swiper-slide2 {
    background: blue;
}

.swiper-slide3 {
    background: yellow;
}
</style>

此时已经能滚动了

然后将swiper-slide修改成echarts图

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div v-for="(item,index) in 5" :key="index" class="swiper-slide">
        <EquipmentType :id="item.id" :ref="item.ref" :optionLine="item.option" />
      </div>
    </div>
    <div class="swiper-pagination"></div>
  </div>
</template>

这个时候出现了一个问题

原因是我在组件中是给echarts的父盒子设了高度，没有给echarts自己设高度，给他设立高度之后就能撑起来了。
下面swiper默认的分页器是圆点，如果要改成自定义样式需要重新写css

<style >
.swiper-pagination {
  bottom: 15px !important;
}
.swiper-pagination-bullet {
  background-color: #def7ff !important;
  width: 44px;
  height: 8px;
  transform: skew(20deg);
  border-radius: 0;
}
.swiper-pagination-bullet-active {
  background-color: #01ffff !important;
}
</style>

注意：！！！不要写在scoped里面