Recharts介绍

简介

Recharts 是一个基于 React 和 D3 的轻量级图表库，可以用于数据可视化，包括折线图、区域图、条形图、饼图等常见图表类型。

特点

• 使用 React.js 的组件化思想，易于使用和集成。
• 基于 D3.js 的数据驱动，提供强大的数据可视化功能。
• 支持多种图表类型，方便用户根据需求选择合适的图表。
• 支持响应式设计，可以根据容器的大小自动适应。
• 可以通过自定义组件和样式进行图表的个性化设计。

安装

使用 npm 安装：

npm install recharts --save

快速入门

以下为一个简单的折线图例子：

import React, { PureComponent } from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
 
const data = [
    {
      name: '1月',
      uv: 4000,
      pv: 2400,
      amt: 2400,
    },
    {
      name: '2月',
      uv: 3000,
      pv: 1398,
      amt: 2210,
    },
    {
      name: '3月',
      uv: 2000,
      pv: 9800,
      amt: 2290,
    },
    {
      name: '4月',
      uv: 2780,
      pv: 3908,
      amt: 2000,
    },
    {
      name: '5月',
      uv: 1890,
      pv: 4800,
      amt: 2181,
    },
    {
      name: '6月',
      uv: 2390,
      pv: 3800,
      amt: 2500,
    },
    {
      name: '7月',
      uv: 3490,
      pv: 4300,
      amt: 2100,
    },
];

export default class Example extends PureComponent {
    render() {
        return (
            <LineChart
                width={500}
                height={300}
                data={data}
                margin={{
                    top: 5, right: 30, left: 20, bottom: 5,
                }}
            >
                <CartesianGrid strokeDasharray="3 3" />
                <XAxis dataKey="name" />
                <YAxis />
                <Tooltip />
                <Legend />
                <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
                <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
            </LineChart>
        );
    }
}

图表类型

Recharts 支持多种图表类型，包括但不限于：

• AreaChart
• BarChart
• LineChart
• PieChart
• RadarChart
• ScatterChart

预览

以下为 Recharts 官方网站中的一些预览图：