如何移除Recharts饼图扇区点击时出现的蓝色矩形？

你看到的蓝色矩形是Recharts中Tooltip组件默认的光标指示器（cursor），可通过以下两种方式移除：

方法一：直接禁用光标指示器 #

如果不需要这个矩形指示器，给Tooltip组件添加cursor={false}属性即可：

<Tooltip cursor={false} />

方法二：隐藏光标样式（保留Tooltip提示框） #

若要保留Tooltip的内容提示，仅隐藏蓝色矩形，可将光标样式设置为完全透明：

<Tooltip cursor={{ stroke: 'transparent', strokeWidth: 0 }} />

修改后的完整代码示例 #

<PieChart width={800} height={400} onMouseEnter={this.onPieEnter}>
  <Pie
    data={data}
    cx={120}
    cy={200}
    innerRadius={60}
    outerRadius={80}
    fill="#8884d8"
    paddingAngle={5}
    dataKey="value"
  >
    {/* 禁用光标指示器 */}
    <Tooltip cursor={false} />
    {data.map((entry, index) => (
      <Cell 
        stroke="5" 
        style={{
          filter: `drop-shadow(0px 0px 5px ${COLORS[index % COLORS.length]}`
        }}
        key={`cell-${index}`} 
        fill={COLORS[index % COLORS.length]} 
      />
    ))}
  </Pie>
  <Pie
    data={data}
    cx={420}
    cy={200}
    startAngle={180}
    endAngle={0}
    innerRadius={60}
    outerRadius={80}
    fill="#8884d8"
    paddingAngle={5}
    dataKey="value"
  >
    {data.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
    ))}
  </Pie>
</PieChart>

如果第二个饼图也出现相同问题，给它也添加带cursor={false}的Tooltip组件即可。

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