Vue.js Apex甜甜圈图表-无法获取要更新的标签

我试图让Apex图表（在Vue.js中）也更新它们的标签。 我使用以下示例作为基础：

我做了一个非常基本的图表来说明这个问题。它的开头有数据项和3个标签。 更新按钮连接到更新事件。 单击它时，数据会更改，但标签不会更改。 尝试了两种方法-直接设置：

this.chartOptions.labels = [] ...

并使用vue机制：

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

但他们似乎都没有改变标签

这是它的密码笔：

{{updated}}
更新
从“vue-apexcharts”导入VueAppExCharts；
导出默认值{
名称：“图表”，
组成部分：{
apexcharts:VueAppExcharts
},
数据：函数（）{
返回{
更新：“未更新”，
图表选项：{
图表：{
id:“基本甜甜圈”
},
标签：[“a”、“b”、“c”]
},
系列：[30,40,45]
};
},
方法：{
变更图（）{
this.series=[1,2,3]；
this.chartOptions.labels=[“d”、“e”、“f”]；
this.$set（this.chartOptions，“labels”、[“d”、“e”、“f”]）；
本.$套（本“更新”、“更新”）；
}
}
};

---

我想我对Apex饼图/油炸圈饼图的工作原理缺乏了解，但我似乎在文档中也找不到这一点。

关于如何更新图表的文档在这里：

要更新标签，必须将其添加到方法中：

  this.chartOptions = {
     labels: ["d", "e", "f"]
  };

---

经过一些尝试和错误（因为我找不到正确的方法以Vue样式正确执行），下面是我如何更新标签的：

更新标签，请拨打：

  ApexCharts.exec('chartId', "updateOptions", {
    labels: labels,
    series: series
  });

在Vue中，您似乎仍然需要“回退”到ApexCharts的普通JS方法，而不是采用被动的方式

我将等待，看看是否有评论支持我的做法，如果有，将此标记为答案

---

有趣的是，该系列似乎是通过直接更新数组来更新的，而标签则不是。

更新

chartOptions

应该会导致更新

这是我刚刚测试的完整的工作代码，它工作得很好

更新标签
不幸的是，这（以及我能想到的任何“反应性”变化）似乎都不起作用。我更新了沙盒来演示这个+更新系列，因为这正是我所需要的。看起来你的方法更好。如果您同时更新了系列和标签，我已经更新了答案，以说明更有效的方法。否则，更新chartOptions中的系列将导致2次渲染。
  ApexCharts.exec('chartId', "updateOptions", {
    labels: labels,
    series: series
  });