106 lines
2.6 KiB
JavaScript
106 lines
2.6 KiB
JavaScript
|
|
||
|
|
var currenTotal=[];
|
||
|
|
var count=0;
|
||
|
|
function drawInformationEchart(data,text,subText,offsetTop){
|
||
|
|
return {
|
||
|
|
color: ["#1DA7C0", "#01D0A4", "#E28E61", "#CECE41"],
|
||
|
|
tooltip: {
|
||
|
|
trigger: 'item'
|
||
|
|
},
|
||
|
|
title: { // 用title显示环中间固定的文字
|
||
|
|
text: `${text}`, // 圈中间的那个字
|
||
|
|
subtext: `${subText}`, // 子标题
|
||
|
|
top: '35%',
|
||
|
|
left: '19%',
|
||
|
|
textAlign: 'center', // 字体居中对齐
|
||
|
|
textStyle: {
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 18,
|
||
|
|
lineHeight: 20,
|
||
|
|
},
|
||
|
|
subtextStyle: { // 子标题样式
|
||
|
|
color: '#fff',
|
||
|
|
fontSize: 18,
|
||
|
|
lineHeight:20,//字体行高
|
||
|
|
fontWeight:'bold'
|
||
|
|
|
||
|
|
},
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
top: offsetTop,
|
||
|
|
left: '43%',
|
||
|
|
itemGap: 20,
|
||
|
|
itemWidth: 10,
|
||
|
|
itemHeight: 10,
|
||
|
|
textStyle: {
|
||
|
|
rich: {
|
||
|
|
b:{
|
||
|
|
width: 190,
|
||
|
|
color: "#ffff",
|
||
|
|
padding:[2,10,5,10],
|
||
|
|
fontSize:16,
|
||
|
|
bottom:'bottom',
|
||
|
|
fontFamily:'myRegular'
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
// icon: "circle",
|
||
|
|
formatter: function (pamars) {
|
||
|
|
|
||
|
|
let total = 0
|
||
|
|
let target=0;
|
||
|
|
for (let i = 0; i < data.length; i++) {
|
||
|
|
total += data[i].value
|
||
|
|
if (data[i].name === pamars) {
|
||
|
|
target = data[i].value
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
if(total==0){
|
||
|
|
var str= pamars+" | "+target+" | " + '0%';
|
||
|
|
return `{b|${str}} }`
|
||
|
|
}
|
||
|
|
var value=((target / total) * 100).toFixed(0)
|
||
|
|
currenTotal.push(value);
|
||
|
|
if(currenTotal.length==data.length){
|
||
|
|
value=100-count;
|
||
|
|
var str= pamars+" | "+target+" | "+value + '%';
|
||
|
|
}else{
|
||
|
|
count+=parseFloat(value);
|
||
|
|
var str= pamars+" | "+target+" | "+value + '%';
|
||
|
|
}
|
||
|
|
return `{b|${str}} }`
|
||
|
|
}
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
name: `${text}人数`,
|
||
|
|
type: 'pie',
|
||
|
|
radius: ['55%', '70%'],
|
||
|
|
center: ["20.5%", "52%"],
|
||
|
|
avoidLabelOverlap: false,
|
||
|
|
itemStyle: {
|
||
|
|
borderRadius: 0,
|
||
|
|
borderColor: '#0A335B',
|
||
|
|
borderWidth: 0
|
||
|
|
},
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
position: 'center'
|
||
|
|
},
|
||
|
|
emphasis: {
|
||
|
|
label: {
|
||
|
|
show: false,
|
||
|
|
fontSize: 15,
|
||
|
|
fontWeight: 'bold'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
labelLine: {
|
||
|
|
show: false
|
||
|
|
},
|
||
|
|
data:data
|
||
|
|
}]
|
||
|
|
};
|
||
|
|
}
|
||
|
|
export {drawInformationEchart}
|
||
|
|
|