option = {
legend: {
right:50,
top: '40%',
orient: 'vertical',
icon: 'circle',
itemWidth: 14 ,
itemHeight: 14 ,
formatter: (name) => {
let data = [{name:'第1',value:5},{name:'第2',value:10},{name:'第3',value:15},{name:'第4',value:20},];
let total = 0;
let target = [];
for (let i = 0, l = data.length; i < l; i++) {
total += data[i].value;
if (data[i].name == name) {
target = data[i].value;
}
}
let arr = [ '{a|' + name + '}', '{b|' + ((target / total) * 100).toFixed(2) + '%}' ];
console.log(arr);
return arr.join(' ');
},
textStyle: {
fontSize: 14 ,
color: '#000',
align: 'right',
width: 220 ,
height: 24,
rich: {
a: {
fontSize: 20 ,
color: '#6DCEF3',
verticalAlign: 'top',
align: 'left',
padding: [0, 15, 0, 0]
},
b: {
fontSize: 20 ,
color: '#000',
verticalAlign: 'top',
align: 'right'
}
},
padding: [0, 0, -4, 0] // 图标位置
}
},
series: [
{
radius: ['40%', '60%'],
center: ['30%', '50%'],
label: {
show: false,
position: 'center',
fontSize: 14,
formatter: '{d}%' //返回百分比
},
emphasis: {
label: {
show: true,
fontSize: 30 ,
fontWeight: 'bold'
}
},
itemStyle: {
borderColor: '#fff',
borderWidth: 2 ,
},
data:[{name:'第1',value:5},{name:'第2',value:10},{name:'第3',value:15},{name:'第4',value:20},],
type: 'pie'
}
]
};
效果图：
