实现效果：
代码：
const option = {
// 环形图中间文字
title: {
text: '1200',
subtext: '总户数',
textStyle: {
fontSize: 16,
color: '#333',
fontWeight: 600,
},
subtextStyle: {
fontSize: 12,
color: '#333',
fontWeight: 400,
},
textAlign: 'center', // 图例文字居中显示
x: '23%', // 距离左边的距离
y: '37%', // 距离上边的距离
},
legend: {
orient: 'vertical',
right: '10%',
// top: 'center',
top: '8%',
icon: 'circle',
// itemGap: 15, // 图例间距
itemWidth: 10,
data: ['正常液位时间', '超警戒时间', '异常时间'],
textStyle: {
fontSize: 14,
color: '#333',
lineHeight: 30,
rich: {
a: {
color: '#4178fd',
fontSize: 16,
fontWeight: 600,
lineHeight: 0, // 这里是实现图例小圆点对齐上方一行的关键
padding: [16, 0, 0, 0], // 设置和上一行之间的间距 [上 右 下 左]
},
b: {
color: '#00ce98',
fontSize: 16,
fontWeight: 600,
lineHeight: 0,
padding: [16, 0, 0, 0],
},
c: {
color: '#fec856',
fontSize: 16,
fontWeight: 600,
lineHeight: 0,
padding: [16, 0, 0, 0],
},
},
},
formatter: (name) => {
let data: string = '';
if (name === '正常液位时间') {
data = (Number(res.data[`${key}safe`]) * 100).toFixed();
const text = `30户 | ${data}%`;
return `${name}\n{a|${text}}`;
}
if (name === '超警戒时间') {
data = (Number(res.data[`${key}warn`]) * 100).toFixed();
const text = `110户 | ${data}%`;
return `${name}\n{b|${text}}`;
}
if (name === '异常时间') {
data = (Number(res.data[`${key}unknown`]) * 100).toFixed();
const text = `50户 | ${data}%`;
return `${name}\n{c|${text}}`;
}
},
},
series: [
{
name: '时间占比',
type: 'pie',
radius: ['43%', '58%'],
center: ['25%', '48%'], // 左边的距离，上边的距离
color: ['#4178fd', '#00ce98', '#fec856'],
data: [
{
value: Number(res.data[key + 'safe']),
name: '正常液位时间',
label: {
show: false,
},
},
{
value: Number(res.data[key + 'warn']),
name: '超警戒时间',
label: {
show: false,
},
},
{
value: Number(res.data[key + 'unknown']),
name: '异常时间',
label: {
show: false,
},
},
],
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
};