angular1.0使用echarts點刷新再次調用echarts方法

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

相關文章
相關標籤/搜索