可以使用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的文档进行配置。