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="width: 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);  
        });  

 

转载于:https://www.cnblogs.com/xfdmb/p/6826220.html