vue中div根据v-for的扁平化数据faultyEquipmentL:[ {name:'1号线A相主变压器',time:'2023年06月26日',state:'正常',model:'ABCD-22',voltageLevel:'500KV',type:'T', infor:{d:[{data:0.7}]} }, {name:'1号线B相主变压器',time:'2023年06月26日',state:'正常',model:'ABCD-22',voltageLevel:'500KV',type:'T', infor:{d:[{data:0.7}]} }, {name:'1号线C相主变压器',time:'2023年06月26日',state:'正常',model:'ABCD-22',voltageLevel:'500KV',type:'T', infor:{d:[{data:0.7}]} }, ],动态生成antv的图表
时间: 2023-12-25 08:02:40 浏览: 74
利用Vue的v-for和v-bind实现列表颜色切换
要根据v-for的扁平化数据动态生成AntV图表,你可以按照以下方式进行:
首先,确保已经安装了AntV G2Plot库。
在Vue组件中,引入G2Plot库和需要的样式文件:
```vue
<template>
<div>
<div v-for="(equipment, index) in faultyEquipmentL" :key="index">
<div ref="chartContainer" :id="'chart' + index"></div>
</div>
</div>
</template>
<script>
import { createApp } from 'vue';
import { Line } from '@antv/g2plot';
export default {
data() {
return {
faultyEquipmentL: [
{
name: '1号线A相主变压器',
time: '2023年06月26日',
state: '正常',
model: 'ABCD-22',
voltageLevel: '500KV',
type: 'T',
infor: { d: [{ data: 0.7 }] }
},
{
name: '1号线B相主变压器',
time: '2023年06月26日',
state: '正常',
model: 'ABCD-22',
voltageLevel: '500KV',
type: 'T',
infor: { d: [{ data: 0.7 }] }
},
{
name: '1号线C相主变压器',
time: '2023年06月26日',
state: '正常',
model: 'ABCD-22',
voltageLevel: '500KV',
type: 'T',
infor: { d: [{ data: 0.7 }] }
}
] // 假设这是扁平化的数据
};
},
mounted() {
this.faultyEquipmentL.forEach((equipment, index) => {
const chartData = equipment.infor.d.map((item) => item.data);
const chart = new Line({
container: `chart${index}`,
width: 400,
height: 300,
data: chartData.map((data, idx) => ({ x: idx, y: data })),
xField: 'x',
yField: 'y'
});
chart.render();
});
}
};
</script>
<style>
/* 样式可以根据需要进行调整 */
#chartContainer {
margin-bottom: 20px;
}
</style>
```
在上述示例中,我们假设`faultyEquipmentL`是一个包含扁平化数据的数组。在Vue的v-for指令中,我们遍历`faultyEquipmentL`数组,并为每个数据项生成一个图表容器。图表容器使用`ref`属性和动态的`id`属性来标识不同的图表。在`mounted`钩子中,我们遍历`faultyEquipmentL`数组,提取出需要的图表数据,并使用Line图表组件创建并渲染图表。
请确保在组件中按需引入G2Plot库的其他图表组件,并根据具体需求进行相应的配置和样式调整。
阅读全文