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=" 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