如何在Recharts中实现表格悬停时高亮折线图对应区域

方案一：利用Recharts内置属性结合状态控制 #

Recharts的Line组件支持通过状态切换样式实现高亮，步骤如下：

1. 定义高亮状态
   在组件中维护当前需要高亮的事件标识：

const [highlightedEventKey, setHighlightedEventKey] = useState<string | null>(null);

2. 表格行绑定交互事件
   给表格每行添加鼠标移入/移出事件，更新高亮状态：

<table>
  <tbody>
    {eventList.map(item => (
      <tr
        key={item.key}
        onMouseEnter={() => setHighlightedEventKey(item.key)}
        onMouseLeave={() => setHighlightedEventKey(null)}
      >
        <td>{item.name}</td>
        <td>{item.desc}</td>
      </tr>
    ))}
  </tbody>
</table>

3. 折线组件配置高亮样式
   在Line组件中根据状态切换样式：

<LineChart data={chartDataset}>
  {/* X轴、Y轴等基础配置 */}
  {eventList.map(item => (
    <Line
      key={item.key}
      dataKey={item.key}
      stroke={highlightedEventKey === item.key ? '#ff5252' : '#999'}
      strokeWidth={highlightedEventKey === item.key ? 3 : 1}
      activeDot={{ r: 7, fill: '#ff5252' }}
    />
  ))}
</LineChart>

方案二：自定义区域高亮（针对折线周边区域） #

如果需要高亮折线对应的整片区域，可搭配Area组件实现：

1. 添加Area组件并控制可见性
   为每个折线匹配一个Area组件，默认隐藏，高亮时显示：

<LineChart data={chartDataset}>
  {/* 基础配置 */}
  {eventList.map(item => (
    <>
      <Line key={item.key} dataKey={item.key} stroke="#999" strokeWidth={1} />
      <Area
        key={`area-${item.key}`}
        dataKey={item.key}
        fill="rgba(255,82,82,0.2)"
        stroke="none"
        visibility={highlightedEventKey === item.key ? 'visible' : 'hidden'}
      />
    </>
  ))}
</LineChart>

2. 表格交互逻辑同方案一
   通过表格行的鼠标事件更新highlightedEventKey状态即可。

关键注意事项 #

• 确保折线的dataKey与表格事件的标识（如key）完全对应，避免状态匹配错误
• 若折线数量较多，可使用React.memo包裹折线/区域组件，减少不必要的重渲染
• 可结合Tooltip组件同步显示高亮事件的详情，提升交互体验

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