一：错误描述：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=" 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>