1、错误描述
echarts.js:1136 Uncaught Error: Initialize failed: invalid dom.
2、错误原因
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="shortcut icon" href="../js/echarts-2.2.7/doc/asset/ico/favicon.png">
<script type="text/javascript" src="../js/echarts-2.2.7/doc/asset/js/jquery.min.js" ></script>
<script type="text/javascript" src="../js/echarts.js" ></script>
<script>
var myChart2 = echarts.init(document.getElementById('main2'));
myChart2.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
$.get('../js/data.json').done(function (data) {
console.dir(data);
// 填入数据
myChart2.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
});
});
</script>
</head>
<body>
<div id="chart" style="width: 1200px; height: 560px;"></div>
</body>
</html>
{
"categories": [
"衬衫",
"羊毛衫",
"雪纺衫",
"裤子",
"高跟鞋",
"袜子"
],
"data": [
5,
20,
36,
10,
10,
20
]
}
echarts在用json数据请求时未调用
3、解决办法
（1）将上述代码放在一个函数中，然后在onload中调用这个函数
（2）用jQuery方法
<script>
$(document).ready(function(){
var chart = document.getElementById('chart');
var chartData = echarts.init(chart);
chartData.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
$.get('../js/data.json').done(function (data) {
console.dir(data);
// 填入数据
chartData.setOption({
xAxis: {
data: data.categories
},
series: [{
name: '销量',
data: data.data
}]
});
});
function eConsole(param)
{
console.dir(param);
}
chartData.on("click",eConsole);
});
</script>
转载自https://blog.csdn.net/you23hai45/article/details/51585480