本次任务需要自学Jquery库中的ajax()方法，动态获取json数据，对获取到的json数据进行清洗，然后将清洗好的数据传给Echarts图表。

最新推荐文章于 2023-08-24 15:47:23 发布

孤卓鹜越

最新推荐文章于 2023-08-24 15:47:23 发布

阅读量746

点赞数

本文链接：https://blog.csdn.net/qq_37918732/article/details/80292993

版权

	<!DOCTYPE html> <html>
	<head>
	<meta charset="utf-8">
	<title>实时票房</title>
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script src="http://echarts.baidu.com/dist/echarts.js"></script>
	</head>

	<body>
	<div id="main" style="width: 800px;height: 500px;"></div>
	<script>
	function myHq() {
	$.ajax({
	type: "get",
	url: "http://api.shenjian.io/",
	data: {appid: "dd648129b0e17057b8901c27f4a88021"},
	dataType: "JSONP",
	beforeSend:function(aaa){
	console.log(aaa);
	alert('请求开始啦!!');
	//在请求操作之前
	},
	//对该成功获取的数据进行处理
	success: function(data) {
	var xA = [];
	var yA = [];
	//通过两个循环遍历对对获取到的数据进行清洗
	for(var i = 0; i < data.data.length; i++) {
	xA.push(data.data[i].MovieName);
	}
	for(var n = 0; n < data.data.length; n++) {

	yA.push(data.data[n].BoxOffice);
	}
	var myChart = echarts.init(document.getElementById('main'));
	var option = {
	color: ['#FFFF00'],
	title: {
	text: '实时票房',
	},
	tooltip: {},
	legend: {
	data: ['金额/万元']
	},
	grid: {
	y2: 150 //调整显示y轴的具体长度
	},
	xAxis: {
	data: xA,
	axisLabel: {
	interval: 0,//横轴信息全部显示
	rotate: -30//-30度角倾斜显示
	}
	},
	yAxis: {},
	series: [{
	name: '金额/万元',
	type: 'bar',
	data: yA,
	}]
	};
	myChart.setOption(option);
	},
	error: function(state,errMsg){
	// console.log(Code);
	// console.log(errMsg);
	document.getElementById('main').innerHTML = errMsg+'请求错误'+' '+'错误代码:'+state.status;
	//如果出现错误则将指出代码的错误符号
	},
	complete:function(state){
	// console.log(state);
	alert('请求已完成!');
	//在请求操作之后的
	}



	});
	};
	myHq();
	</script>
	</body>
	</html>

孤卓鹜越

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
本次任务需要自学Jquery库中的ajax()方法，动态获取json数据，对获取到的json数据进行清洗，然后将清洗好的数据传给Echarts图表。

&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;实时票房&lt;/title&gt; &lt;script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"&amp
复制链接

扫一扫