Recharts饼图仅显示部分标签时，未返回标签的标签线未消失问题求助

你当前的问题是：通过renderLabel和renderCount仅显示数值超过总数值5%的标签与数值，但隐藏标签时，饼图的标签线仍会保留。

解决方法是通过Pie组件的labelLine属性控制标签线的显示：

• 给Pie组件添加labelLine属性，传入判断函数：当数据项满足显示条件时返回默认配置（或自定义样式），不满足时返回false来隐藏标签线。

优化后的完整代码如下：

<Pie 
  data={dataPie} 
  label={renderLabel} 
  // 控制标签线是否显示
  labelLine={(data) => data.value > ((parseInt(label)*5)/100) ? {} : false}
  cx="55%" 
  cy="52%" 
  outerRadius="70%" 
  innerRadius={75} 
> 
  <Label fill="black" value={label} position="center" />
  <LabelList dy={-1} fill="white" dataKey={renderCount} position="inside" angle="0" stroke="none" />
</Pie>

const renderLabel = (data) => {
  if(data.value > ((parseInt(label)*5)/100)){
    return data.name;
  }
}

const renderCount = (data) => {
  if(data.value > ((parseInt(label)*5)/100)){
    return data.value;
  }
}

补充说明 #

如果需要对显示的标签线自定义样式，可以在返回的对象中配置相关属性，例如：

labelLine={(data) => data.value > ((parseInt(label)*5)/100) ? { stroke: '#666', strokeWidth: 1 } : false}

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