echarts 饼图在中间显示百分比
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)
}
本文来自博客园,作者:hong_li,转载请注明原文链接:https://www.cnblogs.com/hong1/p/18546487