app.js:957 Error: Initialize failed: invalid dom.
时间: 2023-11-01 17:19:30 浏览: 191
The application has failed...(应用程序配置不正确)
这个错误是由于在浏览器加载时,你的js代码段写在body标签之前,而当浏览器执行document.getElementById('main')时,由于id为main的dom对象还未被创建,从而导致报错"Initialize failed: invalid dom"。 解决这个问题的方法是将你的js代码段放在body标签之后,或者使用window.onload事件来确保js代码在dom对象创建后再执行。 以下是一个修正后的代码示例:
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试页面</title>
<!-- 引入 开发环境的echarts.js -->
<script src="js/echarts.js"></script>
<!-- <script src="js/jquery-1.9.1.min.js"></script> -->
<style type="text/css">
#main{
width: 600px;
height:400px;
}
</style>
</head>
<body>
<div id="main"></div>
<script type="text/javascript">
window.onload = function() {
//初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
//指定图表配置项和数据
var option = {
title:{
text:'Echarts入门案例'
},
tooltip:{},
legend:{
data:['销量']
},
xAxis:{
data:["苹果","香蕉","梨","橘子","火龙果","西瓜"]
},
yAxis:{},
series:[{
name:'销量',
type:'bar',
data: [6,18,35,10,28,30]
}]
};
// 使用上面指定的配置项和数据显示图表。
myChart.setOption(option);
};
</script>
</body>
</html>
通过将你的js代码段放在window.onload事件中,确保在dom对象创建后再执行,可以解决"Initialize failed: invalid dom"的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.](https://blog.csdn.net/iteye_8264/article/details/82652987)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [Initialize failed: invalid dom.——带你深入因操作dom不当带来的错误](https://blog.csdn.net/xb_2015/article/details/85337187)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]
阅读全文