无法更新 Apexcharts 组件值

如何解决无法更新 Apexcharts 组件值

我在 Vue.js 中使用 Apexchart 库来绘制散点图上的数据。我可以使用 Axios POST 我的数据。我可以通过执行 console.log() 查看我收到的数据来查看进入浏览器的数据。通过使用 Apexcharts 属性 updateChart() 函数，我对传入的数据执行必要的操作。我无法将数据发送到数据数组。您可以找到 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",fontWeight: 400,cssClass: "apexcharts-xaxis-label",categories: [
            "JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC",],yaxis: {
          labels: {
            style: {
              colors: "#6B6B99",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",

解决方法

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

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

,

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

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