如何自定义Recharts饼图：修改标签颜色与位置

问题1：设置外部标签统一字体颜色 #

外部门店名称标签默认会继承对应切片的颜色，要改为单一固定颜色，直接给<Pie>组件添加labelStyle属性，指定统一的字体颜色即可：

<Pie
  data={chartData}
  dataKey="value"
  nameKey="name"
  outerRadius={90}
  label={(entry) => entry.name}
  cx="50%"
  cy="50%"
  labelStyle={{ fill: '#333' }} // 这里设置统一颜色，比如深灰色，可按需修改
>

问题2：调整内部百分比标签到切片较大区域 #

内部百分比标签默认position="insideRight"会贴近切片右侧边缘，要移到切片更宽敞的区域，可通过以下方式调整：

方式1：调整位置与偏移量 #

将position改为"inside"，并添加offset属性让标签向中心偏移，避免挤在边缘：

<LabelList 
  dataKey="showValue" 
  position="inside" 
  offset={-15} // 负数表示向中心移动，数值可根据图表实际大小调整
/>

方式2：自定义标签渲染（更灵活） #

如果存在过小的切片，还可以自定义逻辑，只在足够大的切片内显示标签，或精准调整位置：

<LabelList 
  dataKey="showValue"
  renderItem={(props) => {
    // 假设value大于10的切片足够容纳标签，可按需修改阈值
    if (props.payload.value > 10) {
      return (
        <text 
          x={props.x - 10} // 向左偏移，让标签处于切片中心区域
          y={props.y}
          fill="#fff"
          textAnchor="middle"
        >
          {props.payload.showValue}
        </text>
      );
    }
    return null;
  }}
/>

修改后的完整代码 #

<ResponsiveContainer width="100%" height="100%">
  <PieChart margin={{ right: 10, left: 10 }}>
    <Pie
      data={chartData}
      dataKey="value"
      nameKey="name"
      outerRadius={90}
      label={(entry) => entry.name}
      cx="50%"
      cy="50%"
      labelStyle={{ fill: '#333' }} // 统一外部标签颜色
    >
      <LabelList 
        dataKey="showValue" 
        position="inside" 
        offset={-15} // 调整标签到切片宽敞区域
      />
      {chartData.map((entry, index) => (
        <Cell
          key={`cell-${index}`}
          fill={`rgba(131, 54, 235, ${100 - index * 6}%)`}
          fontWeight={300}
        />
      ))}
    </Pie>
  </PieChart>
</ResponsiveContainer>

内容的提问来源于stack exchange，提问作者José Carlos