Recharts 完整指南：用 React 声明式写出生产级图表库

Recharts 完整指南：用 React 声明式写出生产级图表库

【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts

Recharts 是一款基于 React 和 D3 的声明式图表库，图表写成普通 React 组件，数据驱动渲染，不用手写 SVG 坐标。

每次改数据，tooltip 和图例都要手动重算

做个后台看板时，最烦的不是画图，是同步状态。数据一更新，tooltip 位置要重算、图例要重画、堆叠顺序对不齐，手写 SVG 方案里这些活全砸给你。

Recharts 的思路是把 D3 的能力包进普通 React 组件：状态、数据、渲染全走 React 生命周期，组件声明一次，重绘自动发生。

核心能力拆解

声明式组件组合：写完 JSX 就出图

LineChart由坐标轴、网格、tooltip、折线独立组合而成，每个元素都是可单独替换的 React 组件，默认 tooltip 换成自定义 HTML 版只改一行。数据单向流入，React 自动处理坐标计算与重绘，改数据就是改 state，不用手动同步 DOM。

<LineChart width={400} height={400} data={data}> <XAxis dataKey="name" /> <Line dataKey="uv" type="monotone" stroke="#ff7300" /> </LineChart>

零配置自适应布局：ResizeObserver 接管尺寸

ResponsiveContainer（监听容器尺寸变化的包装组件）让图表自动填满父元素并跟随窗口缩放。移动适配不用写媒体查询，一个包裹组件解决。

用 Hooks 读图表内部状态：自定义渲染不碰 DOM

轴刻度、domain、tooltip 激活态这些内部状态，都开放成了 hooks 模块。自己画十字准线时直接取"当前激活数据点"，不用从渲染结果里反向扒数据。主题系统同理：颜色、线宽、字体集中在一个对象里（见 theme 模块），换主题不用逐组件改 style。

多图表联动：syncId 一行对齐

多个图表配同一个 syncId 即联动，支持 index、value 和自定义回调三种同步方式。hover 一张图，另一张 tooltip 自动跟随，不用自己传状态。

真实场景落地

• 数据大屏开发者，做多指标对比：组合图里混排折线和堆叠柱图，配Brush（底部时间区间拖动条）让业务方自己框选范围。
• 独立开发者，写带图表的小工具：ResponsiveContainer一裹，同一份代码在手机和桌面都正常显示。
• 设计师，做品牌换肤：替换主题对象，整个看板的配色自动切换，不用逐图改。

跟同类比强在哪，弱在哪

比直接手写 D3 操作 SVG 省事：声明式组件加内置状态管理，tooltip、图例全是现成的，D3 只留在底层做尺度和布局计算。比 canvas 类库多了 SVG 的可访问性和可样式化，能用 CSS 直接改图表样式。

局限也说一句：超大数据点的实时图表，SVG 渲染性能不及 canvas 方案，具体表现以仓库文档和实测为准。

想先感受下，clone 仓库跑一遍 storybook 里的示例最快：

git clone https://gitcode.com/GitHub_Trending/re/recharts

【免费下载链接】rechartsRedefined chart library built with React and D3项目地址: https://gitcode.com/GitHub_Trending/re/recharts