vue项目中实现无缝轮播并动态更新数据

<template>
    <div class="chart-out-wrapper">
      <div class="chart-wrapper"
           ref="swiper"
           @mouseover="mouseHover"
           @mouseout="mouseOut"
      >
        <barChart v-for="(item, index) in categoryDataList"
                  :key="index"
                  class="chart-size"
                  :chartData="item"
                  :chartLeft="20"
                  :color="linearColor[index]"
                  ref="barchart"
        >
        </barChart>
        <barChart class="chart-size"
                  :chartData="categoryDataList[0]"
                  :chartLeft="20"
                  :color="linearColor[0]"
                  ref="barchart"
        >
        </barChart>
      </div>
    </div>
</template>

<script>
  import barChart from './barChart'

  export default {
    name: 'chart',
    components: {
      barChart
    },
    props: {
      categoryDataList: {
        type: Array,
        default: function () {
            return []
        }
      }
    },
    data() {
      const self = this
      return {
        activeChartIndex: 0,
        linearColor: [
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
            offset: 0,
            color: '#394FFD' // 0% 处的颜色
          }, {
            offset: 1,
            color: '#0AFFC5' // 100% 处的颜色
          }], false),
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
            offset: 0,
            color: '#FFCB14'
          }, {
            offset: 1,
            color: '#0DE4C2'
          }], false),
          new this.$echarts.graphic.LinearGradient(0, 0, 1, 1, [{
            offset: 0,
            color: '#B62A2B'
          }, {
            offset: 1,
            color: '#EBBC15'
          }], false)
        ],
        carouselTimer: null,
        animating: false,
        transitionTimer: null
      }
    },
    watch: {
      categoryDataList(curVal) {

      }
    },
    mounted() {
      this.handleCarousel()
    },
    methods: {
      /**
       * @description 自动轮播
       */
      handleCarousel() {
        this.$nextTick(() => {
          this.carouselTimer = setInterval(() => {
            this.move()
          }, 2000)
        })
      },
      move() {
        let swiper = this.$refs.swiper
        this.activeChartIndex++
        swiper.style.transform = `translate3d(-${this.activeChartIndex * 100}%, 0, 0)`
        swiper.style.transition = 'transform 1s'
        if (this.activeChartIndex === this.categoryDataList.length) {
          this.activeChartIndex = 0
          this.animating = true
          clearTimeout(this.transitionTimer)
          this.transitionTimer = setTimeout(() => {
            swiper.style.transform = 'translate3d(0%, 0, 0)'
            swiper.style.transition = ''
            this.animating = false
          }, 1000)
        }
      },
      // 鼠标移上去停止滚动
      mouseHover() {
        clearInterval(this.carouselTimer)
        this.carouselTimer = null;
      },
      // 鼠标移出后继续滚动
      mouseOut() {
        this.carouselTimer = setInterval(() => {
          this.move()
        }, 2000)
      },
      // 当点击切换的时候的操作
      changeActiveIndex(index) {
        let swiper = this.$refs.swiper
        let interval = 0
        if (this.animating) {
          clearTimeout(this.transitionTimer)
          this.transitionTimer = null
          swiper.style.transform = 'translate3d(-300%, 0, 0)'
          swiper.style.transition = ''
          setTimeout(() => {
            swiper.style.transform = 'translate3d(0%, 0, 0)'
            swiper.style.transition = ''
          }, 0)
          this.animating = false
          interval = 50
        }
        setTimeout(() => {
          clearInterval(this.carouselTimer)
          this.carouselTimer = null;
          this.activeChartIndex = index
          swiper.style.transform = `translate3d(-${this.activeChartIndex * 100}%, 0, 0)`
          swiper.style.transition = 'transform 0.5s'
          this.carouselTimer = setInterval(() => {
            this.move()
          }, 2000)
        }, interval)
      }
    }
  }
</script>

<style scoped lang="less">
    .chart-out-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      .chart-wrapper {
        display: -webkit-box;
        width: 100%;
        height: 100%;
        .chart-size {
          width: 100%;
          height: 100%;
        }
      }
    }

</style>
<template>
    <div class="chart-out-w