Echarts图显示的页面不对

Question

前端框架：ant design vue @1.6.2
问题：子页面的echarts图报错Error: Initialize failed: invalid dom.（大概意思是 操作一个未被正确初始化或无效的DOM元素所导致的。），但是，我尝试在父级页面测试时，突然发现echarts图在父级页面显示出来
详细描述：子页面是一个引入的model框import echarts_model from './echarts_model.vue'，
在子页面（echarts_model.vue）中按照正常操作，制作一个echarts图，
页面部分：

<a-col class="col1" :span="10">
         <div id="Rate_Echarts" style="height: 25rem; width: 45rem"></div>
</a-col>

methods部分：

Rate_Echarts() {
            let myChart = this.$echarts.init(document.getElementById('Rate_Echarts'));
            // 指定图表的配置项和数据
            let option = {
                xAxis: {
                    type: 'category',
                    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        data: [120, 200, 150, 80, 70, 110, 130],
                        type: 'bar'
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
        },

从父级页面触发的get_value()触发this.Rate_Echarts()，报错Error: Initialize failed: invalid dom.
当在父级页面写入 <div id="Rate_Echarts" style="height: 25rem; width: 45rem"></div>时，很奇怪的发现，点击父级页面触发的get_value()，在父级页面会显示Echarts图
现在想知道这个问题为什么会出现，应该如何解决

Answer 1

具体原因没查出来，不过在get_value()触发this.Rate_Echarts()时，加了个定时器就好了，猜测应该是触发this.Rate_Echarts时，DOM元素还没加载完的原因

setTimeout(() => {
                this.Rate_Echarts(record)
            }, 100)