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

【问题标题】：Issue with Apex Charts rendering twice with Vue 3使用 Vue 3 渲染两次 Apex 图表的问题
【发布时间】：2022-07-27 14:45:48
【问题描述】：

我正在使用带有 Vue 3 的 Apex 图表。当图表呈现（绘制）时，它会呈现两次。奇怪的是，一旦我调整或移动浏览器窗口，第二个图表就会从 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>

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

【问题讨论】：

标签： vue.js vuejs3 apexcharts

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

nextTick() 上面的解决方案是可行的，但它不可行，而且是一个糟糕的解决方案。

我和我的团队成员实施了一个比nextTick() 更好的解决方案。

只需向您的组件添加一个关键属性“:key='Series.length'”，即

      `<chart
          width="100%"
          :options="GraphOptions"
          :series="Series.length > 0 ? Series : []"
          :key="Series.length" 
          @mounted="ChartLoaded = true"
        ></chart>`

问题将得到解决

【讨论】：