React中Rechart柱状图圆角问题：值为1时圆角不生效

问题原因 #

当柱状图的长度（垂直布局下为X轴方向）过短，或者设置的radius数值远大于柱子的实际厚度（Y轴方向）时，Rechart会自动忽略圆角渲染，导致小数值的柱子无法显示圆角。

解决方案 #

1. 合理设置圆角半径
   不要使用过大的固定值（比如100），换成与柱子厚度匹配的数值，同时通过数组形式指定仅在需要的角添加圆角（比如仅柱子右端的两个角）。

2. 确保小数值柱子有足够长度
   通过X轴的domain属性设置最小范围，避免小数值的柱子被压缩得太厉害，保证圆角能正常渲染。

3. 同步调整背景的圆角设置
   背景的圆角参数要与柱子的圆角保持一致，避免视觉不协调。

修改后的代码示例 #

<BarChart
  data={data}
  layout="vertical"
>
  <XAxis
    type="number"
    dataKey="total"
    axisLine={false}
    tickLine={false}
    // 确保最小范围，让小数值柱子有足够长度
    domain={[0, Math.max(...data.map(item => item.total), 2)]}
  />
  <YAxis
    type="category"
    dataKey="name"
    axisLine={false}
    tickLine={false}
  />
  <Bar
    dataKey="total"
    // 仅设置柱子右端的两个角为圆角（top-right、bottom-right）
    radius={[0, 10, 10, 0]}
    background={{
      fill: "#eee",
      radius: [0, 10, 10, 0]
    }}
  />
</BarChart>

额外灵活控制方案 #

如果需要确保即使柱子极短也能显示圆角，可以使用cellRender自定义柱子的SVG元素，手动绘制带圆角的矩形：

<Bar
  dataKey="total"
  cellRender={(props) => {
    const { x, y, width, height } = props;
    const radius = Math.min(10, height / 2); // 圆角不超过柱子厚度的一半
    return (
      <rect
        x={x}
        y={y}
        width={width}
        height={height}
        rx={width > radius ? radius : 0} // 柱子长度足够时才显示圆角
        ry={width > radius ? radius : 0}
        fill="#your-color"
      />
    );
  }}
/>

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