如何才能让lable文字相对每一扇区居中显示,或是用别的方法实现这个效果
配置项如下
var data = [{
name: '东城区',
value: 123
}, {
name: '西城区',
value: 234
}, {
name: '朝阳区',
value: '345'
}, {
name: '海淀区',
value: '456'
}, {
name: '通州区',
value: '567'
}, {
name: '顺义区',
value: '678'
}, {
name: '房山区',
value: '789'
}, {
name: '大兴区',
value: '890'
}, {
name: '昌平区',
value: '901'
}, {
name: '平谷区',
value: '102'
}, {
name: '延庆区',
value: '234'
}, {
name: '门头沟',
value: '234'
}, {
name: '密云区',
value: '234'
}, {
name: '怀柔区',
value: '234'
}, {
name: '丰台区',
value: '234'
}, {
name: '石景山区',
value: '234'
}];
var legendData = (function () {
var ret = [];
for (var i = 0; i < data.length; i++) {
ret.push(data[i].name);
}
return ret;
})();
var pose = ['50%', '50%'];
option = {
backgroundColor: '#fff',
title: {
text: 'test',
//subtext: '2016年1月',
//x: 'center',
//y: '37%',
textStyle: {
fontWeight: 'normal',
fontSize: 12
}
},
toolbox: {
feature: {
dataView: {
show: true,
readOnly: false
},
restore: {
show: true
},
saveAsImage: {
show: true
}
}
},
legend: {
// orient: 'horizontal',
top:'5%',
orient: 'vertical',
x: 'left',
data: legendData
},
series: [{
type: 'pie',
selectedMode: false,//点击选择模式
hoverAnimation:false,//hover放大扇区
animationDuration:500,//动画时间
radius: ['6%', '60%'],
//radius: '60%',
roseType: 'area',
//color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
center: pose,
avoidLabelOverlap:false,//标签防重叠
label: {
normal: {
show:true,
formatter:'{d}%',
textStyle:{
color:"#fff"
},
position: 'inside'
}
},
markPoint:{
},
labelLine: {
normal: {
show: false
}
},
data: data
},
//外圈
{
type: 'pie',
center: pose,
hoverAnimation:false,//hover放大扇区
avoidLabelOverlap:false,
animationDuration:800,//动画时间
radius: ['65%', '80%'],
roseType: 'area',
axisLabel:{
"distance": -80,
"textStyle": {
"color": "#fff"
}
},
labelLine: {
normal: {
show: true
}
},
label: {
normal: {
show: true,
position: 'outside',
formatter: '{b}',
textStyle: {
color: '#000',
fontWeight: 'bold',
fontSize: 12
}
}
},
data: [{
name: '东城区',
value: 200
}, {
name: '西城区',
value: 200
}, {
name: '朝阳区',
value: '200'
}, {
name: '海淀区',
value: '200'
}, {
name: '通州区',
value: '200'
}, {
name: '顺义区',
value: '200'
}, {
name: '房山区',
value: '200'
}, {
name: '大兴区',
value: '200'
}, {
name: '昌平区',
value: '200'
}, {
name: '平谷区',
value: '200'
}, {
name: '延庆区',
value: '200'
}, {
name: '门头沟',
value: '200'
}, {
name: '密云区',
value: '200'
}, {
name: '怀柔区',
value: '200'
}, {
name: '丰台区',
value: '200'
}, {
name: '石景山区',
value: '200'
}]
},
]
};