欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 房产 > 家装 > echarts显示/隐藏标签的同时,始终显示饼图中间文字

echarts显示/隐藏标签的同时,始终显示饼图中间文字

2025/11/9 1:17:15 来源:https://blog.csdn.net/m0_59962820/article/details/148423425  浏览:    关键词: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

 

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词