echart.js 报错：invalid dom

今天药忘吃喽~ 2021-09-07 16:16 653阅读 0赞

今天后端同事问我一个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][echart.init_https_blog.csdn.net_zhangjing0320_article_details_84992985]

[echart.init_https_blog.csdn.net_zhangjing0320_article_details_84992985]: https://blog.csdn.net/zhangjing0320/article/details/84992985