显示标签的同时,始终显示饼图中间文字
let _data = this.chartData.slice(1).map((item) => ({
name: item.productName,
value: Number(item.stock),
}));
this.chart.setOption({
tooltip: {
trigger: 'item',
},
graphic: { // 重点在这里(显示饼图中间文字)
type: 'text',
left: 'center',
top: '42%',
style: {
text: '{total|' + this.chartData[0].stock + '}' + '\n\r' + '{active|库存总数}',
textAlign: 'center',
rich: {
total: { // 库存数量:89 (this.chartData[0].stock)
fontSize: 22,
fill: '#FFFFFF',
fontWeight: 'bold',
},
active: { // "库存总数"文字
fontSize: 12,
fill: 'rgba(255, 255, 255, 0.6)',
lineHeight: 30,
},
},
},
},
series: [
{
name: '',
type: 'pie',
radius: ['40%', '70%'],
avoidLabelOverlap: true, // 开启避免重叠
padAngle: 2, // 扇区间隙
label: { // 标签
position: 'outer',
formatter: '{d}% {b}', // 标签为: 百分比 + name
color: '#fff',
},
data: _data,
},
],
});
如果不想显示标签:在 label 里加上 show: false