vue关于echarts后端返回格式取值方法

在vue中，接口返回如下数据：

data: {充电桩: [0, 0, 78], 红外摄像头: [0, 0, 0], 火焰探测器: [0, 1, 0], 烟雾传感器: [0, 1, 1], 限流保护器: [0, 0, 1]}，

其中数组里第一个值应该放在data1，第二个放在data2，第三个放在data3，应该怎么做？

  garageHistogram() {//柱状图查询let param = {carrierId: this.project,indexCode: this.paramsForm.indexCode,start: this.paramsForm.startTime,end: this.paramsForm.endTime,granularity: this.paramsForm.granularity,};this.chartLoading = true;this.API.garageHistogram(param).then((res) => {this.chartLoading = false;if (res.code == 200) {let xAxis = [];let data1 = [];let data2 = [];let data3 = [];for (let i in res.data) {xAxis.push(i);}//取值部分xAxis.forEach((item, index) => {res.data[item].map((item_, index_) => {if (index_ == 0) {data1.push(item_);}if (index_ == 1) {data2.push(item_);}if (index_ == 2) {data3.push(item_);}});          });// Object.keys(res.data).forEach(key => {//   [data1, data2, data3] = res.data[key];//   console.log(key, data1, data2, data3);// });this.barChartOpt.nameList = xAxis;this.barChartOpt.data = [{name: "报警",list: data1,},{name: "故障",list: data2,},{name: "离线",list: data3,},];}});},

 一、

可以使用解构赋值（destructuring assignment）将每个属性的值分配给不同的变量。例如，以下代码将“充电桩”数组的第一个元素分配给变量data1，第二个元素分配给变量data2，第三个元素分配给变量data3：

const { 充电桩: [data1, data2, data3], 红外摄像头: [...], 火焰探测器: [...], 烟雾传感器: [...], 限流保护器: [...] } = data;

这里，我们使用了对象解构赋值的语法，用花括号括起属性名，冒号后面是新的变量名，如果属性名和变量名相同，可以省略冒号。

注意，由于“充电桩”是一个中文字符串，所以我们需要使用冒号并将其包装在引号中，以便Vue不会把它解析为一个计算属性。

如果不确定每个属性名，可以使用Object.keys()获取对象的所有属性名，然后使用Array.reduce()或forEach()循环遍历它们并将它们解构到变量中。

Object.keys(data).forEach(key => {const [data1, data2, data3] = data[key];console.log(key, data1, data2, data3);
});

二、

在ECharts柱状图中使用时，可以使用Array.map()函数将原始数据映射为一个新数组，该数组仅包含每个属性的值。例如，以下代码将原始数据映射为一个数组，该数组包含每个属性的第一个元素：

const data1 = Object.keys(data).map(key => data[key][0]);

这里，我们使用Object.keys()获取对象的所有属性名，并使用Array.map()循环遍历它们。对于每个属性，我们获取其对应的数组，并将其第一个元素添加到一个新数组中。这将返回一个只包含每个属性的第一个元素的新数组。

您可以使用相同的方法，将第二个和第三个元素映射到另外两个数组中：

const data2 = Object.keys(data).map(key => data[key][1]);
const data3 = Object.keys(data).map(key => data[key][2]);

三、

这两种方法的作用是相同的，它们都可以从对象中提取数据并将其分别存储在三个不同的数组中。但是，它们的实现方式略有不同。

方法一使用了两个循环来遍历对象的属性和属性值，其中第二个循环使用了Array.map()来遍历属性对应的值的每个元素，并将每个元素添加到相应的数组中。这种方法的优点是它比较灵活，可以在处理每个元素时执行任何必要的操作，例如添加特定的前缀或后缀。但是，这种方法需要显式地检查每个元素的索引，以便将其正确地添加到相应的数组中。

方法二使用了单个循环来遍历对象的属性，并将每个属性对应的值解构为三个变量。这种方法的优点是它比较简洁，可以在一行代码中完成整个过程。但是，这种方法需要每个属性对应的值必须是一个数组，而且需要事先知道数组中元素的顺序。如果数组中的元素顺序发生变化，该方法就会失效。

因此，这两种方法的选择取决于您的具体情况和个人偏好。如果您需要对每个元素执行更多的操作，并且需要更大的灵活性，请使用方法一。如果您希望保持代码简洁，并且对数组元素的顺序有充分的了解，请使用方法二。

这两种方法有什么不同，方法一：  xAxis.forEach((item, index) => {res.data[item].map((item_, index_) => {if (index_ == 0) {data1.push(item_);}if (index_ == 1) {data2.push(item_);}if (index_ == 2) {data3.push(item_);}});          });
方法二： Object.keys(res.data).forEach(key => {[data1, data2, data3] = res.data[key];console.log(key, data1, data2, data3);
});

四、关于Object.keys

Object.keys()是一个内置函数，它返回一个对象的所有可枚举属性的属性名（键）组成的数组。可以用于枚举对象自身的属性，不会枚举对象原型链上的属性。

例如，如果有一个包含如下属性的对象：

const obj = {name: 'Tom',age: 25,gender: 'male'
};

那么使用Object.keys()将返回一个由属性名组成的数组：

const keys = Object.keys(obj); // ['name', 'age', 'gender']

您可以在循环中使用该数组，以便对每个属性执行相同的操作，例如：

keys.forEach(key => {console.log(key + ': ' + obj[key]);
});

这将输出：

name: Tom
age: 25
gender: male

请注意，Object.keys()返回的属性名数组的顺序与属性在对象中定义的顺序不一定相同。