zoukankan      html  css  js  c++  java
  • 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>

  • 相关阅读:
    监控系统
    RocketMQ入门介绍
    Linux的虚拟内存详解(MMU、页表结构) 转
    快速排序
    如何选择分布式事务解决方案? 转
    java 基本数据类型相关思考
    互联网项目中mysql应该选什么事务隔离级别 转
    线上服务的FGC问题排查,看这篇就够了! 转
    什么是Base64? 转
    业界难题-“跨库分页”的四种方案 转
  • 原文地址:https://www.cnblogs.com/happiness-mumu/p/8610830.html
Copyright © 2011-2022 走看看