使用 Vue 3 渲染两次 Apex 图表的问题

Question

我将 Apex Charts 与 Vue 3 一起使用。当图表渲染（绘制）时，它会渲染两次。奇怪的是，当我调整大小或移动浏览器窗口时，第二个图表就会从 DOM 中删除。我还仔细检查了我的 Vue 组件，以确保我没有两次导入此图表组件。

<template>

<apexchart
  width="500"
  height="400"
  type="bar"
  :options="chartOptions"
  :series="series">
</apexchart>

</template>

<script>

import VueApexCharts from "vue3-apexcharts";

export default {
    name: 'ChartExample',
    components: {
        apexchart: VueApexCharts
    },
    data() {
        return {
            chartOptions: {
                chart: {
                    id: "vuechart-example",
                },
                xaxis: {
                    // categories loaded here
                },
            },
            series: [
                // data loaded here
            ],
        };
    },
    mounted() {
        this.series = [
            {
            name: 'precip',
            data: [1,2,3,4,5],
            }
        ];
        this.chartOptions.xaxis = {
            categories: [1,2,3,4,5],
        }
    }
}

</script>

我在已安装的挂钩中传递数据，因为我计划传递动态数据。当我直接在图表选项中添加静态数据（即不从安装的挂钩传入）时，图表将渲染一次并正常工作。任何帮助，将不胜感激。

Answer 1

经过一些研究后，我发现这是 Vue3 顶点图表中的一个已知错误。

https://github.com/apexcharts/vue3-apexcharts/issues/3

对我有用的唯一解决方案是这个。

mounted() {
    this.$nextTick(() => {
        window.dispatchEvent(new Event('resize'));
    });
}