关于使用dialog实现echarts图表无法显示，钩子函数获取不到dom，报错问题 Error in mounted hook:

使用element组件创建一个Dialog对话框，并且在组件中显示echarts图表

<template>
    <div>
        <el-dialog ref="dialog" :visible.sync="dialogVisible">
            <div id="mychart" ref="mychart"></div>
        </el-dialog>
    </div>
</template>
<style>
#mychart {
    width: 800px;
    height: 600px;
}
</style>

js写入echarts需要的一般数据

<script>
export default {
    data() {
        return {
            dialogVisible: true,//控制Dialog显示
            option: {
                title: {
                    text: '订单信息'
                },
                xAxis: {
                    type: 'category',
                    data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']
                },
                yAxis: {
                    type: 'value',
                },
                series: [{
                    name: '',
                    type: 'line',
                    data: [10, 20, 30, 40, 50, 60, 70, 10, 30, 50],
                    lineStyle: {
                        color: 'rgb(8,252,7)'
                    }
                }]
            }
        }
    }
}
</script>

 以及调用的方法

methods: {
        mycharts() {
            let myChart = this.$echarts.init(document.getElementById('mychart'));
            myChart.setOption(this.option)
            //echarts自适应
            window.addEventListener("resize", function () {
                myChart.resize()
            })
        }
    }

关键钩子函数

mounted() {
        this.mycharts();
    }

当我们按预想的方法去实现时，发现浏览器中只显示了Dialog对话框并没有图表，且出现错误

 

 这是因为Dialog在打开时，会同时执行 mounted() 函数,而所需要的dom还并未渲染，然后出现错误

改进方法为在执行（this.mycharts();）之前添加一个计时器，使其稍晚执行

mounted() {
        setTimeout(() => {
            this.mycharts();
        }, 1)
    }

即可完成图表实现

方法可供参考，有误敬请指正。