在rechart X轴中设置日和月日期

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

const data = [
  { date: '2022-01-01', value: 10 },
  { date: '2022-01-02', value: 20 },
  { date: '2022-01-03', value: 15 },
  // 其他日期数据
];

<LineChart width={500} height={300} data={data}>
  <XAxis dataKey="date" tickFormatter={(date) => formatDate(date)} />
  <YAxis />
  <CartesianGrid strokeDasharray="3 3" />
  <Tooltip />
  <Legend />
  <Line type="monotone" dataKey="value" stroke="#8884d8" activeDot={{ r: 8 }} />
</LineChart>

const formatDate = (date) => {
  const options = { year: 'numeric', month: 'numeric', day: 'numeric' };
  const formattedDate = new Date(date).toLocaleDateString('en-US', options);
  return formattedDate;
};