如何在react中绘制具有共享x轴的多条线？

npm install recharts
# 或者
yarn add recharts

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

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

const MultiLineChart = () => (
  <ResponsiveContainer width="100%" height={400}>
    <LineChart
      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="series1" stroke="#8884d8" />
      <Line type="monotone" dataKey="series2" stroke="#82ca9d" />
      <Line type="monotone" dataKey="series3" stroke="#ffc658" />
    </LineChart>
  </ResponsiveContainer>
);

export default MultiLineChart;

import React from 'react';
import ReactDOM from 'react-dom';
import MultiLineChart from './MultiLineChart';

const App = () => (
  <div>
    <h1>Multi-Line Chart with Shared X-Axis</h1>
    <MultiLineChart />
  </div>
);

ReactDOM.render(<App />, document.getElementById('root'));