vue.js - Apex 圆环图 - 无法更新标签

Question

我正在尝试让 Apex 图表(在 Vue.js 中)也更新它们的标签。我使用以下示例作为基础:

https://apexcharts.com/vue-chart-demos/pie-charts/update-donut/

我做了一个非常基本的图表来演示这个问题。它的开头有数据项和 3 个标签。更新按钮连接到更新事件。当您单击它时，数据会发生变化，但标签不会。两种都试过了——直接设置:

this.chartOptions.labels = [] ...

同时使用 vue 机制:

this.$set(this.chartOptions, "labels", ["d", "e", "f"]);

虽然他们似乎都没有改变标签。

这是它的代码笔: https://codesandbox.io/s/vue-basic-example-z72rk?fontsize=14&hidenavigation=1&theme=dark

<template>
  <div class="example">
    <label>{{updated}}</label>
    <apexcharts width="300" height="300" type="donut" :options="chartOptions" :series="series"></apexcharts>
    <button v-on:click="changeChart">Update</button>
  </div>
</template>

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

    export default {
      name: "Chart",
      components: {
        apexcharts: VueApexCharts
      },
      data: function() {
        return {
          updated: "Not updated",
          chartOptions: {
            chart: {
              id: "basic-donut"
            },
            labels: ["a", "b", "c"]
          },
          series: [30, 40, 45]
        };
      },
      methods: {
        changeChart() {
          this.series = [1, 2, 3];
          this.chartOptions.labels = ["d", "e", "f"];
          this.$set(this.chartOptions, "labels", ["d", "e", "f"]);
          this.$set(this, "updated", "Updated");
        }
      }
    };
    </script>

我想我缺少对 Apex 饼图/圆环图如何工作的理解，但我似乎也无法在文档中找到它。

Answer 1

更新 chartOptions 应该会导致更新。

这是我刚刚测试过的完整工作代码，它运行良好

<template>
  <div class="app">
    <button @click="updateLabels()">Update Labels</button>

    <apexcharts type="donut" width="280" :options="chartOptions" :series="series"/>
  </div>
</template>

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

export default {
  name: "Chart",
  components: {
    apexcharts: VueApexCharts
  },
  data: function() {
    return {
      series: [44, 55, 41, 17, 15],
      chartOptions: {
        labels: ["a", "b", "c", "d", "e"]
      }
    };
  },
  methods: {
    updateLabels: function() {
      this.series= [Math.random() * 10, Math.random() * 10]
      this.chartOptions = {
        labels: [Math.random() * 10, Math.random() * 10],
      };
    }
  }
};
</script>

这是 codesandbox 的链接