vue根据后台接口返回数据循环生成echarts

可以使用v-for指令和axios来循环生成echarts图表。

首先，在<template>中，使用v-for指令来循环生成多个echarts图表，将每个图表的数据绑定到一个数组中，例如：

<template>
  <div>
    <div v-for="data in echartsData" :key="data.id">
      <div :id="'chart-' + data.id" style="width: 400px; height: 400px;"></div>
    </div>
  </div>
</template>

然后，在<script>中，使用axios来获取接口数据，并将数据保存到echartsData数组中，例如：

<script>
import axios from 'axios';

export default {
  data() {
    return {
      echartsData: [],
    };
  },
  mounted() {
    axios.get('/api/echartsData').then(response => {
      this.echartsData = response.data;
      this.renderEcharts();
    }).catch(error => {
      console.error(error);
    });
  },
  methods: {
    renderEcharts() {
      this.echartsData.forEach(data => {
        const chartId = 'chart-' + data.id;
        const chart = echarts.init(document.getElementById(chartId));
        chart.setOption(data.option);
      });
    },
  },
};
</script>

这样，每次获取到接口数据后，会循环生成对应的echarts图表，并渲染到页面中。

请注意，上述代码中的'/api/echartsData'是一个示例接口地址，你需要根据实际情况修改为你的接口地址。另外，图表的配置数据需要根据接口返回的数据进行处理，具体方式根据echarts的文档进行配置。