常见的图形库系列
Victory 图表基于 React，适合 React 项目，支持移动端
入门
Recharts 是一个基于 React 的图表库，专为 React 项目设计，使用简单且功能强大。
例子
[javascript]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41<% 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 %>
