如何在v-dialog模态框中渲染ApexCharts堆叠柱状图并解决二次打开报错问题

这个问题是堆叠柱状图的特有场景，不属于代码逻辑错误，是ApexCharts内部渲染机制和Vuetify弹窗显隐逻辑的冲突导致的：

• 堆叠柱状图渲染时需要提前计算每一段堆叠条的坐标偏移量，当v-dialog关闭时，弹窗容器被设置为display: none，ApexCharts无法获取容器的真实尺寸，第二次渲染时复用了已经失效的坐标缓存，就会出现读取x属性不存在的错误。
• 非堆叠模式、热力图不需要计算堆叠偏移量，所以不会触发这个问题。

可按以下优先级尝试修复：

方案1：给apexchart组件绑定唯一key，强制每次弹窗打开时销毁重建实例 #

修改template部分，给apexchart标签加key属性，每次组件挂载时更新key值：

<template>
    <div v-if="loaded">
        <apexchart
            :key="chartKey"
            width="100%"
            :height="height"
            :options="chartOptions"
            :series="chartData"
        ></apexchart>
    </div>
</template>

然后在data里新增chartKey字段，mounted的时候更新：

data() {
    return {
        loaded: false,
        chartData: [],
        chartOptions: {},
        chartKey: 0
    }
},
async mounted() {
    await this.$nextTick()
    this.chartKey += 1 // 每次挂载更新key，强制重建组件
    this.chartData = this.data
    this.chartOptions = this.buildChartOptions()
    this.loaded = true
}

方案2：禁用v-dialog的销毁逻辑，改成用v-show控制内部组件显隐 #

如果弹窗内容不会频繁变化，可以给v-dialog添加persistent属性，同时把内部组件的显隐控制改成v-show，避免组件频繁销毁重建：

<!-- 父组件调用v-dialog的地方 -->
<v-dialog v-model="dialogVisible" persistent>
    <StackedBar :data="xxx" :labels="xxx" :height="xxx" v-show="dialogVisible" />
</v-dialog>

方案3：显式调用ApexCharts的销毁方法，在组件卸载前清理缓存 #

给组件添加beforeDestroy钩子，手动销毁图表实例：

<!-- 首先给apexchart加ref属性 -->
<apexchart ref="apexChart" ... ></apexchart>

// 新增钩子
beforeDestroy() {
    if (this.$refs.apexChart) {
        this.$refs.apexChart.destroy()
    }
}

优先尝试方案1即可解决绝大多数同类场景问题。

内容的提问来源于stack exchange，提问作者Nick M