按照官网教程用eclipse编写,希望实现柱状图异步获取json数据的功能,可数据总是不能显示
配置项如下
/**
用eclipse编译,希望实现柱状图异步获取数据功能,但json的数据无法显示,
不知何原因,请大佬指点下
以下是我的代码,完全按照官网教程了,就是无法实现数据的显示
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts</title>
<!-- 引入 echarts.js -->
<script src="echarts.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基于准备好的dom,初始化echarts实例
var myChart = echarts.init(document.getElementById('main'));
**/
var uploadedDataURL = "/asset/get/s/data-1525155860457-H12fOYBTM.json";
$.getJSON(uploadedDataURL,function(data){
myChart.setOption({
xAxis: {
data: data.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: data.data
}]
})
})
myChart.setOption({
title: {
text: '异步数据加载示例'
},
tooltip: {},
legend: {
data:['销量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '销量',
type: 'bar',
data: []
}]
});
/**
// 异步加载数据
$.get('data.json').done(function (data) {
// 填入数据
var obj=$.parseJSON(data);
myChart.setOption({
xAxis: {
data: obj.categories
},
series: [{
// 根据名字对应到相应的系列
name: '销量',
data: obj.data
}]
});
});
</script>
</body>
</html>
//data.json中的代码
{
"categories": [
"衬衫",
"羊毛衫",
"雪纺衫",
"裤子",
"高跟鞋",
"袜子"
],
"data": [
5,
20,
36,
10,
10,
20
]
}
**/