我使用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();
})
}
}
});
最简单的办法是: