echarts饼图在中间显示百分比,使用graphic
setEchartOption(val) {
const seriesData = [
{ value: 1048, name: '完成值' },
{ value: 735, name: '目标值' }
]
const option = {
grid: {
containLabel: true
},
tooltip: {
trigger: 'item'
},
color: ['#74A0FA', '#73DEB3'],
series: [
{
type: 'pie',
radius: ['50%', '80%'],
avoidLabelOverlap: false,
label: {
show: false,
position: 'center'
},
labelLine: {
show: false
},
data: seriesData
}
],
// 绘制中间的百分比
graphic: {
type: 'text',
left: 'center',
top: 'center',
style: {
text: Math.round((seriesData[0].value / seriesData[1].value) * 100) + '%',
textAlign: 'center',
fill: '#666666',
fontSize: 20
}
}
}
this[`chart${val}`].setOption(option)
}
标签:百分比,false,center,value,中间,echarts,seriesData From: https://www.cnblogs.com/hong1/p/18546487