Javascript 将数据数组拆分为单独的数组

我正试图将数据连接到apexchart图表中

<apexchart
    type="area"
    height="350"
    :options="chartOptions"
    :series="series">
</apexchart>

因此，我需要得到这样的数组

var series = [];
var timeStamp = [];

并将它们插入到图表设置中

data() {
    return {
        dataOverview: [],
        series: [] // insert series objects,
        chartOptions: {
            //...
            // some options
            //...
            xaxis: {
                type: "datetime",
                categories: [  // insert timeStamp array
                    // "2020-11-01T00:00:00",
                    // "2020-11-02T00:00:00",
                    // "2020-11-03T00:00:00",
                    // "2020-11-04T00:00:00",
                    // "2020-11-05T00:00:00"
                ]  
            },
            //...
            // some options
            //...
        }
    }
}

beforeMount() {   
   this.onGetDataOverview();
},
methods: {
onGetDataOverview() {
  this.$axios
    .$get(
      this.$store.getters["store/getApiPath"] + "/Analyst/GetOverviewData"
    )
    .then(response => {
      this.dataOverview = response;
      const seriesOne = this.dataOverview.map(
        ({ successfullySyngranized }) => successfullySyngranized
      );
      const seriesTwo = this.dataOverview.map(
        ({ unsuccessfullySynchronized }) => unsuccessfullySynchronized
      );

      const series2 = [
        { name: "series1", data: seriesOne },
        { name: "series2", data: seriesTwo }
      ];
      this.series = series2;
          
      //Here I am trying to insert time data, however the graph does not start
      
        let xaxis = {
        ...this.chartOptions.xaxis,
        categories: this.dataOverview.map(({ timeStamp }) => timeStamp)
      };
      this.chartOptions = { ...this.chartOptions, ...{ xaxis: xaxis } };
    })

当插入时间数据时-不构建图形，但是如果我在变量声明中明确指出时间-则构建图形

---

但我还需要进行跟踪，以便在收到新数据时图形移动，即使用computed

这非常简单，您只需使用

.map

var series1 = dataOverview.map(x => x.series1);
var series2 = dataOverview.map(x => x.series2);
var categories  = dataOverview.map(x => x.timestamp);

使用数组的方法

const dataOverview=[{
id:1，
系列1:31，
系列2:11，
时间戳：“2018-09-19T00:00:00.000Z”
},
{
id:2，
系列1:40，
系列2:32，
时间戳：“2018-09-19T03:30:00.000Z”
},
{
id:3，
系列1:28，
系列2:45，
时间戳：“2018-09-19T06:30:00.000Z”
},
{
id:4，
系列1:51，
系列2:32，
时间戳：“2018-09-19T09:30:00.000Z”
},
{
id:5，
系列1:42，
系列2:34，
时间戳：“2018-09-19T11:30:00.000Z”
}
];
var series1=dataOverview.map（（{series1}）=>series1）；
var series2=dataOverview.map（（{series2}）=>series2）；
var timeStamp=dataOverview.map（（{timeStamp}）=>timeStamp）；
日志（序列1、序列2、时间戳）在数组中迭代一次并收集数据。O（n）


const dataOverview=[{
id:1，
系列1:31，
系列2:11，
时间戳：“2018-09-19T00:00:00.000Z”
},
{
id:2，
系列1:40，
系列2:32，
时间戳：“2018-09-19T03:30:00.000Z”
},
{
id:3，
系列1:28，
系列2:45，
时间戳：“2018-09-19T06:30:00.000Z”
},
{
id:4，
系列1:51，
系列2:32，
时间戳：“2018-09-19T09:30:00.000Z”
},
{
id:5，
系列1:42，
系列2:34，
时间戳：“2018-09-19T11:30:00.000Z”
}
];
const collect=（数据）=>{
常量系列1=[]
常量系列2=[]
常量时间戳=[]
data.forEach（项=>{
系列1.推送（项目系列1）
系列2.推送（项目系列2）
timestamp.push（item.timestamp）
})
返回{series1，series2，timestamp}
}
console.log（collect（dataOverview））使用地图：

const seriesOne = dataOverview.map(el => el.series1);
const seriesTwo = dataOverview.map(el => el.series2);

const series = [
  { name: 'series1', data: seriesOne},
  {name: 'series2', data: seriesTwo}
]

console.log(series);

假设
dataOverview
定义为如下数据属性：

data(){
  return {
     dataOverview:[...]
   }
}


系列
和
图表选项
应定义为计算属性，如下所示：

computed:{
   series(){
     let _series=[
           {
             name:'series1',
             data: this.dataOverview.map(item=>item.series1)
           },
           {
            name:'series2',
             data: this.dataOverview.map(item=>item.series2)
           }
         ]
     return _series;
   },
  chartOptions(){
       return {
            //...
            // some options
            //...
            xaxis: {
                type: "datetime",
                categories: this.dataOverview.map(item=>item.timestamp)
            },
            //...
            // some options
            //...
        }
   }

}

编辑

您在以下方面存在反应性问题：

   this.chartOptions.xaxis.categories = this.dataOverview.map(
        ({ timeStamp }) => timeStamp
     );

应该是：


let xaxis = { ...this.chartOptions.xaxis, categories: this.dataOverview.map(
        ({ timeStamp }) => timeStamp
     ) }
this.chartOptions = { ...this.chartOptions, ...{ xaxis: xaxis } }

   this.chartOptions.xaxis.categories = this.dataOverview.map(
        ({ timeStamp }) => timeStamp
     );


let xaxis = { ...this.chartOptions.xaxis, categories: this.dataOverview.map(
        ({ timeStamp }) => timeStamp
     ) }
this.chartOptions = { ...this.chartOptions, ...{ xaxis: xaxis } }