vue2里面 v-for循环渲染多个E charts柱状图（以6个为例）

如果你需要为6个不同的柱状图配置6组不同的数据，你可以在Vue组件中定义一个数组来存储每组图表的数据和配置。下面是一个示例，展示了如何为每组数据创建一个柱状图：

<template>
  <div>
    <div v-for="(chartData, index) in chartsData" :key="index" class="chart-container">
      <div ref="chartRef" class="chart"></div>
    </div>
  </div>
</template>

<script>
// 引入 ECharts 主模块
import * as echarts from 'echarts';

export default {
  data() {
    return {
      // 存储每组图表的数据和配置
      chartsData: [
        {
          title: '图表1',
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
          yAxis: [120, 200, 150, 80, 70, 110, 130]
        },
        // 其他5组数据...
        // 确保每组数据都有title, xAxis, 和 yAxis
      ]
    };
  },
  mounted() {
    this.initCharts();
  },
  methods: {
    initCharts() {
      this.chartsData.forEach((chartData, index) => {
        const myChart = echarts.init(this.$refs['chartRef'][index]);
        const options = {
          title: { text: chartData.title },
          tooltip: {},
          xAxis: {
            data: chartData.xAxis,
            type: 'category'
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: chartData.yAxis,
            type: 'bar'
          }]
        };
        myChart.setOption(options);
      });
    }
  }
};
</script>

<style>
.chart-container {
  width: 500px;
  height: 400px;
  margin-bottom: 20px;
}
.chart {
  width: 100%;
  height: 100%;
}
</style>

在这个示例中：

• chartsData是一个数组，包含了6个对象，每个对象代表一个柱状图的标题、X轴数据和Y轴数据。
• 在mounted钩子函数中，调用initCharts方法来初始化所有的图表。
• initCharts方法遍历chartsData数组，为每个图表实例化ECharts，并设置对应的配置项。
• 每个图表的标题、X轴数据和Y轴数据都是从chartsData数组中对应的对象中获取的。

请根据你的实际数据和需求调整chartsData数组中的数据。这个示例提供了一个灵活的方式来为多个图表配置不同的数据和配置项。