EmailBill/Web/src/views/statisticsV2/modules/DailyTrendChart.vue

<template>
  <div class="daily-trend-card common-card">
    <div class="card-header">
      <h3 class="card-title">
        {{ chartTitle }} (收支)
      </h3>
    </div>

    <div
      ref="chartRef"
      class="trend-chart"
    />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onBeforeUnmount, watch, nextTick } from 'vue'
import * as echarts from 'echarts'
import { useMessageStore } from '@/stores/message'

const props = defineProps({
  data: {
    type: Array,
    default: () => []
  },
  period: {
    type: String,
    default: 'month'
  },
  currentDate: {
    type: Date,
    required: true
  }
})

const messageStore = useMessageStore()

const chartRef = ref()
let chartInstance = null

// 计算图表标题
const chartTitle = computed(() => {
  switch (props.period) {
    case 'week':
      return '每日趋势'
    case 'month':
      return '每日趋势'
    case 'year':
      return '每月趋势'
    default:
      return '趋势'
  }
})

// 获取月份天数
const getDaysInMonth = (year, month) => {
  return new Date(year, month, 0).getDate()
}

// 初始化图表
const initChart = async () => {
  await nextTick()

  if (!chartRef.value) {
    console.warn('图表容器未找到')
    return
  }

  // 销毁已存在的图表实例
  if (chartInstance) {
    chartInstance.dispose()
    chartInstance = null
  }

  try {
    chartInstance = echarts.init(chartRef.value)
    updateChart()
  } catch (error) {
    console.error('初始化图表失败:', error)
  }
}

