javascript - 无法更新 Apexcharts 组件值

Question

我在 Vue.js 中使用 Apexchart 库来绘制散点图上的数据。我可以使用 Axios POST 我的数据。我可以通过执行 console.log() 来查看我收到的数据，从而看到数据进入浏览器。通过使用 Apexcharts 属性的 updateChart() 函数，我对传入数据执行必要的操作。我无法将数据发送到数据数组。您可以找到 Apexcharts 的引用样本 here .

图表.vue

<template>
  <div class="grid ml">
    <div id="main">
      <h1 class="header ml">SEARCH VOLUME</h1>
      <apexcharts
        id="chart"
        height="300"
        type="bar"
        :options="chartOptions"
        :series="series"
      ></apexcharts>
      <button @click="updateChart">Update!</button>
    </div>
  </div>
</template>

<script>
import VueApexCharts from "vue-apexcharts";
import axios from "axios";

export default {
  data: function() {
    return {
      chartOptions: {
        chart: {
          id: "vuechart-example",
        },
        colors: ["#9999CC"],
        dataLabels: {
          enabled: false,
          style: {
            colors: ["#9999CC"],
          },
        },
        noData: {
          text: "Loading...",
        },
        title: {
          text: "lorem ipsum dolar sit amet",
          align: "left",
          margin: 10,
          offsetX: 0,
          offsetY: 0,
          floating: false,
          style: {
            fontSize: "14px",
            fontWeight: "regular",
            fontFamily: "Barlow, sans-serif",
            color: "#6B6B99",
          },
        },
        xaxis: {
          labels: {
            style: {
              colors: "#6B6B99",
              fontSize: "12px",
              fontFamily: "Barlow, sans-serif",
              fontWeight: 400,
              cssClass: "apexcharts-xaxis-label",
            },
          },
          categories: [
            "JAN",
            "FEB",
            "MAR",
            "APR",
            "MAY",
            "JUN",
            "JUL",
            "AUG",
            "SEP",
            "OCT",
            "NOV",
            "DEC",
          ],
        },
        yaxis: {
          labels: {
            style: {
              colors: "#6B6B99",
              fontSize: "12px",
              fontFamily: "Barlow, sans-serif",
              fontWeight: 400,
              cssClass: "apexcharts-xaxis-label",
            },
          },
        },
      },
      series: [
        {
          name: "Company",
          data: [1,2,3,4],
        },
      ],
    };
  },
  methods: {
    updateChart() {
      axios
        .post("http://APIURL", {
          country: "tr",
          lang: "tr",
          keyword: "ankara",
        })
        .then(({ data }) => {
          this.series = [
            {
              data: data,
            },
          ];

          // this.series = data;
          console.log("DATAAA", data);
        })
        .catch((e) => console.log(e));
    },
  },
  components: {
    apexcharts: VueApexCharts,
  },
  beforeMount() {},
};
</script>

<style lang="scss">
#chart {
  display: flex;
  justify-content: center;
  max-width: 760px;
  padding-left: 8px;
}

.ml {
  font-size: 24px;
}

#main {
  width: 1142px;
  height: 566px;
}
</style>

浏览器控制台屏幕 enter image description here

无法将数据发送到数组的部分

series: [
        {
          name: "Company",
          data: [1,2,3,4],
        },
      ],

Answer 1

在文档示例中，数据是值数组，但您的 api 返回对象数组。尝试将 updateChart 方法更改为仅使用值，方法是将 api 数组映射到其 volume 值:

.then(({ data }) => {
  this.series = [
    {
      data: data.map(o => o.volume),
    },
  ];
})