bookKeepingWx/pages/statistics2/statistics.wxml

<view class="container">
  <!-- 时间维度切换 -->
  <view class="time-filter">
    <view class="time-btns">
      <button 
        class="time-btn {{currentTimeType === 'year' ? 'time-btn-active' : ''}}"
        bindtap="changeTimeType"
        data-type="year"
      >
        按年
      </button>
      <button 
        class="time-btn {{currentTimeType === 'month' ? 'time-btn-active' : ''}}"
        bindtap="changeTimeType"
        data-type="month"
      >
        按月
      </button>
      <button 
        class="time-btn {{currentTimeType === 'quarter' ? 'time-btn-active' : ''}}"
        bindtap="changeTimeType"
        data-type="quarter"
      >
        按季
      </button>
    </view>
  </view>
  
  <!-- 当前时间选择 -->
  <view class="current-period">
    <view class="period-container">
      <button class="period-btn" bindtap="prevPeriod">
        <image src="/images/left-arrow.png" class="arrow-icon"></image>
      </button>
      <view class="period-text">{{currentPeriodText}}</view>
      <button class="period-btn" bindtap="nextPeriod">
        <image src="/images/right-arrow.png" class="arrow-icon"></image>
      </button>
    </view>
  </view>
  
  <!-- 总额统计卡片 -->
  <view class="total-cards">
    <view class="income-card card">
      <view class="card-header">
        <text class="card-label">收入总额</text>
        <view class="card-icon income-icon">
          <image src="/images/income-icon.png" class="icon-img"></image>
        </view>
      </view>
      <view class="card-amount">{{incomeTotal}}</view>
      <view class="card-change positive-change">
        <text class="change-icon">↑</text>
        <text class="change-value">12.5%</text>
        <text class="change-desc">较上期</text>
      </view>
    </view>
    
    <view class="expense-card card">
      <view class="card-header">
        <text class="card-label">支出总额</text>
        <view class="card-icon expense-icon">
          <image src="/images/expense-icon.png" class="icon-img"></image>
        </view>
      </view>
      <view class="card-amount">{{expenseTotal}}</view>
      <view class="card-change negative-change">
        <text class="change-icon">↑</text>
        <text class="change-value">8.2%</text>
        <text class="change-desc">较上期</text>
      </view>
    </view>
  </view>
  
  <!-- 折线图区域 -->
  <view class="chart-container trend-chart">
    <view class="chart-header">
      <text class="chart-title">收支趋势</text>
      <view class="chart-legend">
        <view class="legend-item">
          <view class="legend-color income-color"></view>
          <text class="legend-text">收入</text>
        </view>
        <view class="legend-item">
          <view class="legend-color expense-color"></view>
          <text class="legend-text">支出</text>
        </view>
      </view>
    </view>
    <canvas 
      canvas-id="trendChart" 
      class="chart-canvas"
      bindtouchstart="touchTrendChart"
    ></canvas>
  </view>
  
  <!-- 饼图区域 -->
  <view class="chart-container pie-chart">
    <view class="chart-header">
      <text class="chart-title">收支分类</text>
      <view class="pie-type-switch">
        <button 
          class="type-btn {{currentPieType === 'income' ? 'type-btn-active' : ''}}"
          bindtap="changePieType"
          data-type="income"
        >
          收入分类
        </button>
        <button 
          class="type-btn {{currentPieType === 'expense' ? 'type-btn-active' : ''}}"
          bindtap="changePieType"
          data-type="expense"
        >
          支出分类
        </button>
      </view>
    </view>
    
    <view class="pie-content">
      <canvas 
        canvas-id="categoryChart" 
        class="pie-canvas"
        bindtouchstart="touchPieChart"
      ></canvas>
      
      <view class="pie-legend">
        <view class="legend-list">
          <view class="legend-item" wx:for="{{currentPieLegend}}" wx:key="index">
            <view class="legend-color" style="background-color: {{item.color}};"></view>
            <text class="legend-text">{{item.name}}</text>
            <text class="legend-value">{{item.value}}</text>
            <text class="legend-percent">{{item.percent}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

<!-- 底部导航 -->
<view class="tab-bar">
  <navigator url="/pages/index/index" class="tab-bar-item">
    <image class="tab-bar-icon" src="/images/home{{currentTab === 'home' ? '-active' : ''}}.png"></image>
    <text class="tab-bar-text {{currentTab === 'home' ? 'tab-bar-text-active' : ''}}">首页</text>
  </navigator>
  <navigator url="/pages/statistics/statistics" class="tab-bar-item">
    <image class="tab-bar-icon" src="/images/chart{{currentTab === 'statistics' ? '-active' : ''}}.png"></image>
    <text class="tab-bar-text {{currentTab === 'statistics' ? 'tab-bar-text-active' : ''}}">统计</text>
  </navigator>
  <navigator url="/pages/add/add" class="tab-bar-item add-btn">
    <image class="tab-bar-icon" src="/images/add.png"></image>
  </navigator>
  <navigator url="/pages/detail/detail" class="tab-bar-item">
    <image class="tab-bar-icon" src="/images/list{{currentTab === 'detail' ? '-active' : ''}}.png"></image>
    <text class="tab-bar-text {{currentTab === 'detail' ? 'tab-bar-text-active' : ''}}">明细</text>
  </navigator>
  <navigator url="/pages/mine/mine" class="tab-bar-item">
    <image class="tab-bar-icon" src="/images/mine{{currentTab === 'mine' ? '-active' : ''}}.png"></image>
    <text class="tab-bar-text {{currentTab === 'mine' ? 'tab-bar-text-active' : ''}}">我的</text>
  </navigator>
</view>