1. 程式人生 > >angular先載入頁面再執行事件,特別在動態生成id,然後做echarts等圖表

angular先載入頁面再執行事件,特別在動態生成id,然後做echarts等圖表

其實是用到了$timeout,

//首先需要定義一個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
                        <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方法就可以了
$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);
        });