年统计与最长连续天数：数据聚合可视化

前言

在"海风日记"的年视图页面中，年统计面板展示了今年日记总数、最长连续天数和最常心情三项数据，为用户提供年度写作总结的概览。

本文将从源码出发，深入讲解年统计面板的实现和数据聚合逻辑。

一、年统计面板

1.1 源码

typescript 复制代码

Row({ space: 0 }) {
  Column({ space: 4 }) {
    Text(MOCK_DIARIES.length.toString())
      .fontSize(24).fontColor(COLOR_PRIMARY).fontWeight(FontWeight.Bold)
    Text('今年日记').fontSize(11).fontColor(COLOR_TEXT_SECONDARY)
  }.layoutWeight(1).alignItems(HorizontalAlign.Center)

  Column({ space: 4 }) {
    Text('7').fontSize(24).fontColor(COLOR_AMBER).fontWeight(FontWeight.Bold)
    Text('最长连续').fontSize(11).fontColor(COLOR_TEXT_SECONDARY)
  }.layoutWeight(1).alignItems(HorizontalAlign.Center)

  Column({ space: 4 }) {
    Text('😊').fontSize(24)
    Text('最常心情').fontSize(11).fontColor(COLOR_TEXT_SECONDARY)
  }.layoutWeight(1).alignItems(HorizontalAlign.Center)
}

1.2 月统计 vs 年统计

对比	月统计	年统计
日记数	本月日记	今年日记
连续数据	连续天数	最长连续
心情	主要心情	最常心情

二、统计卡片样式

typescript 复制代码

.width('100%')
.padding({ left: PAGE_PADDING, right: PAGE_PADDING, top: 8, bottom: 16 })
.backgroundColor(COLOR_CARD_BG)
.borderRadius(CARD_RADIUS)
.shadow({ radius: 8, color: 'rgba(160,120,60,0.08)', offsetY: 2 })

三、刚刚过去的一周

3.1 数据聚合

在统计面板中，日记数、连续天数和主要心情可以从日记数据中聚合计算得出：

typescript 复制代码

// 示例：计算日记数
const totalCount = MOCK_DIARIES.length

// 示例：计算连续天数（需要排序和遍历）
function getConsecutiveDays(diaries: DiaryEntry[]): number {
  // 按日期排序，计算最长连续天数
}

// 示例：计算主要心情
function getMainMood(diaries: DiaryEntry[]): string {
  // 统计每种心情的出现次数，取最多的
}

四、常见问题

4.1 统计数据不准确

问题：统计数字与实际情况不符。

原因：Mock 数据是静态的，没有动态聚合逻辑。

解决方案：实现数据聚合函数，从日记数据中动态计算。

总结

至此，第六系列"日历与年视图"全部完成 ！下一篇文章开始进入 第七系列：回顾与统计。

如果这篇文章对你有帮助，欢迎点赞👍、收藏⭐、关注🔔，你的支持是我持续创作的动力！

相关资源：

Row 组件文档
Text 组件文档
Shadow 属性文档
海风日记项目源码
$HarmonyOS 开发者官网$ (https://atomgit.com/openharmony/docs
开源鸿蒙跨平台社区