echarts（JavaScript）加载json的辛酸史

作为非前端开发出身的数据从业人员，echarts数据可视化功能太强大了，通过直接把数据写入到代码里可以实现，但是当数据量太大或者反复操作时，写到代码里太耗时了，因此需要学习js加载文件的方法，去自动化图形，一下记录自己再学习中所遇到的坑。

先上代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9;IE=8;IE=7;IE=EDGE;">
		<title>echarts-JSON请求数据</title>
		
		<script src="echarts.js"></script>
		<script src="asset/js/jquery.min.js"></script>
		<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('data.json').done(function (data) {
					
					console.log("data",data);//看类型
					console.log("data.categories:",data.categories);//观察类型
					console.log("data.data:",data.data);//居然是Undefind
					console.log(typeof(data))//你会发现控制台输出的不是String 是 Object，不需要转换
					// 填入数据
					// var data = JSON.parse(data);//加上这行，将Sring类型的data转换为JSON形式
					// var data = $.parseJSON(data);
					console.log(data.toString()) //[object Object]
					console.log(data)
				    chartData.setOption({
				        xAxis: {
				            data: data.categories
				        },
				        series: [{
				            name: '销量',
				            data: data.data
				        }]
				    });
				
				});
				
				function eConsole(param) 
                {
                    console.log(param);
                }
				
				chartData.on("click",eConsole);
			});

		</script>
	</head>
	<body>
		<div id="chart" style="width: 1000px; height: 400px;"></div>
	</body>
</html>

直接通过浏览器打开看效果：图呢？

很多文章和官网都有说：要加上var data = JSON.parse(data);这一行，nonono要看返回的类型是什么？

通过控制台查看，通过控制台完全没有输出是怎么回事？

通过咨询开发大神，原来发送的请求是ajax请求，因此需要http sever或者通过tomcat服务器查看，http sever不会写怎么办，那只能通过tomcat服务器了，然后又安装jdk和tomcat，注意注意一定要正确配置文件，然后把文件包放到webapps下面，这样执行tomcat时就会自动执行webapps下的文件，然后打开浏览器输入：http://localhost:8080/myhome/pur.html看效果：

耶成功了，数据格式如下：以后可以随意加载文件了，

{
"categories": [
"apple",
"orange",
"litchi",
"peach",
"Chestnuts",
"Pears",
"Persimmon"
],
"data": [
500,
280,
386,
190,
107,
207,
452
]
}

echarts（JavaScript）加载json的辛酸史

猜你喜欢