无法更新 Apexcharts 组件值

Question

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

的参考样本

Chart.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),
    },
  ];
})

Answer 2

@Dan 通过改进你展示的方法，我可以将数据绘制到图表中。

.then(({ data }) => {
     console.log(typeof data);
     this.series = [...this.series, { data: data.map((o) => o.volume) }];
   })
.catch((e) => console.log(e));

无法更新 Apexcharts 组件值

Can't update Apexcharts components value

javascript

vue.js

vue-component

vuejs2

apexcharts