一：錯誤描述：echarts.js:1136 Uncaught Error: Initialize failed: invalid dom. 二：錯誤原因：echarts在用json數據請求時未調用 數據請求格式： 三：解決辦法： （1）將上述代碼放在一個函數中，然後在onload中調用這個函數 （ ...
一：錯誤描述：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>
