echarts显示/隐藏标签的同时,始终显示饼图中间文字
显示标签的同时,始终显示饼图中间文字
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}', // 标签为: 百分比 + namecolor: '#fff',},data: _data,},],
});
如果不想显示标签:在 label 里加上 show: false