echarts-JSON請求數據


1、問題背景

     將數據封裝在JSON文件中,利用get方法請求數據


2、實現源碼

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>echarts-JSON請求數據</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>
			$(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>
	</head>
	<body>
		<div id="chart" style="width: 1900px; height: 900px;"></div>
	</body>
</html>


data.json:

{
	"categories": [
		"蘋果",
		"橘子",
		"荔枝",
		"桃子",
		"栗子",
		"梨子",
		"柿子"
	],
	"data": [
		500,
		280,
		386,
		190,
		107,
		207,
		452
	]
}



3、實現結果



注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com