echart.js 报错：invalid dom

今天后端同事问我一个echart.js初始化时，报错：invalid dom

问题出现原因

问题出现原因：dom没有加载出来，就开始了echart.init(dom);

解决思路

解决思路：如何监听dom节点已经加载。

解决办法（js版本）

解决办法：

//  声明定时器
var timer = null;
//  检查dom是否执行完成
function check() {
    let dom = document.getElementById('chart');
    if(dom) {
         //  执行dom加载完成后的操作，例如echart的初始化操作
        echart.init(document.getElementById('chart'));
        //  清除定时器
        if(!timer) {
            clearTimeout(timer);
        }
    } else {
        //  自我调用
        timer = setTimeout(check, 0);
    }
}
//  首次执行
check()

解决办法（vue版本）

如果是vue的话，可以通过this.$nextTick来处理dom渲染完成后进行的操作
jq获取的dom跟原生js获取的dom之间的区别：
document.getElementById("receiptLine")等同于$("#receiptLine")[0]

this.$nextTick(() => {//页面dom渲染完成后再去获取dom，避免出现invalid dom的区别
    var chartDom = $("#receiptLine")[0];
    var myChart = echarts.init(chartDom);
    this.receiptOption = {
        xAxis: {
            type: 'category',
            data: []
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line'
        }]
    };
    for (var index = 0; index < data.Items.length; index++) {
        this.receiptOption.series[0].data.push(data.Items[index].RealNum);
        this.receiptOption.xAxis.data.push(data.Items[index].Month);
    }
    console.log(this.receiptOption);
    //当数据量过大时，如果数据没有获取完成就开始setOption就会出现报错：因此延时处理setOption
    setTimeout(() => {
        myChart.setOption(this.receiptOption);
    }, 100)
})

文章出处：
echart.init报错：https://blog.csdn.net/zhangjing0320/article/details/84992985