ECharts獲取Json文件數據
編寫html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>echarts-JSON請求數據</title>
<script src="./echarts.helper.js"></script>
<script src="./echarts.min.js"></script>
<script src="./jquery-1.9.1.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.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: 1200px; height: 500px;"></div>
</body>
</html>
編寫json
{
"categories": [
"蘋果",
"橘子",
"荔枝",
"桃子",
"栗子",
"梨子",
"柿子"
],
"data": [
500,
280,
386,
190,
107,
207,
452
]
}
提示，這個要放在服務器里邊去跑，不然后要報跨域異常
- 我用的是apache-tomcat服務器。
- 把寫的這兩個文件放在一個文件夾下。
- 在把這個文件夾放在apache-tomcat下webapps目錄下即可
- 運行項目需啟動apache-tomcat服務器。在bin目錄下點擊startup.bat文件即可。
前端運行
啟動apache-tomcat
項目文件路徑
這里的js文件如果需要的可加我qq:2103717751