echart.js 报错：invalid dom-蒲公英云

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)
})