如何在Recharts多层堆叠环形图的扇区内部添加自定义标签文本

解决方案 #

你可以通过配置Pie组件的label属性的position参数，同时关闭标签引导线实现扇区内部显示标签：

1. 给需要显示内部标签的Pie组件添加labelLine={false}属性，隐藏外部引导线
2. 把label属性从布尔值改为配置对象，指定position: 'inside'，还可以自定义文字颜色、大小等样式

修改后的核心代码示例：

<PieChart width={1000} height={800}>
  <Pie 
    data={data02} 
    dataKey="value" 
    nameKey="name" 
    cx="50%" 
    cy="50%" 
    innerRadius={50} 
    outerRadius={70} 
    labelLine={false}
    label={{ position: 'inside', fill: '#fff', fontSize: 11 }}
  />
  <Pie 
    data={data03} 
    dataKey="value" 
    nameKey="name" 
    cx="50%" 
    cy="50%" 
    innerRadius={70} 
    outerRadius={90} 
    fill="#77D970" 
    labelLine={false}
    label={{ position: 'inside', fill: '#fff', fontSize: 11 }}
  />
  <Pie 
    data={data04} 
    dataKey="value" 
    nameKey="name" 
    cx="50%" 
    cy="50%" 
    innerRadius={90} 
    outerRadius={110} 
    fill="#77D970" 
    labelLine={false}
    label={{ position: 'inside', fill: '#fff', fontSize: 11 }}
  />
  <Pie 
    data={data05} 
    dataKey="value" 
    nameKey="name" 
    cx="50%" 
    cy="50%" 
    innerRadius={110} 
    outerRadius={130} 
    fill="#77D970" 
    labelLine={false}
    label={{ position: 'inside', fill: '#fff', fontSize: 12 }}
  />
  <Pie 
    data={data06} 
    dataKey="value" 
    nameKey="name" 
    cx="50%" 
    cy="50%" 
    innerRadius={130} 
    outerRadius={150} 
    fill="#D5D5D5" 
    labelLine={false}
    label={{ position: 'inside', fill: '#333', fontSize: 12 }}
  />
  <Pie 
    data={data07} 
    dataKey="value" 
    nameKey="name" 
    cx="50%" 
    cy="50%" 
    innerRadius={150} 
    outerRadius={170} 
    fill="#4B6587" 
    labelLine={false}
    label={{ position: 'inside', fill: '#fff', fontSize: 12 }}
  />
</PieChart>

如果需要自定义标签显示内容，可以给label传渲染函数：

label={({ name, value }) => `${name}:${value}`}

注意事项 #

• 内层环形宽度较小的情况下，可以适当缩小字体大小避免文字超出扇区
• 如果仅需要部分层显示标签，仅给对应层添加上述配置即可

内容的提问来源于stack exchange，提问作者Zohair Ahmed