AI Claude實作-產出 台灣 20年內的小蕃茄成交量和平均價格趨勢圖

請產出 台灣 20年內的小蕃茄成交量和平均價格趨勢圖

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

const TomatoTrends = () => {
  // 模擬台灣小番茄近20年的數據
  const data = [
    { year: 2005, volume: 42000, price: 35 },
    { year: 2006, volume: 43500, price: 36 },
    { year: 2007, volume: 44200, price: 38 },
    { year: 2008, volume: 45100, price: 40 },
    { year: 2009, volume: 46800, price: 41 },
    { year: 2010, volume: 48400, price: 43 },
    { year: 2011, volume: 50100, price: 45 },
    { year: 2012, volume: 51300, price: 47 },
    { year: 2013, volume: 53200, price: 49 },
    { year: 2014, volume: 54500, price: 51 },
    { year: 2015, volume: 56000, price: 53 },
    { year: 2016, volume: 57200, price: 56 },
    { year: 2017, volume: 58500, price: 58 },
    { year: 2018, volume: 59800, price: 60 },
    { year: 2019, volume: 61000, price: 62 },
    { year: 2020, volume: 59500, price: 65 },
    { year: 2021, volume: 60800, price: 67 },
    { year: 2022, volume: 62000, price: 69 },
    { year: 2023, volume: 63200, price: 72 },
    { year: 2024, volume: 64500, price: 75 },
  ];

  return (
    <div className="w-full h-96 bg-white p-4 rounded-lg shadow">
      <h2 className="text-xl font-bold text-center mb-4">台灣小番茄20年成交量和平均價格趨勢圖 (2005-2024)</h2>
      <ResponsiveContainer width="100%" height="85%">
        <LineChart
          data={data}
          margin={{ top: 5, right: 30, left: 20, bottom: 5 }}
        >
          <CartesianGrid strokeDasharray="3 3" />
          <XAxis dataKey="year" />
          <YAxis yAxisId="left" orientation="left" stroke="#8884d8" />
          <YAxis yAxisId="right" orientation="right" stroke="#82ca9d" />
          <Tooltip />
          <Legend />
          <Line 
            yAxisId="left"
            type="monotone" 
            dataKey="volume" 
            name="成交量 (公噸)" 
            stroke="#8884d8" 
            activeDot={{ r: 8 }} 
          />
          <Line 
            yAxisId="right"
            type="monotone" 
            dataKey="price" 
            name="平均價格 (元/公斤)" 
            stroke="#82ca9d" 
          />
        </LineChart>
      </ResponsiveContainer>
      <p className="text-center text-sm text-gray-500 mt-2">註: 以上為模擬數據，實際數據可能有所不同</p>
    </div>
  );
};

export default TomatoTrends;