【HarmonyOS 6】个人中心数据可视化实战

一、案例背景在健康管理类应用中用户希望在“个人中心”快速查看周期性的健康汇总。相比单一数据健康报告弹窗能在一个页面中集中展示平均分、每日评分、分项进度与健康建议阅读效率更高。本案例面向 HarmonyOS 6 初学者聚焦一个移动端功能点个人中心菜单入口 健康报告弹窗 分项进度展示。你将学到如何在“更多功能”中设置报告入口如何控制弹窗显示/隐藏如何用环形进度展示综合评分如何用线性进度展示分项平均分二、完整代码实现本功能主要由两部分组成个人中心的“健康报告”入口健康报告弹窗的内容结构与进度展示2.1 菜单入口点击打开报告弹窗Column(){CommonCard({title:更多功能}){Column(){this.MenuRow( 健康报告,(){this.showReportDialogtrue;this.loadReportData(this.reportPeriod);})Divider().margin({top:this.getDividerMargin(),bottom:this.getDividerMargin()}asPadding)this.MenuRow( 养生知识,(){this.selectedArticleIndex-1;this.showKnowledgeDialogtrue;})Divider().margin({top:this.getDividerMargin(),bottom:this.getDividerMargin()}asPadding)this.MenuRow(⚙️ 设置,(){this.tempWaterTargetthis.dailyWaterTarget;this.tempExerciseTargetthis.weeklyExerciseTarget;this.tempSleepHoursthis.sleepTargetHours;this.loadReminderSettings();this.showSettingsDialogtrue;})Divider().margin({top:this.getDividerMargin(),bottom:this.getDividerMargin()}asPadding)this.MenuRow(ℹ️ 关于,(){this.showAboutDialogtrue;})}}}.margin({left:this.getCardMargin(),right:this.getCardMargin(),bottom:this.getCardMargin()}asPadding)入口逻辑很清晰点击“ 健康报告”打开弹窗showReportDialog true同步加载本周/本月数据2.2 健康报告弹窗结构弹窗包含三个核心区域综合评分、每日评分、各项平均分。// 健康报告弹窗if(this.showReportDialog){Column(){Column(){// 头部Row(){Text(健康报告).fontSize(this.getDialogTitleSize()).fontWeight(FontWeight.Bold).fontColor($r(app.color.text_primary))Blank()// 周/月切换Row(){Text(周).fontSize(this.getSmallTextSize()).fontColor(this.reportPeriodweek?Color.White:$r(app.color.text_primary)).padding({left:this.getDividerMargin(),right:this.getDividerMargin(),top:this.getChipPaddingVertical(),bottom:this.getChipPaddingVertical()}asPadding).backgroundColor(this.reportPeriodweek?$r(app.color.primary_color):$r(app.color.input_background)).borderRadius(this.getDividerMargin()).onClick((){if(this.reportPeriod!week){this.reportPeriodweek;this.loadReportData(week);}})Text(月).fontSize(this.getSmallTextSize()).fontColor(this.reportPeriodmonth?Color.White:$r(app.color.text_primary)).padding({left:this.getDividerMargin(),right:this.getDividerMargin(),top:this.getChipPaddingVertical(),bottom:this.getChipPaddingVertical()}asPadding).backgroundColor(this.reportPeriodmonth?$r(app.color.primary_color):$r(app.color.input_background)).borderRadius(this.getDividerMargin()).margin({left:this.getItemGap()}asPadding).onClick((){if(this.reportPeriod!month){this.reportPeriodmonth;this.loadReportData(month);}})}Text(×).fontSize(this.getCloseLargeSize()).fontColor($r(app.color.text_secondary)).margin({left:this.getSectionGap()}asPadding).onClick((){this.showReportDialogfalse;})}.width(100%)头部结构包含左侧标题中部周/月切换右侧关闭按钮2.3 综合评分环形进度// 综合评分区Column(){Stack(){Progress({value:100,total:100,type:ProgressType.Ring}).width(this.getReportRingSize()).height(this.getReportRingSize()).color($r(app.color.divider_color)).style({strokeWidth:this.getReportRingStrokeWidth()})Progress({value:this.avgTotalScore,total:100,type:ProgressType.Ring}).width(this.getReportRingSize()).height(this.getReportRingSize()).color(this.getScoreColor(this.avgTotalScore)).style({strokeWidth:this.getReportRingStrokeWidth()})Column(){Text(this.avgTotalScore.toString()).fontSize(this.getReportScoreSize()).fontWeight(FontWeight.Bold).fontColor(this.getScoreColor(this.avgTotalScore))Text(平均分).fontSize(this.getReportLabelSize()).fontColor($r(app.color.text_secondary))}}Text(${this.getCurrentReportOffset()0?(this.reportPeriodweek?本周:本月):this.getReportRangeLabel()}健康评分).fontSize(this.getSmallTextSize()).fontColor($r(app.color.text_secondary)).margin({top:this.getItemGap()}asPadding)}.width(100%).padding({top:this.getSectionGap(),bottom:this.getSectionGap()}asPadding)这里使用两个环形进度叠加底层灰色圆环是背景顶层彩色圆环表示平均分2.4 各项平均分线性进度// 模块统计Column(){Text(各项平均).fontSize(this.getSectionTitleSize()).fontWeight(FontWeight.Medium).fontColor($r(app.color.text_primary)).width(100%)// 打卡Row(){Text(✅ 打卡).fontSize(this.getBodyTextSize()).fontColor($r(app.color.text_primary))Blank()Text(${this.avgCheckInScore}分).fontSize(this.getBodyTextSize()).fontWeight(FontWeight.Medium).fontColor(this.getScoreColor(this.avgCheckInScore))}.width(100%).margin({top:this.getDividerMargin()}asPadding)Progress({value:this.avgCheckInScore,total:100,type:ProgressType.Linear}).height(this.getProgressHeight()).color($r(app.color.primary_color)).backgroundColor($r(app.color.divider_color)).borderRadius(this.getProgressHeight()/2).margin({top:this.getSmallGap()}asPadding)// 饮水Row(){Text( 饮水).fontSize(this.getBodyTextSize()).fontColor($r(app.color.text_primary))Blank()Text(${this.avgWaterScore}分).fontSize(this.getBodyTextSize()).fontWeight(FontWeight.Medium).fontColor(this.getScoreColor(this.avgWaterScore))}.width(100%).margin({top:this.getDividerMargin()}asPadding)Progress({value:this.avgWaterScore,total:100,type:ProgressType.Linear}).height(this.getProgressHeight()).color($r(app.color.water_blue)).backgroundColor($r(app.color.divider_color)).borderRadius(this.getProgressHeight()/2).margin({top:this.getSmallGap()}asPadding)// 运动Row(){Text( 运动).fontSize(this.getBodyTextSize()).fontColor($r(app.color.text_primary))Blank()Text(${this.avgExerciseScore}分).fontSize(this.getBodyTextSize()).fontWeight(FontWeight.Medium).fontColor(this.getScoreColor(this.avgExerciseScore))}.width(100%).margin({top:this.getDividerMargin()}asPadding)Progress({value:this.avgExerciseScore,total:100,type:ProgressType.Linear}).height(this.getProgressHeight()).color($r(app.color.exercise_orange)).backgroundColor($r(app.color.divider_color)).borderRadius(this.getProgressHeight()/2).margin({top:this.getSmallGap()}asPadding)// 睡眠Row(){Text( 睡眠).fontSize(this.getBodyTextSize()).fontColor($r(app.color.text_primary))Blank()Text(${this.avgSleepScore}分).fontSize(this.getBodyTextSize()).fontWeight(FontWeight.Medium).fontColor(this.getScoreColor(this.avgSleepScore))}.width(100%).margin({top:this.getDividerMargin()}asPadding)Progress({value:this.avgSleepScore,total:100,type:ProgressType.Linear}).height(this.getProgressHeight()).color($r(app.color.sleep_purple)).backgroundColor($r(app.color.divider_color)).borderRadius(this.getProgressHeight()/2).margin({top:this.getSmallGap()}asPadding)}四条进度条分别代表四个维度的平均分颜色区分非常直观打卡主色饮水蓝色运动橙色睡眠紫色三、总结本案例完整展示了一个移动端健康报告弹窗的实现方式核心要点包括菜单入口触发弹窗显示周/月切换控制数据周期环形进度展示综合评分线性进度展示分项平均分掌握这个案例后你可以继续扩展更多报告内容例如数据趋势折线图日历高亮评分等级标签