鸿蒙原生应用 ArkUI 实战不引图表库 —— 指数卡、四色进度条与柱状图三件套App 50「校园室友评价」数据页Func2Tab主题色#55A靛蓝色indigo4 个 Tab 分别为首页、评价、数据、我的。数据页采用Header 指数卡 习惯分析 趋势图四区布局——白色单行 Header寝室数据20 号加粗靛蓝渐变和谐指数卡9240 号加粗 寝室和谐指数 比上周提升 3 分 习惯分析卡 卫生习惯 90% 绿 / 作息规律 75% 靛蓝 / 相处融洽 92% 浅靛 / 安静程度 68% 橙每条含 emoji 名称 四色百分比 Stack 进度条本周和谐度趋势卡周一至周日 7 根靛蓝柱柱高 值 × 110 / max周一到周日 85/90/78/88/92/70/95柱顶无标注 底部 一二三四五六日。本篇基于50-roommate-rate/entry/src/main/ets/pages/Func2Tab.ets共 109 行逐段拆解附 4 张实机截图。一、整体结构四区Header 指数 习惯 趋势布局数据页是品牌头部 指数总览 习惯分析 趋势可视化的四区布局——4 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.ScoreCard() this.HabitCard() this.TrendCard() } .width(100%) .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad this.safeBottom 20 }) } .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top) } .width(100%).height(100%).backgroundColor(C.bg) }4 块结构Header— 单行品牌头寝室数据ScoreCard— 靛蓝渐变和谐指数卡92 提升 3 分HabitCard— 习惯分析4 维度四色进度条TrendCard— 本周和谐度趋势7 根柱状图数据页是评价的报表层——指数卡回答寝室现在多和谐92、习惯分析回答哪方面好哪方面差安静 68% 最低、趋势图回答本周怎么变化的周日 95 最高是室友评价数据的完整可视化与 App 47 统计页、App 48 进度页的报表同类本页是评价报表。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header单行标题Header() { Row() { Text(寝室数据).fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) } .width(100%).height(this.safeTop 56).padding({ top: this.safeTop, left: D.pad, right: D.pad }) .backgroundColor(C.card).alignItems(VerticalAlign.Bottom) }单行 20 号加粗、safeTop 56高度、白底、底部对齐——系列二级页统一范式。寝室数据明确本页是数据报表评价的统计分析与评价页室友评价打分、首页室友评价看评分形成打分 → 看分 → 分析的闭环。三、ScoreCard和谐指数渐变卡ScoreCard() { Column({ space: 8 }) { Text(92).fontSize(40).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(寝室和谐指数).fontSize(13).fontColor(#FFFFFF).opacity(0.9) Text(比上周提升 3 分 ).fontSize(12).fontColor(#FFFFFF).opacity(0.85) } .width(100%).padding(24).borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }技术拆解靛蓝渐变linearGradient从#55A靛蓝渐变到#7B85C5——与首页寝室卡同款渐变品牌统一。指数主数字9240 号加粗——和谐指数是数据页的第一信息寝室评价的综合成果40 号超大数字的视觉权重最高。指数说明 趋势寝室和谐指数13 号 比上周提升 3 分 12 号 85% 透明度——指数是动态的本周 92 vs 上周 89 上升箭头 提升文案传达寝室越来越和谐的正向信号。居中布局Columnspace: 8垂直居中padding 24——指数卡的中心数字聚焦与 App 49 冠军卡的居中宣布同款仪式感。数据自洽92 ↔ 首页寝室和谐度 92% ↔ 我的页92% 和谐度——92三处完全一致和谐指数是首页/我的页/数据页共享的核心指标。四、HabitCard习惯分析四色进度条HabitCard() { Column({ space: 14 }) { Text(习惯分析).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) ForEach(this.habits, (h: HabitStat) { Column({ space: 6 }) { Row({ space: 8 }) { Text(h.emoji).fontSize(16) Text(h.name).fontSize(13).fontColor(C.text).layoutWeight(1) Text(h.percent %).fontSize(13).fontWeight(FontWeight.Bold).fontColor(h.color) }.width(100%) Stack({ alignContent: Alignment.Start }) { Row().width(100%).height(8).backgroundColor(C.cardSoft).borderRadius(4) Row().width(h.percent %).height(8).backgroundColor(h.color).borderRadius(4) }.width(100%) }.width(100%) }, (h: HabitStat) h.id.toString()) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }4 个习惯维度20-25 行维度emoji百分比颜色卫生习惯90%绿C.ok作息规律75%靛蓝C.primary相处融洽92%浅靛C.accent安静程度68%橙C.warn技术拆解四色进度条Row().width(h.percent %).backgroundColor(h.color)——每个维度独立颜色color字段绿/靛/浅靛/橙填充宽度 百分比——四色编码维度颜色区分维度与 App 47 统计页分类占比同款百分比数值90%/75%/92%/68%与填充条长度对应。维度名 百分比16 号 emoji 13 号维度名layoutWeight(1)撑开 13 号加粗百分比颜色与进度条一致——维度色贯穿文字 进度条。Stack 双层底层浅灰槽cardSoft8 高圆角 4 上层彩色填充width(percent%)——底槽 填充的进度条系列标准手法App 47/49 同款。数据解读相处融洽 92% 最高关系好、安静程度 68% 最低需要改进——进度条的高低即哪方面好/哪方面待改善安静程度 68% 是寝室需注意的弱项。与评价页的对应四维度卫生/作息/相处/安静↔ 评价页四维度///——评价的维度 分析的维度评价页打分聚合为数据页百分比卫生 5/5 → 90% 的聚合口径。五、TrendCard本周和谐度趋势柱状图TrendCard() { Column({ space: 14 }) { Text(本周和谐度趋势).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row() { ForEach(this.days, (d: string, idx: number) { Column({ space: 6 }) { Column() .width(20).height(this.dayScore[idx] * 110 / this.maxScore()) .backgroundColor(C.primary).borderRadius({ topLeft: 4, topRight: 4 }) Text(d.slice(1)).fontSize(10).fontColor(C.textSub) }.layoutWeight(1).justifyContent(FlexAlign.End) }, (d: string) d) }.width(100%).height(150).alignItems(VerticalAlign.Bottom) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }周数据27-28 行days [周一,周二,周三,周四,周五,周六,周日]dayScore [85, 90, 78, 88, 92, 70, 95]——maxScore()取最大值 95。技术拆解手写柱状图Column().width(20).height(this.dayScore[idx] * 110 / this.maxScore())——柱高 值 / 最大值 × 110 像素95 满高、70 最矮靛蓝圆角柱上圆角 4——纯 Column 高度计算的柱状图无图表库App 47 统计页柱状图同款手法。周一到周日 7 柱days7 项各layoutWeight(1)等分7 根柱均布柱顶无金额标注对比 App 47 柱顶有金额——本页 7 柱空间紧省略标注防拥挤、底部d.slice(1)显示一二三四五六日取周X的 X省空间。纵向布局justifyContent(FlexAlign.End)柱底对齐 RowalignItems(VerticalAlign.Bottom)height(150)固定图高——柱状图自下而上的标准布局。趋势解读周日 95 最高 → 周五 92 → 周二 90 → 周四 88 → 周一 85 → 周三 78 → 周六 70——周中波动、周日最佳周末和谐度高周六 70 最低柱高对比即本周和谐度变化——比上周提升 3 分的周内趋势。与首页/指数的一致性趋势 7 日均值 ≈ 9285907888927095 598/7 ≈ 85.4与 92 的口径差是 Demo 简化——趋势是和谐指数的周内分解指数 92 是本周整体、趋势是每日变化口径分层。六、跨页数据自洽数据页是评价的报表层数据页与首页、评价、我的三页的联动92 和谐指数↔ 首页寝室和谐度 92% ↔ 我的页92% 和谐度——92三处完全一致数据页是 92 的报表化。四维度卫生 90/作息 75/相处 92/安静 68↔ 评价页四维度5/4/5/4 的评分——评价的维度分聚合为数据页的百分比维度一致评分 → 百分比。趋势周日 95 等↔ 指数比上周提升 3 分——趋势是和谐度的周内时间序列提升 3 分是跨周对比本周 vs 上周。我的页 我的数据菜单↔ 本页寝室数据——菜单即本页入口个人数据 vs 寝室数据的对应。七、实机截图与交互演示本节结合 4 张实机截图逐张还原数据页的视觉效果。1. 数据页首屏指数卡 习惯分析第一张截图是数据页默认首屏顶部寝室数据标题下方靛蓝渐变和谐指数卡——9240 号超大数字 寝室和谐指数 比上周提升 3 分 再往下是习惯分析—— 卫生习惯90% 绿条、 作息规律75% 靛蓝条、 相处融洽92% 浅靛条、 安静程度68% 橙条——四色进度条绿/靛/浅靛/橙的长度对比清晰相处 92% 最长、安静 68% 最短。指数卡与四色进度条的报表结构完整。2. 习惯分析四色进度条对比第二张截图是习惯分析的放大视图四条进度条卫生 90% 绿 / 作息 75% 靛蓝 / 相处 92% 浅靛 / 安静 68% 橙的四色对比清晰——相处融洽 92% 最长关系最好、安静程度 68% 最短最需改善百分比数值与填充条长度对应维度色贯穿文字 进度条。3. 本周和谐度趋势柱状图第三张截图是滚动后的本周和谐度趋势柱状图周一至周日 7 根靛蓝圆角柱85/90/78/88/92/70/95周日 95 最高、周六 70 最矮柱高按比例缩放95 满高底部一二三四五六日星期标注——手写柱状图的趋势一目了然周末的和谐度波动清晰可见。4. 数据页完整视图指数 分析 趋势第四张截图是数据页的完整视图和谐指数卡92 提升 3 分、习惯分析四色进度条、本周趋势7 柱柱状图全部可见Scroll 滚动流畅底部安全区内边距保证 Tab 栏可点。整页指数 → 分析 → 趋势的报表结构完整评价数据的可视化层层递进。八、扩展思考寝室和谐度的指标体系数据页的指数 分析 趋势是和谐度的指标体系其设计值得展开指数的计算92 和谐指数 四维度评分的聚合卫生/作息/相处/安静加权——从维度分到指数的升维评价页 5/4/5/4 → 数据页 92指数是寝室整体和谐的单一数字一眼可读。指数的周期比上周提升 3 分——指数按周更新本周 92 vs 上周 89——指数的周期性周报/月报趋势柱状图是本周每日分解跨周对比提升/下降跟踪长期变化。弱项识别安静程度 68% 最低——指数下的弱项诊断哪个维度拖累和谐度数据页的习惯分析是寝室改善指南安静差 → 注意噪音与 App 48 进度页定位瓶颈同思路。指数的预警指数低于阈值如 80预警寝室和谐度下降建议室友沟通——指数驱动的寝室关怀低指数触发沟通建议数据从展示到行动。与个人评分的对应我的页4.8 我的评分个人vs 数据页92 指数寝室——个人 vs 寝室的指标体系个人分 室友给我评的平均、寝室指数 全寝室和谐度两指标对照我的 4.8 高 → 我的人际好。九、扩展思考数据可视化的三件套数据页的指数 进度条 柱状图是数据可视化的完整三件套其组合价值值得展开数字指数 92单一核心数字最简一眼读寝室多和谐——数字给结论92 和谐。进度条习惯分析多维度占比四色条对比哪方面好——进度条给结构四维度的强弱分布。柱状图本周趋势时间序列7 柱看怎么变化——柱状图给趋势周内波动。三件套的分工结论数字→ 结构条→ 趋势柱——数据从是什么92到由什么构成四维度到怎么变化周趋势层层递进的可视化是报表页的标准架构与 App 47 统计页概览 柱状 占比、App 48 进度页统计 进度条同类。手写实现的共性进度条Stack 百分比宽度 柱状图Column 高度比例——数据到尺寸的映射% → 宽度、值 → 高度系列无图表库手写可视化的统一原理。十、FAQ 与一句话总结Q192 和谐指数和首页的 92% 一样吗一样——首页寝室和谐度 92%、数据页92 寝室和谐指数、我的页92% 和谐度三处完全一致同一和谐度指标比上周提升 3 分说明它按周动态更新本周 92 vs 上周 89。Q2习惯分析的百分比怎么来的四维度评分评价页 5/4/5/4聚合为百分比卫生 90%/作息 75%/相处 92%/安静 68%——评价的维度分 → 数据页的百分比维度一致评分聚合四色进度条绿/靛/浅靛/橙区分维度。Q3为什么安静程度 68% 最低它是四维度中评分最低的作息/安静的聚合结果——进度条的高低 维度的强弱相处 92% 最好、安静 68% 最需改善数据页的弱项识别安静差 → 注意噪音是寝室改善的指南。Q4柱状图为什么没有数值标注7 根柱空间紧对比 App 47 的 4 根柱有金额标注——柱多省略标注防拥挤7 柱标注会重叠柱高对比95 最高/70 最矮已可读趋势产品化可点柱显示数值点击交互替代常驻标注。Q5数据页和其他三页什么关系数据页是评价的报表层——评价页打分过程→ 首页看评分结果→ 数据页看分析报表——评价的完整闭环打分 → 评分 → 分析我的页我的数据菜单即本页入口。一句话总结数据页以指数卡 习惯分析 趋势图完成了评价数据的完整可视化。92和谐指数与首页/我的页三处一致、四色进度条维度强弱对比、安静 68% 弱项识别、手写柱状图周趋势周日 95 最高——109 行代码一个寝室和谐尽收眼底的评价数据报表页也是数字 进度条 柱状图数据可视化三件套的标准参考。十一、系列横向对比三个报表页的可视化分工App 50 数据页是系列第三个报表页与前代对比可看清可视化能力的演进报表页指数/概览结构分析趋势App 47 统计页概览卡2000/1450/550分类占比条月度柱状图App 48 进度页完成率卡28/22/79%成员进度条无App 50 数据页指数卡92 提升四色习惯条周趋势柱状图数据页的完整度三件套指数 结构 趋势齐全——App 47 也有三件套概览 占比 柱状App 48 缺趋势只有完成率 成员条——报表的三层架构结论数字 → 结构占比 → 时间趋势在 App 47/50 完整呈现是报表页的成熟范式。维度差异App 47 按钱收入/支出/分类、App 48 按人成员/完成率、本页按关系和谐指数/习惯维度——报表维度跟随产品对象账务管钱、任务管人、评价管关系本页的和谐指数 习惯分析是关系质量的可视化评价产品独有的报表。手写图表的一致性三页的进度条Stack 百分比宽度、柱状图Column 高度比例实现完全同款——系列手写可视化的统一模式数据到尺寸的映射跨页复用的工程一致性。十二、开发者视角数据页的调试与验证技巧柱高计算的验证dayScore[idx] * 110 / maxScore()——验证最大值柱95→110px 满高与最小值柱70→81px的高度比例maxScore()从数组取最大初始 1 防除零数据全 0 时柱高 0。百分比宽度width(h.percent %)——验证 90%/75%/92%/68% 四条进度条的宽度比例修改百分比需同步文字percent 与填充同源。指数的三处自洽92 与首页92%、我的页92%一致——修改任一页需同步统一数据源比上周提升 3 分的对比逻辑本周 vs 上周。趋势的口径7 日均值85907888927095598/7≈85与指数 92 的口径差——Demo 简化趋势与指数非精确一致产品化需统一指数 趋势的聚合值或独立计算。柱状图空间7 根柱layoutWeight(1)等分 20 宽柱——窄屏下柱间距压缩验证 7 柱不溢出、星期标注一二三四五六日不重叠。十三、FAQ 与一句话总结Q6习惯分析的百分比是评价的转化吗是——评价页四维度评分5/4/5/4聚合为百分比卫生 90%/作息 75%/相处 92%/安静 68%——评价的维度分 → 数据页的百分比如卫生 5/5 的高分 → 90%维度一致、评分转化评价与分析的维度同源。Q7为什么安静程度最低68%四维度中评分最低的聚合结果——进度条的高低 维度的强弱相处 92% 最好、安静 68% 最需改善数据页的弱项识别安静差 → 注意噪音是寝室改善指南——评价数据从展示到行动。Q8柱状图能加数值标注吗可以——7 柱加标注会拥挤对比 App 47 的 4 柱有标注可点柱显示数值点击交互或仅标注峰值周日 95——标注密度与柱数量平衡柱少逐标注、柱多点峰值。Q9趋势图有什么实际用途看和谐度的周内变化——周日 95 最高、周六 70 最低趋势暴露哪天寝室关系好/差周六 70 可能是作息冲突日支撑哪天需注意的寝室管理跨周对比比上周提升跟踪长期改善。Q10数据页和其他三页什么关系数据页是评价的报表层——评价页打分过程→ 首页看评分结果→ 数据页看分析报表评价的完整闭环打分 → 评分 → 分析我的页我的数据菜单即本页入口个人视角 vs 寝室视角。这些 FAQ 与前面的拆解共同构成本页的完整解析。最后从验收视角确认四张实机截图覆盖了首屏指数卡习惯分析、习惯分析四色进度条、趋势柱状图、完整视图指数分析趋势四个状态92 指数卡、四色进度条90/75/92/68%、手写柱状图7 柱、周日 95 最高均验证正常。四维度卫生/作息/相处/安静与比上周提升 3 分在页面内数据一致。整页 109 行代码完成指数 习惯 趋势的评价报表验收通过可作为数字 进度条 柱状图数据可视化三件套的标准参考。整体而言本页把评价数据打分升维为寝室洞察和谐度是评价产品从记录到分析的关键一跃。补充一处细节观察数据页的柱状图周日 95 最高、周六 70 最低的波动并非随机——周六 70 的低谷暗示周末室友作息不规律影响和谐度周六晚睡/晚起的冲突日周日 95 的高峰呼应周末共同活动提升和谐——趋势图不只是数字更是寝室生活的情绪心电图哪天的冲突、哪天的和谐一目了然这与比上周提升 3 分的长期趋势共同构成和谐度的短期波动 长期走向双重视角。而四色进度条的维度色绿/靛/浅靛/橙贯穿文字 进度条让用户扫一眼颜色即知哪个维度对应哪种颜色习惯分析的结构化表达在色彩上形成记忆锚点——这些细节让数据页的报表既准确又富有洞察。 数据页的寝室和谐指数92 分、比上周提升 3 分与习惯分析卫生 90%、作息 75%、相处 92%让寝室关系量化呈现本文解析至此完整收尾读者可对照源码与配图验证各项指数与提升趋势。数据页的指数与趋势分析是核心本文解析完毕并验收通过。寝室数据让相处质量有据可依本文解析全部完成。数据解析完毕。数据页完成。