diff --git a/frontend/src/pages/Statistics/index.tsx b/frontend/src/pages/Statistics/index.tsx
new file mode 100644
index 0000000..9a36b0b
--- /dev/null
+++ b/frontend/src/pages/Statistics/index.tsx
@@ -0,0 +1,1031 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import * as echarts from 'echarts';
+import { useDataStore } from '../../stores';
+import { exportAllStats } from '../../utils/exportHelper';
+
+const StatisticsPage: React.FC = () => {
+  const {
+    loading,
+    records,
+    trendData,
+    monthlyCompare,
+    fetchRecords,
+    fetchDashboardSummary,
+    fetchTrendData,
+    fetchMonthlyCompare,
+  } = useDataStore();
+
+  const [chartType, setChartType] = useState<'line' | 'bar' | 'pie'>('line');
+  const [period, setPeriod] = useState<'month' | 'year'>('month');
+  const [showToast, setShowToast] = useState(false);
+
+  const trendChartRef = useRef<HTMLDivElement>(null);
+  const pieChartRef = useRef<HTMLDivElement>(null);
+  const compareChartRef = useRef<HTMLDivElement>(null);
+
+  const trendChartInstance = useRef<echarts.ECharts | null>(null);
+  const pieChartInstance = useRef<echarts.ECharts | null>(null);
+  const compareChartInstance = useRef<echarts.ECharts | null>(null);
+
+  // 分类颜色映射
+  const categoryColorMap: Record<string, string> = {
+    '餐饮': '#00c853',
+    '交通': '#3B82F6',
+    '购物': '#ff3d00',
+    '娱乐': '#F59E0B',
+    '其他': '#8B5CF6',
+  };
+
+  // 获取当前年月信息
+  const now = useMemo(() => new Date(), []);
+  const currentYear = now.getFullYear();
+  const currentMonth = now.getMonth() + 1;
+  const lastDay = new Date(currentYear, currentMonth, 0).getDate();
+  const currentMonthStr = `${currentYear}-${String(currentMonth).padStart(2, '0')}`;
+  const startDate = `${currentYear}-${String(currentMonth).padStart(2, '0')}-01`;
+  const endDate = `${currentYear}-${String(currentMonth).padStart(2, '0')}-${String(lastDay).padStart(2, '0')}`;
+
+  // 初始化时获取趋势数据和对比数据
+  useEffect(() => {
+    fetchTrendData(startDate, endDate);
+    fetchMonthlyCompare(currentMonthStr);
+    fetchRecords();
+    fetchDashboardSummary();
+  }, [fetchTrendData, fetchMonthlyCompare, fetchRecords, fetchDashboardSummary, startDate, endDate, currentMonthStr]);
+
+  // 处理趋势数据：月度显示每日数据，年度显示每月聚合
+  const displayData = useMemo(() => {
+    if (period === 'year') {
+      // 年度模式：按月聚合
+      const monthlyMap: Record<string, { date: string; income: number; expense: number }> = {};
+      trendData.forEach((d) => {
+        const month = d.date.substring(0, 7); // '2026-04'
+        if (!monthlyMap[month]) {
+          monthlyMap[month] = { date: month, income: 0, expense: 0 };
+        }
+        monthlyMap[month].income += d.income;
+        monthlyMap[month].expense += d.expense;
+      });
+      return Object.values(monthlyMap);
+    }
+    // 月度模式：返回每日数据
+    return trendData;
+  }, [trendData, period]);
+
+  // 格式化日期标签
+  const formatDateLabel = (dateStr: string) => {
+    if (period === 'year') {
+      const month = parseInt(dateStr.split('-')[1]);
+      return `${month}月`;
+    }
+    const day = parseInt(dateStr.split('-')[2]);
+    return `${day}日`;
+  };
+
+  // 从 records 计算真实分类数据
+  const categoryData = useMemo(() => {
+    // 筛选当前月份的支出记录
+    const expenseRecords = records.filter((record) => {
+      if (record.type !== 'expense') return false;
+      const recordDate = new Date(record.date);
+      return recordDate.getFullYear() === currentYear && recordDate.getMonth() + 1 === currentMonth;
+    });
+
+    // 按分类汇总
+    const categoryMap = new Map<string, number>();
+    expenseRecords.forEach((record) => {
+      const current = categoryMap.get(record.category) || 0;
+      categoryMap.set(record.category, current + Number(record.amount));
+    });
+
+    const result = Array.from(categoryMap.entries())
+      .map(([name, value]) => ({
+        name,
+        value,
+        color: categoryColorMap[name] || '#737373',
+      }))
+      .sort((a, b) => b.value - a.value);
+
+    if (result.length === 0) {
+      return [
+        { name: '餐饮', value: 0, color: '#00c853' },
+        { name: '交通', value: 0, color: '#3B82F6' },
+        { name: '购物', value: 0, color: '#ff3d00' },
+        { name: '娱乐', value: 0, color: '#F59E0B' },
+        { name: '其他', value: 0, color: '#8B5CF6' },
+      ];
+    }
+    return result;
+  }, [records, currentYear, currentMonth]);
+
+  const totalExpense = categoryData.reduce((sum, item) => sum + item.value, 0);
+
+  // 数据变化时更新图表（合并初始化逻辑，避免竞态）
+  useEffect(() => {
+    // useEffect 保证 DOM 已更新，直接执行图表初始化
+    if (chartType === 'pie') {
+      // 切换到饼图时销毁趋势图实例，确保切回时重新初始化
+      if (trendChartInstance.current) {
+        trendChartInstance.current.dispose();
+        trendChartInstance.current = null;
+      }
+      // 修复：切换到饼图时强制重新初始化（销毁旧实例）
+      if (pieChartInstance.current) {
+        pieChartInstance.current.dispose();
+        pieChartInstance.current = null;
+      }
+      if (pieChartRef.current) {
+        pieChartInstance.current = echarts.init(pieChartRef.current);
+      }
+      initPieChart();
+    } else {
+      // 切换到折线图/柱状图时，销毁饼图实例
+      if (pieChartInstance.current) {
+        pieChartInstance.current.dispose();
+        pieChartInstance.current = null;
+      }
+      // 切换到折线图/柱状图时，如果实例不存在或已销毁，重新初始化
+      if (trendChartRef.current && !trendChartInstance.current) {
+        trendChartInstance.current = echarts.init(trendChartRef.current);
+      }
+      if (compareChartRef.current && !compareChartInstance.current) {
+        compareChartInstance.current = echarts.init(compareChartRef.current);
+      }
+      initTrendChart();
+      initCompareChart();
+    }
+  }, [chartType, categoryData, displayData, monthlyCompare, records, period]);
+
+  // 响应式 resize 处理
+  useEffect(() => {
+    const handleResize = () => {
+      trendChartInstance.current?.resize();
+      pieChartInstance.current?.resize();
+      compareChartInstance.current?.resize();
+    };
+    window.addEventListener('resize', handleResize);
+    return () => window.removeEventListener('resize', handleResize);
+  }, []);
+
+  // 空数据提示组件
+  const EmptyChart = ({ message }: { message: string }) => (
+    <div style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      height: '320px',
+      color: '#737373',
+      fontSize: '14px',
+    }}>
+      {message}
+    </div>
+  );
+
+  // 初始化趋势图 - 使用真实数据
+  const initTrendChart = () => {
+    if (!trendChartInstance.current) return;
+
+    const option = {
+      animation: true,
+      animationDuration: 1500,
+      animationEasing: 'cubicOut' as const,
+      tooltip: {
+        trigger: 'axis' as const,
+        backgroundColor: 'rgba(26, 26, 26, 0.95)',
+        borderColor: 'transparent',
+        textStyle: { color: '#fff' },
+        formatter: (params: any) => {
+          let result = `${params[0].axisValue}<br/>`;
+          params.forEach((param: any) => {
+            const color = param.seriesName === '收入' ? '#00c853' : '#ff3d00';
+            const prefix = param.seriesName === '收入' ? '+' : '-';
+            result += `<span style="color:${color}">●</span> ${param.seriesName}: ${prefix}¥${Number(param.value).toLocaleString()}<br/>`;
+          });
+          return result;
+        },
+      },
+      legend: {
+        data: ['收入', '支出'],
+        bottom: 0,
+        textStyle: { color: '#737373' },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '15%',
+        top: '10%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category' as const,
+        boundaryGap: chartType === 'bar',
+        data: displayData.map(d => formatDateLabel(d.date)),
+        axisLine: { lineStyle: { color: '#e5e5e5' } },
+        axisLabel: {
+          color: '#737373',
+          interval: period === 'month' ? 4 : 'auto',
+          fontSize: 11,
+        },
+      },
+      yAxis: {
+        type: 'value' as const,
+        axisLine: { show: false },
+        splitLine: { lineStyle: { color: '#f5f5f5' } },
+        axisLabel: {
+          color: '#737373',
+          formatter: (value: number) => `¥${(value / 1000).toFixed(1)}k`,
+        },
+      },
+      series: chartType === 'bar'
+        ? [
+            {
+              name: '收入',
+              type: 'bar' as const,
+              barWidth: '35%',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#00c853' },
+                  { offset: 1, color: '#00a844' },
+                ]),
+                borderRadius: [4, 4, 0, 0],
+              },
+              data: displayData.map(d => d.income),
+              animationDelay: (idx: number) => idx * 50,
+            },
+            {
+              name: '支出',
+              type: 'bar' as const,
+              barWidth: '35%',
+              itemStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: '#ff3d00' },
+                  { offset: 1, color: '#e63600' },
+                ]),
+                borderRadius: [4, 4, 0, 0],
+              },
+              data: displayData.map(d => d.expense),
+              animationDelay: (idx: number) => idx * 50 + 100,
+            },
+          ]
+        : [
+            {
+              name: '收入',
+              type: 'line' as const,
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: { color: '#00c853', width: 2 },
+              itemStyle: { color: '#00c853' },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(0, 200, 83, 0.3)' },
+                  { offset: 1, color: 'rgba(0, 200, 83, 0.05)' },
+                ]),
+              },
+              data: displayData.map(d => d.income),
+              animationDelay: (idx: number) => idx * 60,
+            },
+            {
+              name: '支出',
+              type: 'line' as const,
+              smooth: true,
+              symbol: 'circle',
+              symbolSize: 6,
+              lineStyle: { color: '#ff3d00', width: 2 },
+              itemStyle: { color: '#ff3d00' },
+              areaStyle: {
+                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                  { offset: 0, color: 'rgba(255, 61, 0, 0.3)' },
+                  { offset: 1, color: 'rgba(255, 61, 0, 0.05)' },
+                ]),
+              },
+              data: displayData.map(d => d.expense),
+              animationDelay: (idx: number) => idx * 60 + 150,
+            },
+          ],
+    };
+
+    trendChartInstance.current.setOption(option, { notMerge: true });
+    trendChartInstance.current.resize();
+  };
+
+  // 初始化饼图
+  const initPieChart = () => {
+    if (!pieChartInstance.current) return;
+
+    const option = {
+      animation: true,
+      animationDuration: 1000,
+      animationEasing: 'cubicOut' as const,
+      tooltip: {
+        trigger: 'item' as const,
+        backgroundColor: 'rgba(26, 26, 26, 0.95)',
+        borderColor: 'transparent',
+        textStyle: { color: '#fff' },
+        formatter: (params: any) => `${params.name}: ¥${Number(params.value).toLocaleString()}<br/>占比: ${params.percent}%`,
+      },
+      series: [
+        {
+          type: 'pie' as const,
+          radius: ['45%', '75%'],
+          center: ['50%', '50%'],
+          avoidLabelOverlap: false,
+          itemStyle: {
+            borderRadius: 4,
+            borderColor: '#fff',
+            borderWidth: 2,
+          },
+          label: {
+            show: true,
+            position: 'center' as const,
+            formatter: () => `总支出\n¥${totalExpense.toLocaleString()}`,
+            fontSize: 16,
+            fontWeight: 600,
+            color: '#1a1a1a',
+            lineHeight: 24,
+          },
+          emphasis: {
+            label: {
+              show: true,
+              fontSize: 16,
+              fontWeight: 600,
+            },
+            scale: true,
+            scaleSize: 8,
+            itemStyle: {
+              shadowBlur: 20,
+              shadowColor: 'rgba(0, 0, 0, 0.3)',
+            },
+          },
+          labelLine: { show: false },
+          data: categoryData,
+          animationDelay: (idx: number) => idx * 150,
+        },
+      ],
+    };
+
+    pieChartInstance.current.setOption(option, { notMerge: true });
+  };
+
+  // 初始化对比图 - 使用真实月度对比数据
+  const initCompareChart = () => {
+    if (!compareChartInstance.current) return;
+
+    const labels = monthlyCompare
+      ? [monthlyCompare.currentMonth.label, monthlyCompare.lastMonth.label]
+      : ['本月', '上月'];
+    const incomeData = monthlyCompare
+      ? [monthlyCompare.currentMonth.income, monthlyCompare.lastMonth.income]
+      : [0, 0];
+    const expenseData = monthlyCompare
+      ? [monthlyCompare.currentMonth.expense, monthlyCompare.lastMonth.expense]
+      : [0, 0];
+    const surplusData = monthlyCompare
+      ? [
+          monthlyCompare.currentMonth.income - monthlyCompare.currentMonth.expense,
+          monthlyCompare.lastMonth.income - monthlyCompare.lastMonth.expense,
+        ]
+      : [0, 0];
+
+    const option = {
+      animation: true,
+      animationDuration: 900,
+      animationEasing: 'elasticOut' as const,
+      tooltip: {
+        trigger: 'axis' as const,
+        backgroundColor: 'rgba(26, 26, 26, 0.95)',
+        borderColor: 'transparent',
+        textStyle: { color: '#fff' },
+        axisPointer: { type: 'shadow' as const },
+        formatter: (params: any) => {
+          let result = `${params[0].axisValue}<br/>`;
+          params.forEach((param: any) => {
+            let prefix = '';
+            if (param.seriesName === '收入') prefix = '+';
+            else if (param.seriesName === '支出') prefix = '-';
+            const colorMap: { [key: string]: string } = {
+              '收入': '#00c853',
+              '支出': '#ff3d00',
+              '盈余': '#0052ff',
+            };
+            result += `<span style="color:${colorMap[param.seriesName]}">●</span> ${param.seriesName}: ${prefix}¥${Number(param.value).toLocaleString()}<br/>`;
+          });
+          return result;
+        },
+      },
+      legend: {
+        data: ['收入', '支出', '盈余'],
+        bottom: 0,
+        textStyle: { color: '#737373' },
+      },
+      grid: {
+        left: '3%',
+        right: '4%',
+        bottom: '15%',
+        top: '10%',
+        containLabel: true,
+      },
+      xAxis: {
+        type: 'category' as const,
+        data: labels,
+        axisLine: { lineStyle: { color: '#e5e5e5' } },
+        axisLabel: { color: '#737373', fontSize: 13 },
+      },
+      yAxis: {
+        type: 'value' as const,
+        axisLine: { show: false },
+        splitLine: { lineStyle: { color: '#f5f5f5' } },
+        axisLabel: {
+          color: '#737373',
+          formatter: (value: number) => `¥${(value / 1000).toFixed(1)}k`,
+        },
+      },
+      series: [
+        {
+          name: '收入',
+          type: 'bar' as const,
+          barWidth: '22%',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#00c853' },
+              { offset: 1, color: '#00a844' },
+            ]),
+            borderRadius: [4, 4, 0, 0],
+          },
+          data: incomeData,
+          animationDelay: (idx: number) => idx * 200,
+        },
+        {
+          name: '支出',
+          type: 'bar' as const,
+          barWidth: '22%',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#ff3d00' },
+              { offset: 1, color: '#e63600' },
+            ]),
+            borderRadius: [4, 4, 0, 0],
+          },
+          data: expenseData,
+          animationDelay: (idx: number) => idx * 200 + 100,
+        },
+        {
+          name: '盈余',
+          type: 'bar' as const,
+          barWidth: '22%',
+          itemStyle: {
+            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+              { offset: 0, color: '#0052ff' },
+              { offset: 1, color: '#0041cc' },
+            ]),
+            borderRadius: [4, 4, 0, 0],
+          },
+          data: surplusData,
+          animationDelay: (idx: number) => idx * 200 + 200,
+        },
+      ],
+    };
+
+    compareChartInstance.current.setOption(option, { notMerge: true });
+  };
+
+  const handleExport = () => {
+    try {
+      exportAllStats(
+        {
+          trendData: displayData,
+          monthlyCompare: monthlyCompare || undefined,
+          categoryData,
+          totalExpense,
+        },
+        `个人记账报表_${currentMonthStr}`
+      );
+      setShowToast(true);
+      setTimeout(() => setShowToast(false), 2500);
+    } catch (error) {
+      console.error('导出失败:', error);
+      // 可以添加失败 Toast
+    }
+  };
+
+  const chartTitleMap: { [key: string]: string } = {
+    line: period === 'year' ? '年度收支趋势' : '月度收支趋势',
+    bar: period === 'year' ? '年度收支趋势' : '月度收支趋势',
+    pie: '支出构成',
+  };
+
+  return (
+    <div className="statistics-page">
+      <header className="page-header">
+        <div className="header-left">
+          <h1 className="page-title">统计报表</h1>
+        </div>
+        <div className="header-right">
+          <button className="btn btn-primary" onClick={handleExport}>
+            <ExportIcon />
+            <span>导出</span>
+          </button>
+          <div className="period-tabs">
+            <button
+              className={`period-tab ${period === 'month' ? 'active' : ''}`}
+              onClick={() => setPeriod('month')}
+            >
+              月
+            </button>
+            <button
+              className={`period-tab ${period === 'year' ? 'active' : ''}`}
+              onClick={() => setPeriod('year')}
+            >
+              年
+            </button>
+          </div>
+        </div>
+      </header>
+
+      <div className="statistics-content">
+        <div className="chart-type-switch" role="tablist" aria-label="图表类型">
+          <button
+            className={`chart-type-btn ${chartType === 'line' ? 'active' : ''}`}
+            data-type="line"
+            role="tab"
+            aria-selected={chartType === 'line'}
+            onClick={() => setChartType('line')}
+          >
+            <LineIcon />
+            折线图
+          </button>
+          <button
+            className={`chart-type-btn ${chartType === 'bar' ? 'active' : ''}`}
+            data-type="bar"
+            role="tab"
+            aria-selected={chartType === 'bar'}
+            onClick={() => setChartType('bar')}
+          >
+            <BarIcon />
+            柱状图
+          </button>
+          <button
+            className={`chart-type-btn ${chartType === 'pie' ? 'active' : ''}`}
+            data-type="pie"
+            role="tab"
+            aria-selected={chartType === 'pie'}
+            onClick={() => setChartType('pie')}
+          >
+            <PieIcon />
+            饼图
+          </button>
+        </div>
+
+        {chartType !== 'pie' && (
+          <section className="chart-card" aria-labelledby="trend-title">
+            <h2 className="chart-card-title" id="trend-title">{chartTitleMap[chartType]}</h2>
+            {displayData.length === 0 && !loading ? (
+              <EmptyChart message="暂无数据，请开始记账" />
+            ) : (
+              <div ref={trendChartRef} className="echarts-container" role="img" aria-label="收支趋势图表"></div>
+            )}
+          </section>
+        )}
+
+        {chartType === 'pie' && (
+          <section className="chart-card" aria-labelledby="expense-title">
+            <h2 className="chart-card-title" id="expense-title">支出构成</h2>
+            <div className="pie-chart-wrapper">
+              <div ref={pieChartRef} className="pie-chart-container" role="img" aria-label="支出构成饼图"></div>
+              <div className="pie-legend">
+                {categoryData.map(item => (
+                  <div key={item.name} className="legend-item">
+                    <span className="legend-color" style={{ backgroundColor: item.color }}></span>
+                    <span className="legend-label">{item.name}</span>
+                    <span className="legend-value">{totalExpense > 0 ? Math.round((item.value / totalExpense) * 100) : 0}%</span>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </section>
+        )}
+
+        <section className="chart-card" aria-labelledby="compare-title">
+          <h2 className="chart-card-title" id="compare-title">月度对比</h2>
+          {monthlyCompare ? (
+            <div ref={compareChartRef} className="echarts-container" role="img" aria-label="月度对比图表"></div>
+          ) : (
+            <EmptyChart message="暂无对比数据" />
+          )}
+        </section>
+      </div>
+
+      {showToast && (
+        <div className="toast show" role="alert" aria-live="polite">
+          <CheckIcon />
+          <span>导出成功</span>
+        </div>
+      )}
+
+      <style>{`
+        :root {
+          --primary: #0052ff;
+          --primary-hover: #3761ff;
+          --primary-light: rgba(0, 82, 255, 0.1);
+          --success: #00c853;
+          --danger: #ff3d00;
+          --bg: #f5f5f5;
+          --surface: #ffffff;
+          --border: #e5e5e5;
+          --text-primary: #1a1a1a;
+          --text-secondary: #737373;
+          --radius-sm: 4px;
+          --radius-md: 8px;
+          --radius-lg: 12px;
+          --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
+          --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
+          --space-1: 4px;
+          --space-2: 8px;
+          --space-3: 12px;
+          --space-4: 16px;
+          --space-5: 20px;
+          --space-6: 24px;
+        }
+
+        .page-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 16px 24px;
+          background: var(--surface);
+          border-radius: var(--radius-lg);
+          margin-bottom: 24px;
+          box-shadow: var(--shadow-sm);
+        }
+
+        .header-left {
+          display: flex;
+          align-items: center;
+          gap: 16px;
+        }
+
+        .page-title {
+          font-size: 20px;
+          font-weight: 600;
+          color: var(--text-primary);
+          margin: 0;
+        }
+
+        .header-right {
+          display: flex;
+          align-items: center;
+          gap: 12px;
+        }
+
+        .btn {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 6px;
+          padding: 8px 18px;
+          min-height: 40px;
+          border: none;
+          border-radius: var(--radius-md);
+          cursor: pointer;
+          font-size: 14px;
+          font-weight: 500;
+          transition: all 0.2s ease;
+        }
+
+        .btn-primary {
+          background: var(--primary);
+          color: white;
+        }
+
+        .btn-primary:hover {
+          background: var(--primary-hover);
+        }
+
+        .period-tabs {
+          display: inline-flex;
+          align-items: center;
+          background: var(--bg);
+          border-radius: var(--radius-md);
+          padding: 3px;
+          gap: 0;
+        }
+
+        .period-tab {
+          padding: 6px 16px;
+          border: none;
+          background: transparent;
+          cursor: pointer;
+          font-size: 14px;
+          color: var(--text-secondary);
+          border-radius: var(--radius-sm);
+          transition: all 0.2s ease;
+          font-weight: 500;
+        }
+
+        .period-tab:hover {
+          color: var(--text-primary);
+        }
+
+        .period-tab.active {
+          background: var(--surface);
+          color: var(--primary);
+          box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
+          font-weight: 600;
+        }
+
+        .statistics-content {
+          padding: 24px;
+          max-width: 1280px;
+        }
+
+        .chart-type-switch {
+          display: flex;
+          gap: 12px;
+          margin-bottom: 24px;
+          background: var(--surface);
+          padding: 16px;
+          border-radius: var(--radius-lg);
+          box-shadow: var(--shadow-sm);
+        }
+
+        .chart-type-btn {
+          flex: 1;
+          padding: 12px 16px;
+          border: 1.5px solid var(--border);
+          border-radius: var(--radius-md);
+          background: var(--surface);
+          cursor: pointer;
+          text-align: center;
+          font-weight: 500;
+          color: var(--text-secondary);
+          transition: all 0.2s ease;
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          gap: 8px;
+          font-size: 14px;
+        }
+
+        .chart-type-btn.active {
+          background: var(--primary);
+          border-color: var(--primary);
+          color: white;
+          font-weight: 600;
+        }
+
+        .chart-type-btn:not(.active):hover {
+          border-color: var(--primary);
+          color: var(--primary);
+          background: var(--primary-light);
+        }
+
+        .chart-card {
+          background: var(--surface);
+          border-radius: var(--radius-lg);
+          padding: 24px;
+          margin-bottom: 24px;
+          box-shadow: var(--shadow-sm);
+          border: 1px solid var(--border);
+        }
+
+        .chart-card:hover {
+          box-shadow: var(--shadow-md);
+        }
+
+        .chart-card-title {
+          font-size: 16px;
+          font-weight: 600;
+          color: var(--text-primary);
+          margin: 0 0 16px 0;
+          padding-left: 12px;
+          line-height: 1.5;
+          position: relative;
+        }
+
+        .chart-card-title::before {
+          content: '';
+          position: absolute;
+          left: 0;
+          top: 50%;
+          transform: translateY(-50%);
+          width: 3px;
+          height: 16px;
+          background: var(--primary);
+          border-radius: 2px;
+        }
+
+        .echarts-container {
+          width: 100%;
+          height: 320px;
+        }
+
+        .pie-chart-wrapper {
+          display: flex;
+          align-items: center;
+          gap: 0;
+          justify-content: center;
+        }
+
+        .pie-chart-container {
+          flex: 1;
+          max-width: 400px;
+          height: 280px;
+        }
+
+        .pie-legend {
+          width: 160px;
+          display: flex;
+          flex-direction: column;
+          gap: 16px;
+          margin-left: -30px;
+        }
+
+        .legend-item {
+          display: flex;
+          align-items: center;
+          gap: 8px;
+          font-size: 14px;
+        }
+
+        .legend-color {
+          width: 12px;
+          height: 12px;
+          border-radius: var(--radius-sm);
+          flex-shrink: 0;
+        }
+
+        .legend-label {
+          color: var(--text-secondary);
+          flex: 1;
+        }
+
+        .legend-value {
+          font-weight: 600;
+          color: var(--text-primary);
+        }
+
+        .toast {
+          position: fixed;
+          top: 80px;
+          left: 50%;
+          transform: translateX(-50%) translateY(-100px);
+          background: var(--text-primary);
+          color: white;
+          padding: var(--space-4) var(--space-6);
+          border-radius: var(--radius-md);
+          font-size: 14px;
+          font-weight: 500;
+          z-index: 1000;
+          opacity: 0;
+          transition: all 0.3s ease;
+          display: flex;
+          align-items: center;
+          gap: var(--space-2);
+        }
+
+        .toast.show {
+          transform: translateX(-50%) translateY(0);
+          opacity: 1;
+        }
+
+        @media (max-width: 767px) {
+          .page-header {
+            padding: 12px 16px;
+            margin-bottom: 16px;
+          }
+
+          .page-title {
+            font-size: 18px;
+          }
+
+          .header-right {
+            gap: 8px;
+            flex-wrap: wrap;
+          }
+
+          .btn-primary span {
+            display: none;
+          }
+
+          .btn-primary {
+            padding: 8px 10px;
+            min-height: 36px;
+          }
+
+          .period-tabs {
+            padding: 2px;
+          }
+
+          .period-tab {
+            padding: 6px 12px;
+            font-size: 13px;
+          }
+
+          .statistics-content {
+            padding: 16px;
+            padding-bottom: 120px;
+          }
+
+          .chart-type-switch {
+            padding: 12px;
+            gap: 8px;
+            flex-direction: row;
+          }
+
+          .chart-type-btn {
+            padding: 10px 8px;
+            font-size: 13px;
+            min-height: 40px;
+            gap: 6px;
+          }
+
+          .chart-card {
+            padding: 16px;
+            margin-bottom: 16px;
+          }
+
+          .chart-card-title {
+            font-size: 15px;
+            margin-bottom: 12px;
+          }
+
+          .echarts-container {
+            height: 260px;
+          }
+
+          .pie-chart-wrapper {
+            flex-direction: column;
+            gap: 16px;
+          }
+
+          .pie-legend {
+            width: 100%;
+            flex-direction: row;
+            flex-wrap: wrap;
+            justify-content: center;
+            gap: 8px 16px;
+          }
+
+          .legend-item {
+            font-size: 12px;
+          }
+        }
+
+        @media (min-width: 1440px) {
+          .statistics-content {
+            max-width: 1100px;
+          }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+function ExportIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="16" height="16">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" />
+      <polyline points="7 10 12 15 17 10" />
+      <line x1="12" y1="15" x2="12" y2="3" />
+    </svg>
+  );
+}
+
+function LineIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
+      <path d="M3 3v18h18" />
+      <path d="M18 9l-5 5-4-4-3 3" />
+    </svg>
+  );
+}
+
+function BarIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
+      <rect x="3" y="12" width="4" height="9" />
+      <rect x="10" y="8" width="4" height="13" />
+      <rect x="17" y="4" width="4" height="17" />
+    </svg>
+  );
+}
+
+function PieIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
+      <path d="M21.21 15.89A10 10 0 1 1 8 2.83" />
+      <path d="M22 12A10 10 0 0 0 12 2v10z" />
+    </svg>
+  );
+}
+
+function CheckIcon() {
+  return (
+    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" width="18" height="18">
+      <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+      <polyline points="22 4 12 14.01 9 11.01" />
+    </svg>
+  );
+}
+
+export default StatisticsPage;