入门

Recharts 是一个基于 React 的图表库，专为 React 项目设计，使用简单且功能强大。

例子

<% raw %>

import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

// 数据
const data = [
    { name: 'Jan', uv: 4000, pv: 2400, amt: 2400 },
    { name: 'Feb', uv: 3000, pv: 1398, amt: 2210 },
    { name: 'Mar', uv: 2000, pv: 9800, amt: 2290 },
    { name: 'Apr', uv: 2780, pv: 3908, amt: 2000 },
    { name: 'May', uv: 1890, pv: 4800, amt: 2181 },
    { name: 'Jun', uv: 2390, pv: 3800, amt: 2500 },
    { name: 'Jul', uv: 3490, pv: 4300, amt: 2100 },
];

function App() {
    return (
        <div style=>
            <h1>Recharts 折线图示例</h1>
            <LineChart
                width={800}
                height={400}
                data={data}
                margin=
            >
                <CartesianGrid strokeDasharray="3 3" /> {/* 网格线 */}
                <XAxis dataKey="name" /> {/* X 轴 */}
                <YAxis /> {/* Y 轴 */}
                <Tooltip /> {/* 提示框 */}
                <Legend /> {/* 图例 */}
                <Line type="monotone" dataKey="uv" stroke="#8884d8" /> {/* 第一条折线 */}
                <Line type="monotone" dataKey="pv" stroke="#82ca9d" /> {/* 第二条折线 */}
            </LineChart>
        </div>
    );
}

export default App;

<% endraw %>

关键点说明