angular先載入頁面再執行事件,特別在動態生成id,然後做echarts等圖表
阿新 • • 發佈:2019-01-22
其實是用到了$timeout,
然後在你需要預載入dom的html片段中使用該directive//首先需要定義一個directive directives.directive('onFinishRenderFilters', function ($timeout) { return { restrict: 'A', link: function(scope, element, attr) { if (scope.$last === true) { $timeout(function() { scope.$emit('ngRepeatFinished'); }); } } }; });
<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); });