<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>
使用 vue 和js循环数组对象,动态赋值ref属性,并且通过ref属性动态渲染多个图表
最新推荐文章于 2024-04-01 15:08:54 发布