参考: https://blog.csdn.net/yiifaa/article/details/75040858
一、echart.init报错,报错的类型有:
- invalid dom
- attribute is null (大概是这个意思)
- t is null
- e is null
- height/width not defined (具体的报错了忘了,大概意思就是获取不到宽高)
二、 invalid dom:
- init代码放到
window.onload
里面了 ,有没用,报错。 - 查了好多资料有说放到
$(document).ready()
,还是不行。 - html里还引进了vue(不是脚手架搭建),我再
mounted() {}
写this.$nextTick(()=> { // 代码})
也获取不到节点,节点竟然为空。
PS:我觉得可能是因为我引入了vue又自己写了普通的js文件,导致上面的1错误。1的错误可能会导致2,3,4的产生。报5的原因可能是没有设置宽高,设置了宽高可能是因为代码的位置放错,请放到所有js的代码的最后面(如果你引入了vue的js文件,你更应该如此做)
三、解决:
后来我就换思路去找如何监听dom节点已经加载。
PS:如果你引入了vue的js文件,请吧chart.init的代码放在最后,否则会报5的错误。
// 声明定时器
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()
---------------------
为什么不用while呢?因为浏览器是单线程执行,而“while(!dom)”一直占着主线程,所以dom永远得不到机会加载到浏览器中。正确的解决办法是充分利用浏览器的队列特性。
结论: 在HTML 5中,已经有更好的替代方案-MutationObserver,基于事件触发,效率高,监测的类型不仅多,而且易于使用