Hey，我看了你遇到的问题——想在饼图的图例旁边显示对应数值，但一直拿到undefined，确实挺闹心的。我帮你梳理下解决思路，应该能快速搞定～

首先你的数据结构是没问题的，每个项都包含name和value字段，问题大概率出在Legend组件的配置上。默认的图例只会显示名称，要带上数值需要自定义处理，这里给你两个实用方案：

方案一：用formatter快速格式化 #

Recharts的Legend组件提供了formatter属性，它会接收每个图例项的payload（也就是你的数据对象），你可以直接返回拼接好的名称+数值：

<Legend
  layout="vertical"
  verticalAlign="middle"
  align="right"
  wrapperStyle={{
    fontFamily: 'Lato',
    fontWeight: 400,
    color: '#000' // 注意这里应该是color，不是你之前写的fontColor哦
  }}
  formatter={(value, entry) => `${entry.name}: ${entry.value}`}
/>

这里要注意，formatter的第二个参数entry就是你的完整数据项，直接取entry.value就不会出现undefined啦。

方案二：自定义renderItem实现更灵活的样式 #

如果需要调整图例的布局或样式，用renderItem自定义渲染项会更灵活：

<Legend
  layout="vertical"
  verticalAlign="middle"
  align="right"
  wrapperStyle={{
    fontFamily: 'Lato',
    fontWeight: 400,
    color: '#000'
  }}
  renderItem={(props) => {
    const { payload, color } = props;
    return (
      <div style={{ display: 'flex', alignItems: 'center', marginBottom: '8px' }}>
        <span style={{ width: '12px', height: '12px', borderRadius: '50%', backgroundColor: color, marginRight: '8px' }} />
        <span>{payload.name}: {payload.value}</span>
      </div>
    );
  }}
/>

这里props.payload就是你的数据对象，直接访问payload.value就能拿到对应数值，完美解决undefined的问题。

之前你遇到undefined，大概率是没有正确获取到数据项的上下文——比如误把formatter的第一个参数当成了完整数据，或者没有正确访问到数据对象里的value字段，调整后应该就能正常显示啦～

备注：内容来源于stack exchange，提问作者Ram01