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
]
}
注意！
本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系我们删除。