如何为Recharts PieChart的Cell添加渐变色填充？

算力阿峰

2026-8-16

实现Recharts PieChart Cell的渐变色填充

当然可以给Recharts PieChart的Cell添加渐变色填充，核心是利用SVG的渐变定义，结合Recharts组件实现。以下是具体实现方案：

核心思路

Recharts支持直接使用SVG的<defs>标签定义渐变，然后在<Cell>的fill属性中引用渐变的ID，替代原来的纯色值。

完整代码示例

1. 定义渐变配置

首先准备渐变的起止色数组，对应每个扇形的渐变效果：

// 示例渐变配置，可根据需求修改颜色
const GRADIENTS = [
  { start: '#ff7300', end: '#ffec00' },
  { start: '#3b82f6', end: '#06b6d4' },
  { start: '#10b981', end: '#f59e0b' },
  // 可添加更多渐变组
];

2. 修改PieChart组件

在PieChart内部添加<defs>定义渐变，同时调整Cell的fill属性引用渐变：

<PieChart width={size} height={size} id={value}>
  {/* 定义SVG渐变 */}
  <defs>
    {GRADIENTS.map((grad, idx) => (
      <RadialGradient
        key={`grad-${idx}`}
        id={`pie-gradient-${idx}`}
        cx="50%"
        cy="50%"
        r="50%"
        fx="50%"
        fy="50%"
      >
        <stop offset="0%" stopColor={grad.start} stopOpacity={1} />
        <stop offset="100%" stopColor={grad.end} stopOpacity={1} />
      </RadialGradient>
    ))}
  </defs>

  <Pie data={data}>
    {data.map((_, idx) => (
      <Cell
        key={`cell-${idx}`}
        fill={`url(#pie-gradient-${idx % GRADIENTS.length})`}
      />
    ))}
  </Pie>
</PieChart>

参数调整说明

渐变类型：示例用的是RadialGradient（径向渐变），适配你图中从中心向外的渐变效果；如果需要线性渐变，可替换为LinearGradient，通过x1、y1、x2、y2控制渐变方向（比如x1="0%" y1="0%" x2="100%" y2="0%"表示水平渐变）。
渐变参数：调整offset（颜色节点位置）、stopColor（颜色值）、stopOpacity（透明度），可以精准匹配你想要的视觉效果。
循环复用：如果数据长度超过渐变配置数量，用idx % GRADIENTS.length循环复用渐变组。