Apexchart 选项更新在 vue3 下不起作用答案

【问题标题】：Apexchart option updates not working under vue3Apexchart 选项更新在 vue3 下不起作用
【发布时间】：2022-07-29 14:01:15
【问题描述】：

我正在使用 Vue3 下的 Apexcharts 构建多系列折线图，但遇到了图表选项未更新的问题。系列数据按预期更新，但我还没有看到选项更新成功。

我正在使用带有 ref 的组合 api，总体上看起来效果很好。但是一旦通过lineChart.value = achart 分配图表，我所做的任何更改都不会更新图表。例如，选项文件包含colors: ['#FFFF00', '#0000FF']，它是黄色和蓝色的，但是用新颜色更新 ref 不会改变图表上的任何内容。使用 mustache 语法查看数据，我可以看到新的颜色值已更新，但图表中没有。请参阅随附的屏幕截图。

我已按照我能找到的所有指南和帖子进行操作，但仍然没有运气。有谁知道这是否是一个常见问题，或者我是否应该考虑一些特殊的问题？如果这是一个更大的问题，我将致力于创建一个 codepen 项目。
谢谢

更新：添加codesandbox.io project

【问题讨论】：

标签： vuejs3 apexcharts

【解决方案1】：

使用updateOptions insted https://apexcharts.com/docs/methods/#updateOptions

ApexCharts.exec("chartID", "updateOptions", {
        series: [
          {
            data: [1,2,3,2]
          }
        ],
        xaxis: {
          categories: ['a', 'b', 'c','d'],
        },
        colors:['#00ff00']
      })

【讨论】：

我一直在研究它，但作为 Vue3 的新手，我不确定 ApexCharts 变量的来源。我看到它是如何在非反应式环境中创建的，是否有类似的方法可以从 Vue3 中执行此功能？
codepile.net/pile/6m892V1R 我不确定你现在是怎么做的，但这段代码对我有用。注意：updateOptions 在系列变化时会有动画效果
这看起来与我正在使用的 vue3 api 不同，但我会看看我可以将什么翻译到我的项目中。谢谢！

【解决方案2】：

我遇到了同样的问题，因为我使用异步并在几秒钟后等待数据更新，但不更新图表本身，我阅读了文档，它说您需要更新图表选项的整个值。

chartOptions.value.xaxis.categories = [2020, 2021, 2022]

改为

chartOptions.value = { 
 ... charts: {}
     xaxis: {
          ...
         categories: [2022, 2021, 2022]

【讨论】：