app.directive('pieCharts', function($http) {
return {
scope: {
id: "@",
legend: "=",
arr: "="
},
restrict: 'E',
template: '
',
replace: true,
link: function($scope, element, attrs, controller) {
console.log($scope);
console.log('arr',$scope.arr); //undefined
$scope.arr = [...];
var option = {
title : {
text: '某站点用户访问来源',
left:'40%',
top:'5%',
textStyle:{
fontSize:'10',
fontWeight:'normal'
}
},
tooltip : {
trigger: 'item',
formatter: "{a}
{b} : {c} ({d}%)"
},
color:['#BEF1BE','#3CCFCF','#FBD5FB'],
legend: {
orient: 'vertical',
right: '5%',
top:'30%',
itemWidth:10,
itemHeight:10,
data: $scope.legend
},
// 数据内容数组
series: function(){
var serie = [];
var datas = [];
for(var i=0;i<$scope.legend.length;i++){
var items = {value:$scope.arr[i], name:$scope.legend[i]};
datas.push(items);
}
var item = {
name: '访问来源',
type: 'pie',
radius : '55%',
center: ['50%', '60%'],
data: datas,
itemStyle: {
emphasis: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
};
serie.push(item);
return serie;
}()
};
var pieChart = echarts.init(document.getElementById($scope.id),'macarons');
pieChart.setOption(option);
window.Onresize= pieChart.resize;
}
}
});