echarts封装组件用v-for

你可以使用`v-for`指令配合组件封装来动态生成ECharts图表组件。下面是一个示例，展示如何使用`v-for`循环来创建多个图表组件：

首先，你可以创建一个名为`EChart`的组件，用于封装ECharts图表的渲染和数据传递逻辑。在该组件中，你可以接收一个`chartData`属性，用于传递给ECharts实例的数据。

<template>
  <div ref="chartDom" style="width: 400px; height: 300px;"></div>
</template>

<script>
import echarts from 'echarts';

export default {
  props: {
    chartData: {
      type: Object,
      required: true
    }
  },
  mounted() {
    this.renderChart();
  },
  methods: {
    renderChart() {
      const chartDom = this.$refs.chartDom;
      const myChart = echarts.init(chartDom);
      myChart.setOption(this.chartData);
    }
  }
};
</script>

接下来，在父组件中，你可以通过`v-for`指令循环遍历一个数据数组，并传递每个图表的数据给`EChart`组件。这样就可以动态创建多个图表组件。

<template>
  <div>
    <EChart v-for="(chartData, index) in chartDataArray" :key="index" :chartData="chartData" />
  </div>
</template>

<script>
import EChart from './EChart.vue'; // 导入EChart组件

export default {
  components: {
    EChart
  },
  data() {
    return {
      chartDataArray: [
        { /* 第一个图表的数据 */ },
        { /* 第二个图表的数据 */ },
        // ...
      ]
    };
  }
};
</script>

在上述示例中，通过`v-for`指令循环遍历`chartDataArray`数组中的每个元素，并将每个元素作为`chartData`属性传递给`EChart`组件。这样就能够根据数组中的数据动态生成多个图表组件。