在model框中使用echarts时报错找不到dom

echarts是我们在进行前端开发时使用频率比较高的一个组件，但是在使用时会经常出现各种各样的问题；前几天做一个后台项目时，遇到了一个问题，那就是找不到dom。出现这个问题的原因是在echarts实例生成时。我们的dom没有生成可供echarts挂载的元素。
遇到这类的问题的原因通常是因为我们的echarts是在model框中使用的，在echarts实例生成时，我们的model框没有加载完成。在model框打开时呈现出一个空白的页面.
那我们如何解决这个问题呢。很简单。给echarts一个延迟就好了

 costChart() {
            this.visible = true;//model打开
            let echarts = require('echarts');
            setTimeout(() => {
                var chartDom = document.getElementById('costChart');//挂载
                var costChart = echarts.init(chartDom);
                let option = {
                    title: {
                        text: '',
                    },
                    tooltip: {
                        trigger: 'axis',
                    },
                    legend: {
                        data: ['超支结余趋势'],
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true,
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        areaStyle: {},
                        emphasis: {
                            focus: 'series',
                        },
                        data: this.dateDischarge,//x轴数据
                    },
                    yAxis: {
                        type: 'value',
                    },
                    series: [
                        {
                            name: '超支结余趋势',
                            type: 'line',
                            data: this.overallProportion,//y轴数据
                        },
                    ],
                }
                costChart.clear()//清空数据，防止第二次打开时出现数据不刷新情况

                costChart.setOption(option);
            }, 1000)
        },

我这里给他设置了一秒的延迟，也就是说再model打开一秒后再加载echarts
使用时还可能出现数据不刷新的情况，在这里也给他做了清空数据的操作。当然，也可以在关闭model框时进行数据清空，还是要根据具体的业务需求来定。