// 更新图表
const updateChart = () => {
  if (!chartInstance) {
    console.warn('图表实例不存在')
    return
  }

  // 验证数据
  if (!Array.isArray(props.data)) {
    console.warn('图表数据格式错误')
    return
  }

  // 根据时间段类型和数据来生成图表
  let chartData = []
  let xAxisLabels = []

  try {
    if (props.period === 'week') {
      // 周统计：直接使用传入的数据，按日期排序
      chartData = [...props.data].sort((a, b) => new Date(a.date) - new Date(b.date))
      xAxisLabels = chartData.map(item => {
        const date = new Date(item.date)
        const weekDays = ['日', '一', '二', '三', '四', '五', '六']
        return weekDays[date.getDay()]
      })
    } else if (props.period === 'month') {
      // 月统计：生成完整的月份数据
      const currentDate = props.currentDate
      const year = currentDate.getFullYear()
      const month = currentDate.getMonth() + 1
      const daysInMonth = getDaysInMonth(year, month)

      const allDays = Array.from({ length: daysInMonth }, (_, i) => {
        const day = i + 1
        const paddedDay = day.toString().padStart(2, '0')
        return `${year}-${month.toString().padStart(2, '0')}-${paddedDay}`
      })

      // 创建完整的数据映射
      const dataMap = new Map()
      props.data.forEach(item => {
        if (item && item.date) {
          dataMap.set(item.date, item)
        }
      })

      // 生成完整的数据序列
      chartData = allDays.map(date => {
        const dayData = dataMap.get(date)
        return {
          date,
          amount: dayData?.amount || 0,
          count: dayData?.count || 0
        }
      })

      xAxisLabels = chartData.map((_, index) => (index + 1).toString())
    } else if (props.period === 'year') {
      // 年统计：直接使用数据，显示月份标签
      chartData = [...props.data]
        .filter(item => item && item.date)
        .sort((a, b) => new Date(a.date) - new Date(b.date))
      xAxisLabels = chartData.map(item => {
        const date = new Date(item.date)
        return `${date.getMonth() + 1}月`
      })
    }

    // 如果没有有效数据，显示空图表
    if (chartData.length === 0) {
      const option = {
        backgroundColor: 'transparent',
        graphic: [{
          type: 'text',
          left: 'center',
          top: 'middle',
          style: {
            text: '暂无数据',
            fontSize: 16,
            fill: messageStore.isDarkMode ? '#9CA3AF' : '#6B7280'
          }
        }]
      }
      chartInstance.setOption(option)
      return
    }

    // 准备图表数据
    const expenseData = chartData.map(item => {
      const amount = item.amount || 0
      return amount < 0 ? Math.abs(amount) : 0
    })
    const incomeData = chartData.map(item => {
      const amount = item.amount || 0
      return amount > 0 ? amount : 0
    })

    const isDark = messageStore.isDarkMode

    const option = {
      backgroundColor: 'transparent',
      grid: {
        top: 20,
        left: 10,
        right: 10,
        bottom: 20,
        containLabel: false
      },
      xAxis: {
        type: 'category',
        data: xAxisLabels,
        show: false
      },
      yAxis: {
        type: 'value',
        show: false
      },
      series: [
        // 支出线
        {
          name: '支出',
          type: 'line',
          data: expenseData,
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#ff6b6b',
            width: 2
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(255, 107, 107, 0.3)' },
                { offset: 1, color: 'rgba(255, 107, 107, 0.05)' }
              ]
            }
          }
        },
        // 收入线
        {
          name: '收入',
          type: 'line',
          data: incomeData,
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: '#4ade80',
            width: 2
          },
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                { offset: 0, color: 'rgba(74, 222, 128, 0.3)' },
                { offset: 1, color: 'rgba(74, 222, 128, 0.05)' }
              ]
            }
          }
        }
      ],
      tooltip: {
        trigger: 'axis',
        backgroundColor: isDark ? 'rgba(39, 39, 42, 0.95)' : 'rgba(255, 255, 255, 0.95)',
        borderColor: isDark ? 'rgba(63, 63, 70, 0.8)' : 'rgba(229, 231, 235, 0.8)',
        textStyle: {
          color: isDark ? '#f4f4f5' : '#1a1a1a'
        },
        formatter: (params) => {
          if (!params || params.length === 0 || !chartData[params[0].dataIndex]) {
            return ''
          }

          const date = chartData[params[0].dataIndex].date
          let content = ''

          try {
            if (props.period === 'week') {
              const dateObj = new Date(date)
              const month = dateObj.getMonth() + 1
              const day = dateObj.getDate()
              const weekDays = ['日', '一', '二', '三', '四', '五', '六']
              const weekDay = weekDays[dateObj.getDay()]
              content = `${month}月${day}日 (周${weekDay})<br/>`
            } else if (props.period === 'month') {
              const day = new Date(date).getDate()
              content = `${props.currentDate.getMonth() + 1}月${day}日<br/>`
            } else if (props.period === 'year') {
              const dateObj = new Date(date)
              content = `${dateObj.getFullYear()}年${dateObj.getMonth() + 1}月<br/>`
            }

            params.forEach((param) => {
              if (param.value > 0) {
                const color = param.seriesName === '支出' ? '#ff6b6b' : '#4ade80'
                content += `<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${color}"></span>`
                content += `${param.seriesName}: ¥${param.value.toFixed(2)}<br/>`
              }
            })
          } catch (error) {
            console.warn('格式化tooltip失败:', error)
            content = '数据格式错误'
          }

          return content
        }
      }
    }

    chartInstance.setOption(option)
  } catch (error) {
    console.error('更新图表失败:', error)
  }
}

// 监听数据变化
watch(() => props.data, () => {
  if (chartInstance) {
    updateChart()
  }
}, { deep: true })

// 监听主题变化
watch(() => messageStore.isDarkMode, () => {
  if (chartInstance) {
    updateChart()
  }
})

onMounted(() => {
  initChart()
})

onBeforeUnmount(() => {
  if (chartInstance) {
    chartInstance.dispose()
  }
})
</script>

<style scoped lang="scss">
@import '@/assets/theme.css';

.daily-trend-card {
  background: var(--bg-secondary);
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  margin-bottom: var(--spacing-xl);
  box-shadow: var(--shadow-sm);
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.card-title {
  font-size: var(--font-lg);
  font-weight: var(--font-semibold);
  color: var(--text-primary);
  margin: 0;
}

.trend-chart {
  width: 100%;
  height: 180px;
}
</style>