<div class="col-md-10">
<div ng-show="loading">正在加载数据...</div>
<div>
<div class="change col-xs-12 col-sm-12">
<div id="main" style="height:500px;width: 100%;"></div>
<script type="text/javascript">
var myChart = echarts.init(document.getElementById('main'));
var Xtimes=[]; //实际用来盛放X轴坐标值
var nums=[];
var classA=[];
var classB=[];
var classC=[];
var chart = function(data) {
Xtimes=[]; //实际用来盛放X轴坐标值
console.log(Xtimes,"55")
nums=[];
classA=[];
classB=[];
classC=[];
successdata = data.desc;
successdata = JSON.parse(successdata);
if (successdata) {
for (var i = 0; i < successdata.length; i++) {
Xtimes.push(successdata[i].time);
nums.push(successdata[i].num);
}
for (var j = 0; j < nums.length; j++) {
classA.push(nums[j][0].a);
classB.push(nums[j][0].b);
classC.push(nums[j][0].c);
}
}
}
$.ajax({ //获取假数据
async : false,
type : "GET",
url : "matchDistribution.do",
dataType : "json",
success : function(data) {
chart(data);
}
});
// 指定图表的配置项和数据
var option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 坐标轴指示器，坐标轴触发有效
type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
}
},
legend: {
data:['一级','二级','三级','总数']
},
grid: {
left: '3%',
right: '4%',
bottom: '3%',
containLabel: true
},
xAxis : [
{
type : 'category',
data : Xtimes,
axisLabel: {
interval:0,
rotate:40
}
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
name:'一级',
type:'bar',
stack: '数量',
data:classA
},
{
name:'二级',
type:'bar',
stack: '数量',
data:classB
},
{
name:'三级',
type:'bar',
stack: '数量',
data:classC
},
/* {
name:'总数',
type:'bar',
stack: '数量',
data:[7,12,17]
} */
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option, true);
</script>
</div>
</div>
</div>
</body>
</html>
<script src="/spider-web/js/my-angular-config.js"></script>
<script>
var app = angular.module("distributionApp",[]);
MY_ANGULAR_CONFIG(app);
app.controller("distributionController", function ($scope, $http) {
$scope.loading = true;
$http.get('listPheasantLeagueVerbose.do')
.success(function (response) {
$scope.loading = false;
});
//刷新和查询
$scope.refresh = function () {
$scope.startDate = $("#startDate").val();
$scope.endDate = $("#endDate").val();
$("#refreshBtn").attr("disabled", true);
$scope.loading = true;
$http.get('matchDistribution.do?startDate=' + $scope.startDate+ "&endDate=" + $scope.endDate)
.success(function (response) {
chart(response);
option.xAxis[0].data=Xtimes;
option.series[0].data=classA;
option.series[1].data=classB;
option.series[2].data=classC;
myChart.setOption(option, true);
$("#refreshBtn").attr("disabled", false);
$scope.loading = false;
});
}
});
</script>
