var scaleData = [{
'name': '总户数',
'value': 1234
},
{
'name': '总人口数',
'value': 4700
},
{
'name': '已覆盖户数',
'value': 1200
},
{
'name': '已覆盖人口数',
'value': 3687
}
];
var placeHolderStyle = {
normal: {
label: {
show: false
},
labelLine: {
show: false
},
color: 'rgba(0, 0, 0, 0)',
borderColor: 'rgba(0, 0, 0, 0)',
borderWidth: 0
}
};
var data = [];
var color = ['rgb(255, 153, 153)', 'rgb(255, 176, 63)', 'rgb(61, 186, 45)', 'rgb(43, 166, 254)'];
var colorBorder = ['rgba(255, 153, 153, 0.4)', 'rgba(255, 176, 63, 0.4)', 'rgba(61, 186, 45, 0.4)', 'rgba(43, 166, 254, 0.4)'];
for (var i = 0; i < scaleData.length; i++) {
data.push({
data: scaleData[i].value,
value: 20,
name: scaleData[i].name,
itemStyle: {
normal: {
color: color[i],
borderWidth: 20,
borderColor: colorBorder[i]
}
}
}, {
value: 8,
name: '',
itemStyle: placeHolderStyle
});
}
data.push({
value: 40,
name: '',
itemStyle: placeHolderStyle
})
var seriesObj = [{
name: '',
type: 'pie',
clockWise: false,
radius: [100, 200],
hoverAnimation: false,
startAngle: -30,
itemStyle: {
normal: {
label: {
show: true,
position: 'inner',
fontSize: 14,
lineHeight: 15,
formatter: function(params) {
var percent = 0;
var total = 0;
for (var i = 0; i < scaleData.length; i++) {
total += scaleData[i].value;
}
percent = ((params.value / total) * 100).toFixed(0);
if (params.name !== '') {
// return params.name + '\n' + params.data.data;
if (params.name.length > 4) {
return params.name.slice(0, 3) + '\n' + params.name.slice(3);
} else {
return params.name;
}
} else {
return '';
}
}
},
labelLine: {
length: 30,
length2: 60,
show: true
}
}
},
data: data
}, {
name: '',
type: 'pie',
clockWise: false,
radius: [100, 200],
hoverAnimation: false,
startAngle: -30,
itemStyle: {
normal: {
label: {
show: true,
position: 'outside',
fontSize: 18,
formatter: function(params) {
var percent = 0;
var total = 0;
for (var i = 0; i < scaleData.length; i++) {
total += scaleData[i].value;
}
percent = ((params.value / total) * 100).toFixed(0);
if (params.name !== '') {
return params.data.data;
} else {
return '';
}
}
},
labelLine: {
length: 30,
length2: 60,
show: true
}
}
},
data: data
}];
option = {
backgroundColor: '#fff',
tooltip: {
show: false
},
legend: {
show: false
},
toolbox: {
show: false
},
series: seriesObj,
graphic: [{
type: 'group',
left: 'center',
top: 'middle',
children: [{
type: 'text',
z: 100,
left: 'center',
top: '0',
style: {
fill: '#333',
text: [
'治理率(以户数计算)'
],
font: '16px Microsoft YaHei'
}
},
{
type: 'text',
z: 100,
left: 'center',
top: '32',
style: {
fill: 'red',
text: [
'80%'
],
font: '26px Microsoft YaHei'
}
}
]
}]
}