如何在recharts中使用.map函数创建双向LineChart

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

const data = [
  { name: 'A', value1: 10, value2: 20 },
  { name: 'B', value1: 15, value2: 25 },
  { name: 'C', value1: 20, value2: 30 },
  // ...
];

const lines = ['value1', 'value2'].map((valueKey, index) => (
  <Line key={index} type="monotone" dataKey={valueKey} stroke={`#${Math.floor(Math.random()*16777215).toString(16)}`} />
));

const MyLineChart = () => (
  <LineChart width={500} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    {lines}
  </LineChart>
);

const App = () => (
  <div>
    <h1>双向LineChart示例</h1>
    <MyLineChart />
  </div>
);