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

  • 相关阅读:
    token原理
    1.系统代码读取配置文件
    redis hash怎么用
    那么都数据库表,那么多不同记录。是怎样都存储在一个key-value数据库的?
    jedis操作redis全指南
    redis列表list
    jedis操作
    redis
    android raw与assets资源
    Zoie Merge Policy
  • 原文地址:https://www.cnblogs.com/happiness-mumu/p/8610830.html
Copyright © 2020-2023  润新知