Recharts 入门例子

老马啸西风2017年5月27日大约 2 分钟

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

例子



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 (
        
            Recharts 折线图示例
            
                 {/* 网格线 */}
                 {/* X 轴 */}
                 {/* Y 轴 */}
                 {/* 提示框 */}
                 {/* 图例 */}
                 {/* 第一条折线 */}
                 {/* 第二条折线 */}
            
        
    );
}

export default App;

关键点说明

LineChart：折线图容器，用于包裹其他 Recharts 组件。
Line：折线组件，dataKey 指定数据字段，stroke 设置折线颜色。
XAxis 和 YAxis：X 轴和 Y 轴组件，dataKey 指定 X 轴的数据字段。
CartesianGrid：网格线组件，strokeDasharray 设置虚线样式。
Tooltip：提示框组件，鼠标悬停时显示数据详情。
Legend：图例组件，用于切换显示/隐藏折线。

贡献者

binbin.hou

Recharts 入门例子

常见的图形库系列

入门

例子

关键点说明

贡献者