当我使用 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
任何人都知道如何解决这个问题?
最佳答案
因此,感谢@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>
关于vue.js - Vue 中的 ApexCharts 更改选项不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/69581842/