Vue Element UI Carousel: 轮播 Echarts 图表

<template>
  <el-carousel :interval="5000">
    <div v-for="(chart, index) in charts" :key="index" style="width: 100%; height: 300px;">
      <div ref="chartContainer" :id="'chartContainer'+index" style="width: 100%; height: 100%;"></div>
    </div>
  </el-carousel>
</template>
<script>
import echarts from 'echarts';

export default {
  data() {
    return {
      charts: [], // 存储echarts实例的数组
      chartData: [ // 图表数据
        { name: 'chart1', data: [1, 2, 3, 4, 5] },
        { name: 'chart2', data: [5, 4, 3, 2, 1] },
        { name: 'chart3', data: [2, 4, 6, 8, 10] }
      ],
      currentIndex: 0 // 当前显示的图表索引
    };
  },
  created() {
    // 初始化echarts实例并存储到数组中
    this.chartData.forEach((data, index) => {
      const chart = echarts.init(this.$refs['chartContainer'][index]);
      chart.setOption({
        xAxis: {
          type: 'category',
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {
          type: 'value'
        },
        series: [{
          data: data.data,
          type: 'line'
        }]
      });
      this.charts.push(chart);
    });
  },
  mounted() {
    // 定时切换图表显示
    setInterval(() => {
      this.currentIndex = (this.currentIndex + 1) % this.charts.length;
      const chart = this.charts[this.currentIndex];
      chart.setOption({
        series: [{
          data: this.chartData[this.currentIndex].data
        }]
      });
      this.$nextTick(() => {
        chart.resize();
      });
    }, 5000);
  },
  beforeDestroy() {
    // 清除定时器并销毁echarts实例
    clearInterval(this.timer);
    this.charts.forEach(chart => {
      chart.dispose();
    });
  }
};
</script>