Vue按键将项目分组，然后在一张图表中绘制相似的键

Question

我有一个具有以下结构的对象；

{
  SensorA: [
    { id: 122, valueA: 345, "x-axis": 123344 },
    { id: 123, valueA: 125, "x-axis": 123344 },
    { id: 123, valueA: 185, "x-axis": 123344 },
    { id: 121, valueA: 95, "x-axis": 121344 },
    { id: 121, valueA: 125, "x-axis": 123144 }
  ],
  SensorB: [
    { id: 222, valueB: 785, "x-axis": 122344 },
    { id: 223, valueB: 485, "x-axis": 123394 },
    { id: 221, valueB: 432, "x-axis": 123344 }
  ],
  SensorN: [
    { id: 782, valueN: 295, "x-axis": 123344 },
    { id: 786, valueN: 895, "x-axis": 133344 },
    { id: 782, valueN: 755, "x-axis": 122245 },
    { id: 786, valueN: 295, "x-axis": 128844 }
  ]
}

每个数组键都有对象，每个键都有相似的对象结构，例如sensorB具有valueB，依此类推。我想制作一个具有类似按键图表的动态卡，基本上是具有类似传感器的多线图表的卡片。我知道它是如何发生的，但我不知道如何构建代码和html。请任何人在这里帮助我 下图显示了预期的结果

Answer 1

对于任何遇到此类问题的人，我首先将数组分组为对象，例如我在问题中发布的方式，然后获取键和值。因为每个键都被索引为值，所以我在v-for中循环浏览键，然后将值索引作为该键传递给该键作为prop迭代的组件

UpdateEndpoint