Echarts 的餅圖中間添加文字說明 夹厌，主要使用graphic、title來完成配置裆悄，效果圖如下：
image.png
直接上代碼：
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option = {
tooltip: {
trigger: 'item',
formatter: "{a} <br/>: {c} (9vzdpl3%)"
},
color:["#27D9C8","#D8D8D8"],
title:{
text:"80%",
left:"center",
top:"50%",
textStyle:{
color:"#27D9C8",
fontSize:36,
align:"center"
}
},
graphic:{
type:"text",
left:"center",
top:"40%",
style:{
text:"運(yùn)動(dòng)達(dá)標(biāo)率",
textAlign:"center",
fill:"#333",
fontSize:20,
fontWeight:700
}
},
series: [
{
name: '運(yùn)動(dòng)情況',
type: 'pie',
radius: ['65%', '70%'],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: 'center'
},
},
data: [
{ value: 80, name: '已完成' },
{ value: 20, name: '未完成' },
]
}
]
};
