1. 选择图表类型

传入简单的js对象（通常是一个数组）生成简单的图表。

2. 添加需要的组件

const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
const renderLineChart = (
  <LineChart width={600} height={300} data={data}>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    <XAxis dataKey="name" />
    <YAxis />
  </LineChart>

3. 调整部分组件的配置

例如，可以调整 margin-right 的值来保证有足够的空间展示 x 轴最右侧的刻度，也可以调整网格的线型。

4. 丰富交互

添加 Tooltip 组件就能很简单的实现浮窗展示提示信息的功能。

import { LineChart, Line, CartesianGrid, XAxis, YAxis, Tooltip } from 'recharts';
const data = [{name: 'Page A', uv: 400, pv: 2400, amt: 2400}, ...];
const renderLineChart = (
  <LineChart width={600} height={300} data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
    <YAxis />
  </LineChart>
) ;

5. 实现自定义功能

const renderLineChart = (
  <LineChart width={600} height={300} data={data} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>
    <Line type="monotone" dataKey="uv" stroke="#8884d8" />
    <CartesianGrid stroke="#ccc" strokeDasharray="5 5" />
    <XAxis dataKey="name" tick={renderCustomAxisTick} />
    <YAxis />
    <Tooltip />
) ;