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

時間 2019-11-09

標籤 echarts.js echarts uncaught error initialize failed invalid dom 欄目 JavaScript 简体版

原文原文鏈接

一：錯誤描述：echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.javascript

二：錯誤緣由：echarts在用json數據請求時未調用html

 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>

數據請求格式：java

 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 }

三：解決辦法：jquery

（1）將上述代碼放在一個函數中，而後在onload中調用這個函數json

（2）用jQuery方法echarts

 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>

相關標籤/搜索

failed......executable

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。