angular如何使用http获取数据生成echarts

Question

我使用angular自定义指令定义了一个echarts的图表，但因为项目需求，图表的数据需要从后台获取，我写demo的时候数据是提前定义好的，运行很顺利，但是当我使用http服务获取图表数据的时候发现一个问题，我的图表无法生成了，查看了一下原因，发现应该是dom渲染比http获取数据更快，所以无法生成成功，请问应该如何才能顺利实现http服务获取数据生成图表功能呢？希望有过相关经验的朋友能帮助解答一下，感激不尽

以下是我的html代码：

<pie-chart id="InstalledTopLeft" class="left-col black-box" legend="legend"  data="data"></pie-chart>

这是js代码：

var volApp=angular.module('volumeSta',[]);
    volApp.controller('chartCtrl1',function($scope,$http){        
        $scope.data=null;
        $scope.legend=null;
        $http({
            method:'get',
            url:'../../capacityStatics/getPieDataOne.action'
        }).then(function(res){
            $scope.data=res.data.dataList;
            $scope.legend=res.data.titleList;

        });
    });

//饼图应用自定义指令
    volApp.directive('pieChart',function(){
        return {
            scope:{
                id:'@',
                legend:'=',
                data:'='
            },
            restrict:'E',
            template:'<div></div>',
            replace:true,
            link:function($scope,element,attrs,controller){
                console.log($scope);
                var option={
                        title : {
                            text: '某站点用户访问来源1',
                            subtext: '纯属虚构',
                            x:'center'
                        },
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left',
                            data: $scope.legend
                        },
                        series :function(){
                        return [
                            {
                                name: '访问来源',
                                type: 'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:$scope.data,
                                itemStyle: {
                                    emphasis: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    }() 
                };
                var myChart=echarts.init(document.getElementById($scope.id));
                myChart.setOption(option);
                window.addEventListener('resize',function(){
                    myChart.resize();
                })                
            }
        }
    });        

Answer 1

最简单的办法是：

<pie-chart ng-if="data" id="InstalledTopLeft" class="left-col black-box" legend="legend" data="data"></pie-chart>

Answer 2

data数据是绑定上去的，后台获取到数据后在回调中调用echarts的更新方法 setOption();
不知道这样能否解决你的问题？