echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

Posted 2020-10-09 DamonWong

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.相关的知识，希望对你有一定的参考价值。

一：错误描述：echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.

二：错误原因：echarts在用json数据请求时未调用

 1 <!DOCTYPE html>  
 2 <html>  
 3     <head>  
 4         <meta charset="UTF-8">  
 5         <title></title>  
 6         <link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">  
 7         <script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>  
 8         <script type="text/javascript" src="../js/echarts.js" ></script>  
 9         <script>  
10             var myChart2 = echarts.init(document.getElementById(‘main2‘));  
11   
12             myChart2.setOption({  
13                 title: {  
14                     text: ‘异步数据加载示例‘  
15                 },  
16                 tooltip: {},  
17                 legend: {  
18                     data:[‘销量‘]  
19                 },  
20                 xAxis: {  
21                     data: []  
22                 },  
23                 yAxis: {},  
24                 series: [{  
25                     name: ‘销量‘,  
26                     type: ‘bar‘,  
27                     data: []  
28                 }]  
29             });  
30             $.get(‘../js/data.json‘).done(function (data) {  
31                   
32                 console.dir(data);  
33                 // 填入数据  
34                 myChart2.setOption({  
35                     xAxis: {  
36                         data: data.categories  
37                     },  
38                     series: [{  
39                         // 根据名字对应到相应的系列  
40                         name: ‘销量‘,  
41                         data: data.data  
42                     }]  
43                 });  
44               
45             });  
46   
47         </script>  
48     </head>  
49     <body>  
50         <div id="chart" style="width: 1200px; height: 560px;"></div>  
51     </body>  
52 </html>

数据请求格式：

 1 {  
 2     "categories": [  
 3         "衬衫",  
 4         "羊毛衫",  
 5         "雪纺衫",  
 6         "裤子",  
 7         "高跟鞋",  
 8         "袜子"  
 9     ],  
10     "data": [  
11         5,  
12         20,  
13         36,  
14         10,  
15         10,  
16         20  
17     ]  
18 }

三：解决办法：

（1）将上述代码放在一个函数中，然后在onload中调用这个函数

（2）用jQuery方法

 1 <script>  
 2             $(document).ready(function(){  
 3                 var chart = document.getElementById(‘chart‘);  
 4                 var chartData = echarts.init(chart);  
 5       
 6                 chartData.setOption({  
 7                     title: {  
 8                         text: ‘异步数据加载示例‘  
 9                     },  
10                     tooltip: {},  
11                     legend: {  
12                         data:[‘销量‘]  
13                     },  
14                     xAxis: {  
15                         data: []  
16                     },  
17                     yAxis: {},  
18                     series: [{  
19                         name: ‘销量‘,  
20                         type: ‘bar‘,  
21                         data: []  
22                     }]  
23                 });  
24                   
25                 $.get(‘../js/data.json‘).done(function (data) {  
26                       
27                     console.dir(data);  
28                     // 填入数据  
29                     chartData.setOption({  
30                         xAxis: {  
31                             data: data.categories  
32                         },  
33                         series: [{  
34                             name: ‘销量‘,  
35                             data: data.data  
36                         }]  
37                     });  
38                   
39                 });  
40                   
41                 function eConsole(param)   
42                 {  
43                     console.dir(param);  
44                 }  
45                   
46                 chartData.on("click",eConsole);  
47             });  
48   
49         </script>

以上是关于echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.的主要内容，如果未能解决你的问题，请参考以下文章

Uncaught (in promise)

Uncaught (in promise)：消息端口在收到响应之前关闭

出现错误 - Uncaught (in promise) DOMException: play() failed 因为用户没有先与文档交互

AngularJS Uncaught SyntaxError: Unexpected token :

解决Uncaught (in promise) reason的问题