使用 vue 和js循环数组对象，动态赋值ref属性，并且通过ref属性动态渲染多个图表

<template>
  <div>
    <div v-for="(item, index) in data" :ref="'chartContainer' + index" :key="index" style="width: 400px; height: 300px;"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [
        { categories: ['A', 'B', 'C'], values: [1, 2, 3] },
        { categories: ['X', 'Y', 'Z'], values: [4, 5, 6] },
        // 可根据实际情况添加更多数据
      ]
    };
  },
  mounted() {
    this.renderCharts();
  },
  methods: {
    renderCharts() {
      this.data.forEach((item, index) => {
        const chartContainer = this.$refs['chartContainer' + index][0];
        const chart = echarts.init(chartContainer);
        const option = {
          // 设置图表的配置项和数据，这里以柱状图为例
          xAxis: {
            type: 'category',
            data: item.categories
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: item.values,
            type: 'bar'
          }]
        };
        chart.setOption(option);
      });
    }
  }
};
</script>