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

posted on 2018-03-20 17:28  happiness木木  阅读(229)  评论(0编辑  收藏  举报