vue.js - Apex 线面积图未显示在 Vuejs 的页面上

Question

我被困在无法在页面上显示图表的页面上。

为了简化我所做的事情，这里是代码沙箱：我在控制台中看到有关数据的错误，我不确定。

https://codesandbox.io/s/compassionate-snyder-bckoq

我想显示这样的图表（作为示例），但我无法在代码沙箱上显示

请帮忙。

标签： vue.jsvuejs2

Answer 1

系列的格式与 ApexCharts 不一致。您需要转换数据以匹配 ApexChart 格式。

请查看代码和框中的更改。 https://codesandbox.io/s/small-dew-eztod?file=/src/components/HelloWorld.vue

options: {
    // X axis labels
    xaxis: {
        type: 'date',
        categories: ["2021-05-04", "2021-05-05", "2021-05-07"]
    },
},
series: [
    {
        name: "total",
        data: [2, 2, 1],
    },
    {
        name: "pending",
        data: [0, 1, 0],
    },
    {
        name: "approved",
        data: [2, 1, 1],
    },
    {
        name: "rejected",
        data: [0, 0, 0],
    },
],

转换数据以适应 ApexChart

const data = {
  "2021-05-04": {
    total: 2,
    pending: 0,
    approved: 2,
    rejected: 0,
  },
  "2021-05-05": {
    total: 2,
    pending: 1,
    approved: 1,
    rejected: 0,
  },
  "2021-05-07": {
    total: 1,
    pending: 0,
    approved: 1,
    rejected: 0,
  },
};

const xaxis = {
  type: "date",
  categories: Object.keys(data).map((key) => key), // ['2021-05-04', '2021-05-05', '2021-05-07']
};

let statusObj = [];
for (const dataValue of Object.values(data)) { // get the values from keys '2021-05-04', '2021-05-05' ...

  // loop the values, e.g. 1st loop: { total: 2, pending: 0, approved: 2, rejected: 0, }
  for (const [key, value] of Object.entries(dataValue)) {

    // take 'total' as example, find if statusObj already has { name: 'total', data: [x] }, e.g. statusObj = { name: 'total', data: [1] }
    const existingStatusIndex = Object.keys(statusObj).find(
      (sKey) => statusObj[sKey].name === key
    );

    // if yes, return the index of it
    if (existingStatusIndex) {
      // add new data value to existing data object. e.g. { name: 'total', data: [1, 2] }
      statusObj[existingStatusIndex].data.push(value);
      continue;
    }

    // if no, create a new object and add it to statusObj
    statusObj.push({
      name: key,
      data: [value],
    });
  }
}

输出：

xaxis {
  type: 'date',
  categories: [ '2021-05-04', '2021-05-05', '2021-05-07' ]
}
statusObj [
  { name: 'total', data: [ 2, 2, 1 ] },
  { name: 'pending', data: [ 0, 1, 0 ] },
  { name: 'approved', data: [ 2, 1, 1 ] },
  { name: 'rejected', data: [ 0, 0, 0 ] }
]