如何在Recharts的PieChart饼图中实现百分比数据展示

实现方案 #

你之前提前将原始数值乘100的操作会干扰饼图本身的占比计算逻辑，所以会出现数据加载异常的问题。Recharts本身提供了内容格式化能力，不需要修改原始数值，只需要添加对应配置即可实现百分比展示，具体调整如下：

1. 修正变量声明顺序

你当前代码先定义data01再声明asset_1、asset_3，会因为变量提升导致data01中的value为undefined，需要先计算资产数值，再定义数据集：

// 先计算原始数值，不需要提前乘100
var asset_1 = assets.titles[0].values[0].value
var asset_3 = assets.titles[1].values[0].value
// 再定义数据集
const data01 = [
  { name: "Dönen Varlıklar", value: asset_1 },
  { name: "Duran Varlıklar", value: asset_3 },
];

2. 配置扇区百分比标签与提示框

在<Pie>组件内添加<LabelList>显示扇区内的百分比文本，同时给<Tooltip>添加格式化配置，让悬浮提示也显示百分比，另外你原代码中data01.map逻辑缺少JSX包裹符{}，也需要同步修正：

<PieChart width={500} height={300}>
  <Pie
    data={data01}
    cx={250}
    cy={130}
    innerRadius={60}
    outerRadius={80}
    fill="#8884d8"
    paddingAngle={5}
    cornerRadius={20}
    dataKey="value"                                                                                             
  > 
    {/* 补充JSX包裹符{} */}
    {data01.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
    ))}
    {/* 添加LabelList显示扇区内百分比 */}
    <LabelList 
      dataKey="value" 
      position="inside" 
      formatter={(value) => `${(value * 100).toFixed(1)}%`} 
      fill="#fff"
    />
  </Pie>
  <Legend/>
  {/* 配置悬浮提示框显示百分比 */}
  <Tooltip 
    formatter={(value) => `${(value * 100).toFixed(1)}%`}
  />
</PieChart>

调整后饼图扇区内会直接显示对应类别的占比百分比，鼠标悬浮时的提示框也会同步显示百分比内容，不会影响饼图本身的占比计算逻辑。
你当前的原始饼图效果参考：

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