情绪分布图表：Stack 进度条 + 百分比计算

前言

在"海风日记"的回顾页中，情绪分布图表通过 Stack 进度条展示了不同情绪的比例，让用户直观地了解自己的情绪趋势。

本文将从 ReviewTab.ets 源码出发，深入讲解进度条图表的实现。

一、情绪数据模型

typescript 复制代码

interface MoodDataItem {
  label: string      // 标签，如 "😊 开心"
  count: number      // 数量
  color: string      // 颜色
}

private moodData: MoodDataItem[] = [
  { label: '😊 开心', count: 8, color: COLOR_MOOD_SUNNY },
  { label: '🙂 还不错', count: 5, color: COLOR_PRIMARY },
  { label: '😐 平静', count: 4, color: COLOR_MOOD_CALM },
  { label: '😕 低落', count: 2, color: COLOR_MOOD_LOW },
  { label: '😢 难过', count: 1, color: COLOR_MOOD_SAD },
]

private totalCount: number = 20

二、进度条实现

typescript 复制代码

ForEach(this.moodData, (item: MoodDataItem) => {
  Row({ space: 10 }) {
    // 情绪标签
    Text(item.label).fontSize(13).fontColor(COLOR_TEXT_MAIN).width(80)

    // 进度条
    Stack({ alignContent: Alignment.Start }) {
      // 背景条
      Row().height(8).width('100%')
        .backgroundColor('rgba(200,180,140,0.15)')
        .borderRadius(4)

      // 前景条
      Row().height(8)
        .width(`${(item.count / this.totalCount) * 100}%`)
        .backgroundColor(item.color)
        .borderRadius(4)
    }
    .layoutWeight(1)

    // 数量
    Text(`${item.count}`)
      .fontSize(12).fontColor(COLOR_TEXT_SECONDARY).width(24).textAlign(TextAlign.End)
  }
  .width('100%').alignItems(VerticalAlign.Center)
}, (item: MoodDataItem) => item.label)

三、百分比计算

typescript 复制代码

// 宽度百分比
.width(`${(item.count / this.totalCount) * 100}%`)

四、情绪颜色

情绪	颜色常量	颜色
开心	`COLOR_MOOD_SUNNY`	`#F5A623`
还不错	`COLOR_PRIMARY`	`#F5A623`
平静	`COLOR_MOOD_CALM`	`#7ECAAE`
低落	`COLOR_MOOD_LOW`	`#8BAFD6`
难过	`COLOR_MOOD_SAD`	`#B0A8C8`

五、常见问题

5.1 进度条宽度异常

问题：进度条宽度超过了 100%。

原因：百分比计算错误，item.count / totalCount 大于 1。

解决方案 ：确保 totalCount 是所有 item.count 的总和。

总结

本文通过"海风日记"的情绪分布图表，深入讲解了进度条的实现：

Stack 叠加：背景条 + 前景条
百分比计算：动态宽度
情绪颜色：每种情绪对应颜色
数据模型：MoodDataItem 接口

下一篇文章将深入讲解 时间维度切换，敬请期待。

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

相关资源：

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