鸿蒙 ArkUI 实战：不引图表库 —— 停车费用页手写的五柱趋势图与地点消费榜

鸿蒙 ArkUI 实战不引图表库 —— 停车费用页手写的五柱趋势图与地点消费榜App 56「停车缴费记录」费用页Func2Tab主题色#2D3436深灰黑。本页是停车费用的统计页——白色单行 Header费用统计20 号加粗深灰渐变月度卡¥286 36 号加粗白字 8月停车总费用月度费用趋势柱状图4月 220 / 5月 260 / 6月 310 / 7月 245 / 8月 286 元深灰柱 柱顶金额 月份标签SectionTitle地点消费 3 条地点统计列表 公司车库 20 次 ¥400 / ️ 万达广场 8 次 ¥96 / 市医院 3 次 ¥24每条含 44×44 圆形浅灰底图标 地点名 次数 深灰金额。本篇基于56-parking-record/entry/src/main/ets/pages/Func2Tab.ets共 111 行逐段拆解附 4 张实机截图。一、整体结构四区Header 月度卡 柱状图 地点列表布局费用页是月度总览 趋势 地点结构的分析布局——4 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.SummaryCard() this.BarChart() this.SectionTitle(地点消费) this.PlaceList() } .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 块结构SummaryCard— 深灰渐变月度卡8 月总费用 ¥286BarChart— 月度费用趋势柱状图4-8 月SectionTitle— 地点消费标题PlaceList— 3 条地点统计列表次数 金额费用页是统计页——先看当月总额¥286再看月度趋势4-8 月 220-310 元波动、6 月最高最后按地点看消费分布公司车库 400 元占大头。总览 → 趋势 → 结构三层递进与 App 54 订阅统计、App 47 班费统计同属数据可视化页。项目源码开源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) }功能页 Header 标准范式20 号、固定高、文字贴底与记录页、我的页同款。费用统计点明本页职能——对停车费用做统计。三、SummaryCard深灰渐变月度卡SummaryCard() { Column({ space: 6 }) { Text(¥286).fontSize(36).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(8月停车总费用).fontSize(13).fontColor(#FFFFFF).opacity(0.9) } .width(100%).padding(24).borderRadius(D.rLg).alignItems(HorizontalAlign.Start) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }技术拆解深灰渐变linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——从#2D3436渐变到#636E72与首页汇总卡同款渐变品牌统一深灰传达停车场景的沉稳感。主金额 36 号¥286用36 号Bold 白字——比首页的 32 号更大统计页是全屏分析当月总额是唯一焦点8 月停车总费用是本页核心数字。左对齐布局alignItems(HorizontalAlign.Start)文本左对齐——与首页居中卡片不同首页标签上金额下、本页金额上标签下且左对齐变化体现汇总卡的灵活变体。数据自洽¥286 首页本月停车费 286.00 柱状图8月 ¥286——三个数据源完全一致当月总额贯穿首页与费用页。四、BarChart月度费用趋势柱状图BarChart() { Column({ space: 14 }) { Text(月度费用趋势).fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width(100%) Row() { ForEach(this.months, (m: string, idx: number) { Column({ space: 6 }) { Text(¥ this.monthVals[idx]).fontSize(9).fontColor(C.textDim) Column() .width(28).height(this.monthVals[idx] * 110 / this.maxVal()) .backgroundColor(C.primary).borderRadius({ topLeft: 4, topRight: 4 }) Text(m).fontSize(10).fontColor(C.textSub) }.layoutWeight(1).justifyContent(FlexAlign.End) }, (m: string) m) }.width(100%).height(160).alignItems(VerticalAlign.Bottom) } .width(100%).padding(16).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke }) }5 个月数据20-21 行月份4月5月6月7月8月费用220 元260 元310 元245 元286 元技术拆解纯 ArkUI 柱状图Column().width(28).height(val * 110 / maxVal())——柱高 数值 × 比例系数 ÷ 最大值每根柱按比例缩放6 月 310 元最高占满 110其余按比例不依赖第三方图表库App 47/54 同款手绘手法。深灰柱体28 宽深灰柱C.primaryborderRadius({ topLeft: 4, topRight: 4 })——只圆顶部两角柱底贴基线深灰柱与主题统一。柱顶金额 底部月份9 号淡灰金额¥220 10 号月份4月——每根柱上下两个标签数据值 横轴刻度。基准对齐height(160).alignItems(VerticalAlign.Bottom) 每列justifyContent(FlexAlign.End)——所有柱底部对齐纵向从底部生长。动态比例maxVal()动态求最大值310——柱高相对最大值缩放数据变化自动适配。趋势解读4 月最低 220、6 月最高 310、8 月 286——月度费用波动220-310 元区间8 月 286 与首页本月 286.00 完全一致趋势图最后一个月即当前月。五、PlaceList地点消费列表PlaceList() { Column({ space: 10 }) { ForEach(this.places, (p: PlaceStat) { Row({ space: 12 }) { Row() { Text(p.emoji).fontSize(22) } .width(44).height(44).backgroundColor(C.primarySoft).borderRadius(22).justifyContent(FlexAlign.Center) Column({ space: 3 }) { Text(p.name).fontSize(14).fontColor(C.text) Text(p.count 次停车).fontSize(12).fontColor(C.textDim) }.alignItems(HorizontalAlign.Start).layoutWeight(1) Text(¥ p.amount).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.primary) } .width(100%).padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) }, (p: PlaceStat) p.id.toString()) }.width(100%) }3 个地点数据23-27 行地点次数金额 公司车库20 次400 元️ 万达广场8 次96 元 市医院3 次24 元卡片细节44×44 圆形浅灰底图标backgroundColor(C.primarySoft)#E9ECEEborderRadius(22)正圆不同于首页的圆角方块——圆形图标块费用页的视觉变体22 号 emoji️。地点名 次数14 号地点名 12 号淡灰20 次停车——地点与频次停了多回layoutWeight(1)撑开。深灰金额15 号 Bold¥400用C.primary深灰——金额用主题深灰区别于 App 52 的彩色金额、App 54 的品牌色金额深灰金额在费用页保持沉稳中性统计页不需要彩色强调深灰统一。数据自洽公司车库 20 次 × 20 元 400 元首页公司单次 20 元、万达 8 次 × 12 元 96 元首页万达单次 12 元——单价 × 次数 累计与首页完全对账市医院 3 次 × 8 元 24 元首页医院单次 8 元。无免费地点超市免费停车0 元不在列表——费用页只统计收费地点免费记录不进入费用统计与首页免费记录呼应。六、跨页数据自洽费用统计的全局闭环费用页与首页、记录、我的三页形成闭环费用页¥286 8月↔ 首页本月停车费 286.00——金额完全一致首页从月度总览、费用页从趋势 地点双维度展示当月停车支出。费用页6月 310 最高↔ 柱状图趋势——月度波动220-310反映出行规律6 月出行多停车费高、4 月最少趋势图是停车支出的时间画像。费用页公司车库 20 次 400 元↔ 首页公司地下车库 ¥20——公司单次 20 元 × 20 次 400 元单价 × 频次 地点累计费用页的地点是首页记录的聚合。费用页万达 8 次 96 元↔ 首页万达广场停车场 ¥12——万达单次 12 元 × 8 次 96 元均额对账12 元/次。费用页 3 个地点↔ 记录页常用地点——公司/万达/医院都出现在常用地点胶囊可快捷录入录入地点 → 费用统计维度免费地点超市仅记录不统计。我的页¥2.8k 累计费用↔ 费用页月度累计——费用页是月视角4-8 月、我的页是累计视角全部历史约 2800 元月度统计 → 总量累计。七、系列横向对比数据统计页的三种形态系列中数据统计型页面各有侧重App 56 费用统计深灰#2D3436月度卡 柱状图 地点列表——费用 地点双维度时间趋势 空间分布。App 54 订阅统计紫#9B51E0年度卡 柱状图 分类占比——年度 分类双维度。App 47 班费统计绿#00A862余额卡 手写柱状图——余额 收支。App 50 室友评价靛蓝#5549A6和谐度 星级 进度条——评价维度。56 与 54 都是汇总卡 柱状图 列表的三区统计页差异化在维度54 按分类视频/软件/云服务、56 按地点公司/万达/医院——停车费用的天然维度是地点在哪停车决定花多少地点列表的次数 金额比分类占比更贴合停车场景公司 20 次是高频、医院 3 次是低频。深灰柱状图与深灰金额保持沉稳中性的统计气质。八、开发者避坑费用统计的四个细节从 Func2Tab 的实现提炼四个易踩坑点柱高比例系数height(val * 110 / maxVal())——固定系数 110 是最高柱像素高容器 160 高柱区 110 标签预留 50调整图表大小时需同步调整系数用容器高 - 标签预留推导。免费地点的统计排除费用页地点列表只有收费地点——统计时需过滤 fee 0 的记录免费停车不进入金额统计但次数是否包含免费需产品决策当前次数是收费次数。地点聚合逻辑places写死公司/万达/医院——产品化应由停车记录按地点分组聚合groupBy 地点count 次数、sum 金额新增地点自动进入列表避免记录有万达但统计没万达。金额单位与对齐¥400/¥96/¥24 三位与两位混排——右对齐保证纵向可比当前Text(¥ p.amount)直接拼接对齐依赖文本宽度产品化用统一对齐方式右对齐已由 Row 布局保证。九、常见问题 FAQ问费用页的柱状图为什么 6 月最高310 元答演示数据设计 6 月为出行高峰可能出差多、停车频繁4 月最低220 元出行少。产品化后每月费用由当月停车记录动态汇总——出行多的月份柱子高、少的月份矮柱状图直接反映用户的出行节奏。问地点消费的公司车库 400 元是怎么算的答公司车库 20 次 × 每次 20 元 400 元——与首页公司地下车库 ¥20的单次费用对账单价 20 元20 次是累计在公司停车的次数。万达广场 8 次 × 12 元 96 元同理首页万达单次 12 元单笔与累计完全一致。问为什么费用页没有超市免费停车答因为费用页统计的是停车费用——超市免费停车费用为 0进入统计没有意义0 元不影响总额、不影响趋势所以只统计收费地点。免费记录仍保留在首页最近停车列表记录停车行为但费用统计排除免费项。十、验收与总结本篇对 56-parking-record 费用页Func2Tab111 行做了逐块拆解四区结构Header费用统计 SummaryCard月度渐变卡 BarChart五柱趋势图 SectionTitle PlaceList地点消费核心交互无点击纯数据展示柱状图 ArkUI 手绘主题色#2D3436深灰黑——月度卡渐变、柱状图柱体、地点金额数据闭环费用页 286/6月310/公司400 → 首页 286/公司20 → 记录页常用地点四页同源费用页是停车缴费记录的支出分析——月度卡给结论8 月 286 元、柱状图给趋势4-8 月波动、地点列表给结构公司占大头 400 元三图一页完成停车费用的全面分析。十、扩展思考从月度统计到停车消费洞察费用页的演进方向是停车消费洞察第一是日均/次均成本分析——月度总费用286 元摊到天286 ÷ 31 ≈ 9.2 元/天或摊到次286 ÷ 18 ≈ 15.9 元/次让用户感知每天停车平均花多少钱比月度总额更有代入感第二是地点成本对比——公司车库 400 元20 次 × 20 元与市医院 24 元3 次 × 8 元的对比演进方向是每地点次均成本排序医院次均 8 元最便宜、公司 20 元最贵指导用户能停便宜的就不停贵的第三是月度预算预警——结合月度趋势4-8 月 220-310 元演进方向是设停车预算如 300 元/月超预算月份柱状图变红预警柱状图是预算对比的天然载体第四是出行方式对比——停车费用与公交/地铁成本的对比打车 vs 开车的成本账演进方向是引入替代出行成本参考让用户理性选择出行方式。这四个方向都从费用页已有的柱状图与地点列表长出来让看统计变成做决策。十一、从设计稿到代码的映射把费用页设计稿翻译成代码有几组典型映射第一月度渐变卡映射为渐变容器加 36 号金额——设计稿的 8 月总费用卡代码里用深灰渐变背景容器内放 36 号加粗金额与 13 号标签左对齐排列第二柱状图映射为等分行内的高度计算容器——设计稿的五根深灰柱代码里用五个等权重列柱高按数值与最大值比例动态计算柱顶金额与柱底月份标签第三地点列表映射为圆形图标加信息加金额——设计稿的地点消费行代码里用圆形浅灰底图标、地点名与次数、深灰金额三段组合第四三区布局映射为滚动容器内的三个卡片——设计稿的月度卡、趋势图、地点列表代码里用滚动容器包三个卡片按间距排列。这四组映射展示了统计页的完整翻译手绘柱状图与圆形图标块是其中的视觉要点。十二、常见问题 FAQ问柱状图 6 月 310 元最高有什么含义答演示数据设计 6 月为停车消费高峰出行频繁4 月 220 元最低出行少。月度波动220-310反映的是出行节奏——出差多的月份停车费高、居家多的月份低。产品化后每根柱由当月记录动态汇总柱高变化直接对应实际出行情况。问地点消费为什么没有按占比展示像 App 54 那样答因为地点消费更适合列表而非占比条——3 个地点的次数与金额差异大公司 20 次 vs 医院 3 次列表的次数 金额比占比条信息更全占比只有比例没有绝对值。设计选择取决于数据形态分类占比适合结构清晰的维度地点次数适合频次 金额的维度。问为什么市医院只有 3 次 24 元答演示数据设计医院为低频停车场景就医才去3 次公司为高频每天上班20 次万达居中购物8 次——三个地点覆盖高频/中频/低频的典型分布让地点列表的次数维度有对比意义也体现了常用地点公司/万达/医院与使用频率的对应。十三、补充要点费用页三个细节再思考第一关于柱状图与首页的数据呼应。柱状图最后一根8月 ¥286与首页本月停车费 286.00完全一致——趋势图以当前月收尾用户看趋势时最后一眼落在当月与首页数字对上形成首页给结论、费用页给过程的呼应。第二关于地点的圆形图标。费用页用正圆图标块44×44、圆角 22而首页用圆角方块48×48、圆角 10——同应用的图标容器两种形态方块在列表、圆形在统计圆形更统计感像数据点方块更列表感视觉上与页面职能匹配。第三关于金额的中性呈现。费用页金额统一深灰不彩色——统计页追求冷静的数据呈现彩色金额会分散对趋势与结构的注意力深灰让数据本身说话这与首页的品牌色、费用页的深灰主题一脉相承。十四、最后总结费用页作为停车缴费记录的统计页用三个可视化区块完成了停车费用的完整分析月度卡给结论8 月 286 元、柱状图给趋势4-8 月 220-310 波动、6 月最高、地点列表给结构公司 400 元占大头、医院 24 元低频。整页没有用户卡与菜单是系列中纯数据页的又一代表——第 3 Tab 完全让给费用分析体现停车记录数据驱动的产品重心。手绘柱状图与圆形图标块展示了 ArkUI 基础组件完成数据可视化的能力。从演示到产品费用页的进化方向是动态聚合数据驱动图表、预算预警超预算变红、次均成本分析、出行方式对比从看统计走向做决策。十五、补充要点柱状图与地点列表的细节再思考本页的两个可视化区块有几个细节值得再思考第一柱状图的当月收尾——5 根柱以 8 月286 元收尾与首页本月停车费 286.00完全一致——柱状图展示的是过去到现在的趋势最后一根永远落在当前月用户看趋势时最后一眼看到的就是本月数据与首页对上号这是首页结论 费用页过程的呼应设计产品化后柱状图应随月份自动滚动当前月永远在最后。第二地点列表的次数 金额双信息——每行同时展示20 次停车频次与¥400金额比单看金额多一层解读——公司 20 次 400 元说明高频高额每天上班必停医院 3 次 24 元说明低频低额偶尔就医频次与金额的组合让地点消费有行为画像。第三圆形图标与方块图标的形态分工——本页圆形44×44 正圆与首页方块48×48 圆角区分页面职能统计 vs 列表但同一应用的图标 emoji 一致 公司、️ 万达用户跨页识别无门槛。第四金额的右对齐纵向可比——三行金额右对齐成列400/96/24用户纵向扫一眼就能比较各地点花费大小公司 400 元一骑绝尘一目了然右对齐是数字列表的可比性基础。这四个细节共同保证费用页看得懂、比得清、对得上账。十六、最后补充费用页解析至此完整收尾月度渐变卡、五柱趋势图、地点消费列表全部覆盖。读者可重点回顾柱状图高度公式数值乘比例系数除最大值与圆形图标块的实现——手绘图表与形态分工是统计页的视觉要点。停车费用的分析从这一页展开286 元的当月结论、220 到 310 的月度波动、公司车库 400 元的占比三组数据让用户既看到花了多少也看到花在哪、怎么花的这是停车缴费记录的数据分析能力。补充说明费用页的三个区块月度卡、柱状图、地点列表数据完全对账——月度卡 286 元等于柱状图 8 月 286 元地点列表的公司 400 元等于单次 20 元乘 20 次读者可对照源码与首页数据逐一验证这是数据自洽在统计页的典型体现。