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

我使用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();
                })                
            }
        }
    });        
阅读 4.4k
2 个回答

最简单的办法是:

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题