vue.js - Vue 中的 ApexCharts 更改选项不起作用

Question

当我使用 v-if 在 ApexChart 的两个不同图表(都有不同的系列和选项)之间切换时设置了不同图表选项的情况下，存在某种错误会使更改后的图表无法正确呈现。

  <apexchart v-if="switch1" :options="chartOptions1" :series="series1"></apexchart>
  <apexchart v-else :options="chartOptions2" :series="series2"></apexchart>

例如，我的图表选项有填充集和没有填充集。当我在它们之间切换时，两者都有填充(没有填充选项的那个)。
这是此行为的示例:
https://codesandbox.io/s/line-with-upper-and-lower-band-apexchart-slhbs?file=/src/components/ChartBasic.vue
任何人都知道如何解决这个问题？

Answer 1

因此，感谢@pkorhone 的建议，我设法找到了解决此问题的当前解决方法是使用 v-show而不是 v-if并稍微更改另一个图表的高度，以便它以某种方式强制图表重新呈现:

<apexchart v-show="switch1"  height="400" :options="chartOptionsBands" :series="seriesBands"></apexchart>
<apexchart v-show="!switch1" height="401" :options="chartOptions" :series="series"></apexchart>