Vue中使用El-Carousel实现Echarts图表轮播并动态更新X轴数据

<template>
  <el-carousel @change="handleCarouselChange">
    <el-carousel-item v-for="(item, index) in chartData" :key="index">
      <div ref="chartContainer" :id="'chart'+index" class="chart-container"></div>
    </el-carousel-item>
  </el-carousel>
</template>
<script>
import * as echarts from 'echarts';

export default {
  data() {
    return {
      chartData: [
        {xAxisData: ['Jan', 'Feb', 'Mar', 'Apr', 'May'], seriesData: [120, 200, 150, 80, 70]},
        {xAxisData: ['Feb', 'Mar', 'Apr', 'May', 'Jun'], seriesData: [200, 150, 80, 70, 90]},
        {xAxisData: ['Mar', 'Apr', 'May', 'Jun', 'Jul'], seriesData: [150, 80, 70, 90, 120]},
        {xAxisData: ['Apr', 'May', 'Jun', 'Jul', 'Aug'], seriesData: [80, 70, 90, 120, 200]},
      ],
      currentIndex: 0,
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      this.chartData.forEach((item, index) => {
        const chart = echarts.init(this.$refs['chartContainer'][index]);
        chart.setOption({
          xAxis: {
            type: 'category',
            data: item.xAxisData,
          },
          series: [{
            type: 'line',
            data: item.seriesData,
          }]
        });
      });
    },
    handleCarouselChange(index) {
      this.currentIndex = index;
    },
  },
  computed: {
    currentXAxisData() {
      return this.chartData[this.currentIndex].xAxisData;
    },
  },
  watch: {
    currentXAxisData() {
      this.chartData.forEach((item, index) => {
        const chart = echarts.init(this.$refs['chartContainer'][index]);
        chart.setOption({
          xAxis: {
            type: 'category',
            data: item.xAxisData,
          },
        });
      });
    },
  },
};
</script>
<style scoped>
.chart-container {
  height: 300px;
}
</style>
<p>在这个示例中，我们使用了一个chartData数组来存储多个Echarts图表的数据，每个数据对象包括一个xAxisData属性和一个seriesData属性，分别用于存储X轴和系列数据。</p>
<p>在mounted钩子函数中，我们调用了initCharts方法来初始化所有的Echarts图表。</p>
<p>在handleCarouselChange方法中，我们记录了当前轮播的索引值，触发了computed属性currentXAxisData的更新。</p>
<p>在currentXAxisData计算属性中，我们根据currentIndex来获取当前轮播的Echarts图表的X轴数据。</p>
<p>在watch监听器中，我们监听了currentXAxisData的变化，每次变化时都重新设置所有Echarts图表的X轴数据。</p>
<p>这样，我们就实现了El-Carousel作用于Echarts图表轮播并更新X轴的效果。</p>