0

我正在尝试将数据挂钩到顶点图表

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

我有一个数据数组，但是要绘制图表，我需要将其拆分为 3 个不同的数组来绘制图表，但我不知道如何使用 JS

我从 api 得到一个这样的数组

dataOverview = [
    {
        "id": 1,
        "successfullySyngranized": 1,
        "unsuccessfullySynchronized": 5,
        "timeStamp": "2020-11-01T00:00:00"
    },
    {
        "id": 2,
        "successfullySyngranized": 2,
        "unsuccessfullySynchronized": 4,
        "timeStamp": "2020-11-02T00:00:00"
    },
    {
        "id": 3,
        "successfullySyngranized": 3,
        "unsuccessfullySynchronized": 3,
        "timeStamp": "2020-11-03T00:00:00"
    },
    {
        "id": 4,
        "successfullySyngranized": 4,
        "unsuccessfullySynchronized": 2,
        "timeStamp": "2020-11-04T00:00:00"
    },
    {
        "id": 5,
        "successfullySyngranized": 5,
        "unsuccessfullySynchronized": 1,
        "timeStamp": "2020-11-05T00:00:00"
    }];

结果，我需要得到这样的数组

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 } };
    })

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

图片

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

4

6 回答 6

2

这很简单，您只需使用.map

var series1 = dataOverview.map(x => x.series1);
var series2 = dataOverview.map(x => x.series2);
var categories  = dataOverview.map(x => x.timestamp);
于 2020-11-11T09:31:11.640 回答
1

使用地图：

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);
于 2020-11-11T09:35:21.390 回答
1

假设它dataOverview被定义为数据属性，如：

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

seriesandchartOptions应定义为计算属性，如下所示：

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 } }
于 2020-11-11T09:51:12.200 回答
1

使用数组的map方法。

const dataOverview = [{
    id: 1,
    series1: 31,
    series2: 11,
    timestamp: "2018-09-19T00:00:00.000Z"
  },
  {
    id: 2,
    series1: 40,
    series2: 32,
    timestamp: "2018-09-19T03:30:00.000Z"
  },
  {
    id: 3,
    series1: 28,
    series2: 45,
    timestamp: "2018-09-19T06:30:00.000Z"
  },
  {
    id: 4,
    series1: 51,
    series2: 32,
    timestamp: "2018-09-19T09:30:00.000Z"
  },
  {
    id: 5,
    series1: 42,
    series2: 34,
    timestamp: "2018-09-19T11:30:00.000Z"
  }
];

var series1 = dataOverview.map(({ series1 }) => series1);
var series2 = dataOverview.map(({ series2 }) => series2);
var timeStamp = dataOverview.map(({ timestamp }) => timestamp);

console.log(series1, series2, timeStamp);

于 2020-11-11T09:32:15.103 回答
1 
var series = [
   {
      name: "series1",
      data: dataOverview.map(({series1}) => series1)
   },
   {
      name: "series2",
      data: dataOverview.map(({series2}) => series2)
   }
]

var timeStamp = dataOverview.map(({timestamp}) => timestamp);
于 2020-11-11T09:32:40.087 回答
1

遍历数组并收集数据。上）

const dataOverview = [{
    id: 1,
    series1: 31,
    series2: 11,
    timestamp: "2018-09-19T00:00:00.000Z"
  },
  {
    id: 2,
    series1: 40,
    series2: 32,
    timestamp: "2018-09-19T03:30:00.000Z"
  },
  {
    id: 3,
    series1: 28,
    series2: 45,
    timestamp: "2018-09-19T06:30:00.000Z"
  },
  {
    id: 4,
    series1: 51,
    series2: 32,
    timestamp: "2018-09-19T09:30:00.000Z"
  },
  {
    id: 5,
    series1: 42,
    series2: 34,
    timestamp: "2018-09-19T11:30:00.000Z"
  }
];


const collect = (data) =>{
  const series1 = []
  const series2 = []
  const timestamp = []
  data.forEach(item => {
    series1.push(item.series1)
    series2.push(item.series2)
    timestamp.push(item.timestamp)
  })
  return {series1, series2, timestamp}
}

console.log(collect(dataOverview));

于 2020-11-11T09:34:11.703 回答