Error in v-on handler: “Error: Initialize failed: invalid dom.“

使用echarts时，出现了第一次打开弹框时图表未显示。之后打开是可以显示的。

<template>
    <el-dialog title="图表" :visible.sync="dialogVisible" width="80vw" :before-close="handleClose">
        <div class="ReferralRewardCharts" style="width: 100%">
            <div ref="barBoxRef" style="width: 80vw; height: 70vh" />
        </div>
    </el-dialog>
</template>
<script>
import * as echarts from 'echarts';
export default {
    name: 'BarChartBox',
    data() {
        return {
            dialogVisible: false,
            proviceData: []
        }
    },
    mounted() {
        this.addBusi()
    },
    methods: {
        handleClose() {
            this.dialogVisible = false
        },
        init(proviceData) {
            this.dialogVisible = true
            this.proviceData = proviceData
            this.addBusi()
        },
        addBusi() {
            const initAddBusi = echarts.init(this.$refs.barBoxRef)

            const option = {
                legend: {},
                tooltip: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '3%',
                    containLabel: true
                },
                dataset: {
                    source: [
                        ['product', '拉新人数', '已工作人数'],
                        ['Matcha Latte', 43.3, 5.8],
                        ['Milk Tea', 83.1, 73.4],
                        ['Cheese Cocoa', 86.4, 65.2],
                        ['Walnut Brownie', 72.4, 53.9],
                        ['里斯', 23, 10],
                        ['王明', 83, 73],
                        ['张三三', 86, 5],
                        ['lucky', 72, 15],
                        ['丽丽', 120, 56],
                        ['lucy', 70, 15]
                    ]
                },
                xAxis: { type: 'category' },
                yAxis: {},
                series: [{ type: 'bar' }, { type: 'bar' }]
            }
            initAddBusi.setOption(option)
        }
    }
}
</script>
<style lang="scss" scoped>
.ReferralRewardCharts {
    width: 100%;
    height: 70vh;

    .bar-box {
        height: 70vh;
    }

}
</style>

解决办法：

init(proviceData) {
    this.dialogVisible = true
    this.proviceData = proviceData

    this.$nextTick(() => {
        this.addBusi()
      })
},