let trafficWay = [
{
name: '病假',
value: 60,
},
{
name: '事假',
value: 10,
},
{
name: '婚假',
value: 30,
},
{
name: '丧假',
value: 40,
}
];
let data = [];
let data1 = [];
let color = ['#83F9F8', '#83F9F8', '#027AD0', '#027AD0'];
let color1 = ['#83F9F899', '#83F9F899', '#027AD099', '#027AD099'];
for (var i = 0; i < trafficWay.length; i++) {
data.push(
{
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
label: {
show: true, //false不显示饼图上的标签
position: 'outside', //inside（在饼图上显示）,outside(默认就会出现引导线) center
formatter: '{b}:{c}',
},
//只有设置了label:show=ture;position=outside 设置labelLine才会有效
labelLine: {
show: true, //显示引导线
length: 500, //连接饼图第1段线条的长度 length length2 不写自适应
length2: 300, //链接饼图第2段线条长度
smooth: false, //是否光滑连接线
},
},
},
},
{
value: 3,
name: '',
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
},
},
}
);
data1.push(
{
value: trafficWay[i].value,
name: trafficWay[i].name,
itemStyle: {
normal: {
label: {
show: false, //false不显示饼图上的标签
},
//只有设置了label:show=ture;position=outside 设置labelLine才会有效
labelLine: {
show: false, //显示引导线
},
},
},
},
{
value: 3,
name: '',
itemStyle: {
normal: {
label: {
show: false,
},
labelLine: {
show: false,
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0,
},
},
}
);
}
let seriesOption = [
{
name: '',
type: 'pie',
clockWise: false,
radius: ['75%', '80%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
opacity: 1,
label: {
position: 'outside',
alignTo: 'edge',
margin: 1,
formatter: function (params) {
if (params.name !== '') {
return (
'{b|' + params.name + '}\n{d|' + params.value + '} '
);
} else {
return '';
}
},
rich: {
b: {
fontSize: 14,
color: 'rgba(255, 255, 255,.6)',
align: 'left',
padding: 4,
},
d: {
fontSize: 22,
color: 'rgba(0, 255, 253, 1)',
align: 'left',
marginTop:-100,
padding: 4,
},
},
},
labelLine: {
normal: {
length: 10,
length2: 5,
lineStyle: {
width: 1,
},
},
},
},
},
data: data,
},
{
name: '',
type: 'pie',
clockWise: false,
radius: ['40%', '65%'],
hoverAnimation: false,
center: ['50%', '50%'],
itemStyle: {
normal: {
opacity: 0.56,
label: {
show: false,
},
},
},
data: data1,
},
];
let option = {
color: color,
tooltip: {
show: false,
},
toolbox: {
show: false,
},
title:{
text:"总人数",
left:"center",
top:"55%",
textStyle:{
color:"#fff",
fontSize:10,
align:"center"
}
},
graphic:{
type:"text",
left:"center",
top:"40%",
style:{
text:"193",
textAlign:"center",
fill:"#fff",
fontSize:29,
fontWeight:700
}
},
gird:{
left:50,
bottom:50
},
series: seriesOption,
};