zoukankan      html  css  js  c++  java
  • angular先加载页面再执行事件,特别在动态生成id,然后做echarts等图表

    其实是用到了$timeout,
    [javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
    //首先需要定义一个directive  
      
        directives.directive('onFinishRenderFilters', function ($timeout) {  
            return {  
                restrict: 'A',  
                link: function(scope, element, attr) {  
                    if (scope.$last === true) {  
                        $timeout(function() {  
                            scope.$emit('ngRepeatFinished');  
                        });  
                    }  
                }  
            };  
        });  
    然后在你需要预加载dom的html片段中使用该directive
    [html] view plain copy print?在CODE上查看代码片派生到我的代码片
    <uib-tabset active="activeJustified" class="mt10"   on-finish-render-filters>  
        <uib-tab ng-repeat="item in pigmanage.generallist" heading="{{item.name}}">  
            <div class="tipcirclebox col-cm-6" ng-repeat = "its in item.tiplist"  on-finish-render-filters>  
                 <div id="{{its.id}}" style=" 500px;height:300px;" ></div>  
            </div>  
        </uib-tab>  
    </uib-tabset>  
    
    再结合$scope.$on方法就可以了
    [javascript] view plain copy print?在CODE上查看代码片派生到我的代码片
    $scope.$on('ngRepeatFinished', function (ngRepeatFinishedEvent) {  
                //下面是在table render完成后执行的js  
                //debugger;  
                var myChart = echarts.init(document.getElementById($scope.pigmanage.generallist[0].tiplist[0].id));  
                console.log(myChart)  
                // 指定图表的配置项和数据  
                var option = {  
                    title : {  
                        text: '某站点用户访问来源',  
                        x:'center'  
                    },  
                    tooltip : {  
                        trigger: 'item',  
                        formatter: ""  
                    },  
                    series : [  
                        {  
                            name: '访问来源',  
                            type: 'pie',  
                            radius : '55%',  
                            center: ['50%', '60%'],  
                            data:[  
                                {value:335, name:'直接访问'},  
                                {value:310, name:'邮件营销'},  
                                {value:234, name:'联盟广告'},  
                                {value:135, name:'视频广告'},  
                                {value:1548, name:'搜索引擎'}  
                            ],  
                            itemStyle: {  
                                emphasis: {  
                                    shadowBlur: 10,  
                                    shadowOffsetX: 0,  
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'  
                                }  
                            }  
                        }  
                    ]  
                };  
      
                // 使用刚指定的配置项和数据显示图表。  
                myChart.setOption(option);  
            });  
  • 相关阅读:
    谈一谈网站防盗链
    SEO优化步骤
    hls协议(最清晰的讲解)
    https比http到底那里安全?
    常见的php攻击(6种攻击详解)
    36)django-jsonp跨域
    35)django-验证码
    34)django-上传文件,图片预览功能实现
    33)django-原生ajax,伪ajax
    32)django-modelform
  • 原文地址:https://www.cnblogs.com/xfdmb/p/6826220.html
Copyright © 2011-2022 走看看