用swiper组件，轮播Echarts图表

先放效果图：

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

页面引入

import Swiper from 'swiper' // 注意引入的是Swiper
import 'swiper/css/swiper.min.css'

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide swiper-slide1">
        <div class="myChart1"></div>
        <div class="myChart2"></div>
      </div>
      <div class="swiper-slide swiper-slide2">
        <div id="myChart4" class="myCharts4"></div>
        <div id="myChart5" class="myCharts5"></div>
      </div>
      <div class="swiper-slide swiper-slide3">
        <div id="myChart3" class="myCharts3"></div>
        <div id="myChart6" class="myCharts6"></div>
      </div>
      <div class="swiper-slide swiper-slide4">
        <div class="myChart7"></div>
        <div class="myChart8"></div>
      </div>
    </div>
    <!-- 如果需要分页器 -->
    <div class="swiper-pagination"></div>

    <!-- 如果需要导航按钮 -->
    <!-- <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div> -->
  </div>
</template>

 

 mounted() {
    new Swiper('.swiper-container', {
      direction: 'horizontal', // 垂直切换选项
      loop: true, // 循环模式选项
      autoplay: true, //可选选项，自动滑动
      // 如果需要分页器
      pagination: {
        el: '.swiper-pagination',
        clickable: true,  // 自动滚动
      },
      // 如果需要前进后退按钮
      navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
      // 如果需要滚动条
      scrollbar: {
        el: '.swiper-scrollbar',
      },
    })
    this.Chart()
  },

因为页面有八个图表  代码有点多 我就拿出一个示范一下，可以参考图表样式。 数据用到了day.js

methods: {
    Chart() {
      var chartDom = document.getElementById('myChart')
      var myChart = this.$echarts.init(chartDom)
      var option

      option = {
        title: {
          text: '回转1#机构',
          textStyle: {
            color: '#fff',
            fontWeight: 600,
            fontSize: 16,
          },
          subtext: '当前均值: 0.5', // 副标题
          subtextStyle: {
            color: '#11d1e1',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          // left: 30,
          bottom: 30,
        },
        xAxis: [
          {
            type: 'time',
            min: 'dataMin',
            max: 'dataMax',
            axisLabel: {
              color: '#ccc', //刻度线标签颜色
              formatter: '{MM}-{dd}',
            },
            axisLine: {
              show: true,
              lineStyle: {
                opacity: 1,
                color: '#aaaaaa',
              },
              onZero: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'gainsboro',
                opacity: 0.5,
                type: 'dashed',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: -1,
            max: 1,
            splitLine: false,
            axisLabel: {
              color: '#ccc', //刻度线标签颜色
            },
          },
        ],
        series: [
          {
            type: 'line',
            color: '#11d1e1',
            symbol: 'none',
            smooth: true, //设置折线图平滑
            data: [
              [dayjs('2022-03-1', 'YYYY-MM-DD').valueOf(), -0.5],
              [dayjs('2022-03-2', 'YYYY-MM-DD').valueOf(), 0.5],
              [dayjs('2022-03-3', 'YYYY-MM-DD').valueOf(), 0.4],
              [dayjs('2022-03-4', 'YYYY-MM-DD').valueOf(), -0.4],
              [dayjs('2022-03-5', 'YYYY-MM-DD').valueOf(), 0.6],
              [dayjs('2022-03-6', 'YYYY-MM-DD').valueOf(), -0.5],
              [dayjs('2022-03-7', 'YYYY-MM-DD').valueOf(), -0.2],
            ],
          },
        ],
      }
      myChart.setOption(option)

    },
  },

如果都这样写，最后一页和第一页图表会显示不出来，建议把第一页和最后一页的图表这样写

var option = {
        title: {
          text: '起升1#机构',
          textStyle: {
            color: '#fff',
            fontWeight: 600,
            fontSize: 16,
          },
          subtext: '当前均值: 0.5', // 副标题
          subtextStyle: {
            color: '#11d1e1',
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          // left: 30,
          bottom: 30,
        },
        xAxis: [
          {
            type: 'time',
            min: 'dataMin',
            max: 'dataMax',
            axisLabel: {
              color: '#ccc', //刻度线标签颜色
              formatter: '{MM}-{dd}',
            },
            axisLine: {
              show: true,
              lineStyle: {
                opacity: 1,
                color: '#aaaaaa',
              },
              onZero: false,
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: 'gainsboro',
                opacity: 0.5,
                type: 'dashed',
              },
            },
          },
        ],
        yAxis: [
          {
            type: 'value',
            min: -1,
            max: 1,
            splitLine: false,
            axisLabel: {
              color: '#ccc', //刻度线标签颜色
            },
          },
        ],
        series: [
          {
            type: 'line',
            color: '#cb5127',
            symbol: 'none',
            smooth: true, //设置折线图平滑
            data: [
              [dayjs('2022-03-1', 'YYYY-MM-DD').valueOf(), -0.5],
              [dayjs('2022-03-2', 'YYYY-MM-DD').valueOf(), 0.5],
              [dayjs('2022-03-3', 'YYYY-MM-DD').valueOf(), 0.4],
              [dayjs('2022-03-4', 'YYYY-MM-DD').valueOf(), -0.4],
              [dayjs('2022-03-5', 'YYYY-MM-DD').valueOf(), 0.6],
              [dayjs('2022-03-6', 'YYYY-MM-DD').valueOf(), -0.5],
              [dayjs('2022-03-7', 'YYYY-MM-DD').valueOf(), -0.2],
            ],
          },
        ],
      }
      const arr1 = document.getElementsByClassName('myChart')
      for (let i = 0; i < arr1.length; i++) {
        const key1 = arr1[i]
        if (key1.innerHTML === '') {
          this.$echarts.init(key1).setOption(option)
        }
      }