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

最新推荐文章于 2024-09-27 21:58:31 发布

iteye_8264

最新推荐文章于 2024-09-27 21:58:31 发布

阅读量3.1k

点赞数

文章标签： javascript json ViewUI

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>