一、引言仪表盘Gauge是人类最古老的量化展示方式之一。从汽车仪表盘上的速度表、医疗设备上的血压计到工业控制面板上的温度表——环形刻度盘以指针刻度颜色分区的组合在极小的空间内同时传递了当前值是多少、“处于什么范围”、离临界值还有多远三层信息。在移动应用的数据可视化场景中Gauge 是最有张力的展示组件之一。与线性进度条Progress不同Gauge 天然具有视觉焦点——它的圆形结构将用户的视线自然地吸引到中心配合弧形轨迹和梯度色彩创造了进度条难以达到的紧迫感和氛围感。当你需要让用户立刻注意到某个指标的状态时比如 CPU 接近满载、体温接近危险区Gauge 比任何表格和数字都更有效。ArkUI 提供了原生的Gauge组件专为环形仪表盘场景设计。通过Gauge({ value, min, max })构造函数定义数值范围通过.startAngle()和.endAngle()控制弧形的开口范围和方向通过.colors()定义梯度色带如绿→黄→红通过.strokeWidth()控制环的粗细——这些参数组合起来可以创造出从精致的圆形进度环到气势磅礴的半圆弧仪表等丰富多彩的视觉效果。本文将通过一个完整的**“设备监控仪表盘”**实战案例深入解析 Gauge 组件的构造方式、角度控制、梯度色彩映射、滑块联动和预设值快速切换。阅读完本文你将能够掌握 Gauge 的构造参数value、min、max和核心属性理解 startAngle 和 endAngle 对仪表盘弧形的影响使用 colors() 构建动态梯度色带映射实现 Gauge 与 Slider 的双向联动通过预设按钮实现快速数值切换二、Gauge 核心 API 详解2.1 构造函数value / min / maxGauge 组件的构造函数接受三个核心参数Gauge({value:number,// 当前值指针指向的位置min?:number,// 最小值默认 0max?:number,// 最大值默认 100})这三个参数定义了仪表盘的数据域。min和max决定了刻度的范围value决定了指针或填充弧的当前位置。在我们的 Demo 中Gauge({value:this.values[idx],min:0,max:100})四个仪表盘CPU、内存、存储、温度使用了不同的初始值45、62、78、35在页面上形成了从绿色正常到黄色中度再到红色高负载的完整梯度展示。min和max的值不需要是整数也不必须是 0 和 100——它们可以是任意数值范围。比如一个体温计仪表盘可以设为min: 35, max: 42一个压力计可以设为min: 0, max: 200。2.2 startAngle 与 endAngle弧形的开口startAngle和endAngle是 Gauge 组件最具视觉影响力的两个属性。它们控制仪表盘弧形的起始角度和终止角度使用度数制而非弧度制从 3 点钟方向开始顺时针计算。.startAngle(150)// 从 150° 开始大约 8 点钟方向.endAngle(390)// 到 390° 结束绕一圈多 30°即 9 点钟方向常见的角度组合及其视觉效果用途startAngleendAngle视觉效果圆形进度环0360完整的圆环无缺口大半圆弧150390底部留一个 120° 的缺口类似汽车仪表盘半圆弧180360上半圆环类似速度表大半弧下方135405底部留 90° 缺口环更宽扇形22531590° 扇形类似音量指示在我们的 Demo 中四个仪表盘使用了不同的角度配置{startAngle:150,endAngle:390},// CPU240° 弧长底部 120° 缺口{startAngle:160,endAngle:380},// 内存220° 弧长底部 140° 缺口{startAngle:135,endAngle:405},// 存储270° 弧长底部 90° 缺口{startAngle:180,endAngle:360},// 温度180° 半圆弧不同的角度配置产生了不同的仪表盘个性——存储空间使用最开放的弧度270°暗示空间是充裕的温度使用最收敛的半圆弧180°暗示温度区间是有限的。这是一种通过视觉元素传递语义的设计手法。2.3 strokeWidth环的视觉重量.strokeWidth(18)// 18vp 粗的环形strokeWidth控制仪表环的粗细即线条宽度。较细的环如 8-12vp显得精致、含蓄适合用作小尺寸的状态指示较粗的环如 18-24vp更有视觉重量适合用作页面级的大指标展示。在我们的 Demo 中{strokeWidth:18},// CPU中等粗细标准仪表{strokeWidth:14},// 内存稍细精致感{strokeWidth:22},// 存储最粗强调空间的视觉量感{strokeWidth:16},// 温度标准粗细2.4 colors()梯度色彩映射colors()是 Gauge 组件最强大的可视化特性。它接受一个Array[ResourceColor, number]类型的参数——每个元素是一个[颜色, 百分比权重]的元组.colors([[#52C41A,50],// 绿色占 50%[#FAAD14,30],// 黄色占 30%[#FF4D4F,20],// 红色占 20%])系统会根据各颜色的百分比权重自动计算它们在弧上的分布。权重不一定要加起来等于 100——系统会自动进行归一化计算——但建议使用总和为 100 的权重以便于理解和维护。在我们的 Demo 中色彩映射是动态的——根据当前值的大小绿色/黄色/红色的权重会变化functiongetColorStops(value:number):Array[ResourceColor,number]{if(value60){// 低负载绿色占主导return[[#52C41A,value],[#FAAD14,30],[#FF4D4F,10]];}elseif(value80){// 中负载黄色占主导return[[#52C41A,50],[#FAAD14,value],[#FF4D4F,10]];}else{// 高负载红色占主导return[[#52C41A,50],[#FAAD14,30],[#FF4D4F,value]];}}当value较小时绿色#52C41A的权重跟随value增长而增长给予足够的健康区间视觉占比。当value进入中负载时黄色的权重跟随value增长。当value进入高负载时红色的权重跟随value增长。这种动态色彩映射让仪表盘不仅能显示数值还能发出警告——当参数接近危险区域时红色部分自然扩大产生一种视觉上的压迫感比单纯看数字变化要有力得多。2.5 value 动态更新value属性可以通过链式调用动态更新Gauge({value:this.values[idx],min:0,max:100})当this.values[idx]通过 Slider 或预设按钮发生变化时Gauge 会自动重新渲染——指针会平滑地过渡到新位置具体过渡效果取决于设备支持。三、实战设备监控仪表盘3.1 页面整体设计设备监控仪表盘围绕运维/监控的场景设计包含 4 个独立的 Gauge 卡片CPU 使用率⚙️— 240° 弧长18vp 粗初始 45%内存使用率— 220° 弧长14vp 细初始 62%存储空间— 270° 弧长22vp 最粗初始 78%设备温度️— 180° 半圆弧16vp 粗初始 35%每个卡片包含标题行图标 标签 当前数值 状态标签Gauge 仪表140vp 高的 Stack 容器调节滑块min 到 max 范围步进 1预设按钮低/中/高三档快速跳转3.2 状态标签数值→语义的映射每个 Gauge 卡片右上角的状态标签将数值翻译为人类可读的语义functiongetStatusText(value:number):string{if(value80)return高负载;if(value60)return中度;return正常;}functiongetStatusColor(value:number):string{if(value80)return#FF4D4F;// 红色if(value60)return#FAAD14;// 黄色return#52C41A;// 绿色}状态标签的文字颜色和背景色使用了与 Gauge 色彩映射相同的颜色绿色正常、黄色中度、红色高负载。这个一致性很重要——用户看仪表盘的颜色红色弧段更多和看标签的颜色红色背景得到同样的这是个问题的信号。如果仪表盘使用绿/黄/红但标签使用其他颜色会造成认知上的不协调。标签的文字和数值使用相同的颜色通过getStatusColor()标签的背景使用颜色填充 白色文字形成一种药丸pill式的徽标效果。3.3 Slider 联动拖拽即时的参数调节每个 Gauge 卡片下方都有一个 Slider用于调节该指标的值Slider({value:this.values[idx],min:config.min,max:config.max,step:1}).onChange((value:number){constupdated:number[][];for(leti0;ithis.values.length;i){if(iidx){updated.push(value);}else{updated.push(this.values[i]);}}this.valuesupdated;})Slider 的拖动即时反映在 Gauge 上——这是State values数组与 Gauge 的value属性双向绑定的效果。用户拖动 Slider 的瞬间this.values[idx]更新为新的数值Gauge 的.value(this.values[idx])响应更新指针移动到新位置标题行中的数值显示同步更新getColorStops()重新计算色带分布颜色分区随之调整getStatusText()和getStatusColor()更新标签前端的深度响应在这里体现得淋漓尽致——单一的State变量变化驱动了 5 个不同视觉元素的同步更新。3.4 预设按钮低/中/高快速跳转每个卡片底部有三个预设按钮低/中/高允许用户一键将指标跳转到典型值Text(低).onClick((){/* 设为 20 */})Text(中).onClick((){/* 设为 65 */})Text(高).onClick((){/* 设为 90 */})这三个预设值20 / 65 / 90分别对应三种状态——低绿色主导、中黄色主导、高红色主导。用户可以通过这三个按钮快速体验 Gauge 在三种不同状态下的视觉效果点击低仪表盘变成绿/黄/红20:30:10绝大部分是绿色标签显示正常点击中仪表盘变成绿/黄/红50:65:10黄色弧段显著扩大标签显示中度点击高仪表盘变成绿/黄/红50:30:90红色弧段占据主导标签显示高负载预设按钮和 Slider 之间也保持了同步——点击预设按钮后Slider 的滑块会自动跳转到对应的位置因为 Slider 的value绑定到同一个this.values[idx]。3.5 不可变更新模式由于 ArkTS 要求State数组必须通过创建新数组来触发 UI 刷新所有的数组更新都使用了不可变更新模式constupdated:number[][];for(leti0;ithis.values.length;i){if(iidx){updated.push(value);// 创建新值}else{updated.push(this.values[i]);// 保持旧值引用}}this.valuesupdated;// 替换整个数组引用这种模式在之前的文章中多次出现GoalTrackerPage 的增减操作等但值得再次强调在 ArkTS 中直接修改State数组的元素如this.values[idx] value不会触发 UI 刷新。必须创建一个全新的数组并赋值给this.valuesArkUI 的声明式刷新机制才能检测到变化并触发重新渲染。四、完整代码结构页面组件树Column ├── Row标题栏设备监控 └── Scroll └── Column ├── CPU 卡片 │ ├── Row⚙️ CPU 使用率 45% 正常标签 │ ├── Gauge240°弧18vp粗动态色带 │ ├── Slider0-100步进1 │ └── Row低/中/高 三个预设按钮 ├── 内存卡片 │ └── 同上结构220°弧14vp细 ├── 存储卡片 │ └── 同上结构270°弧22vp粗 └── 温度卡片 └── 同上结构180°半圆弧16vp粗代码约 210 行核心聚焦 Gauge 的 value/min/max 构造函数、startAngle/endAngle 角度控制、colors() 动态色带映射、strokeWidth 环粗控制以及与 Slider 的双向联动。五、总结本文以设备监控仪表盘为应用场景深入解析了 ArkUI Gauge 仪表盘组件的核心 API、角度控制和色彩映射。回顾本文覆盖的核心要点Gauge 的本质环形仪表盘组件通过value当前值、min最小值、max最大值定义数据域通过指针或填充弧的位置直观展示数值。角度控制startAngle和endAngle定义弧形的形状从半圆弧180°-360°到完整圆环0°-360°再到超大半圆弧135°-405°不同的角度范围赋予仪表盘不同的性格。环粗控制strokeWidth定义环的线条粗细从精致的 8vp 到有分量的 24vp根据指标的重要性和展示空间选择。配合不同的角度范围相同的 strokeWidth 会产生不同的视觉重量。梯度色彩映射colors(Array[ResourceColor, number])定义多段色带每段由颜色和百分比权重组成。通过动态调整各段的权重实现数值越大、红色越多的自适应色彩表达。这是 Gauge 最核心的可视化能力。与 Slider 联动Gauge 的value属性绑定到State变量与 Slider 共享同一数据源实现拖拽即时的双向联动。配合预设按钮用户可以快速体验不同数值下的仪表盘视觉效果。状态语义化通过getStatusText()和getStatusColor()将抽象数值如 78翻译为人类可读的语义标签如中度/黄色与 Gauge 的色彩映射保持视觉语言一致。Gauge 是 ArkUI 中最有工业设计感的组件之一。它天然携带了仪表盘的隐喻——指针、刻度、色区这些视觉元素让人联想到飞机驾驶舱、汽车仪表盘、医疗监护仪——进而传递了一种精确、实时、重要的感觉。当你的应用需要展示某个关键指标时CPU、心率、温度、进度、评分不要只放一个数字——用一个 Gauge让数据说话的方式更有力量。
鸿蒙新特性——Gauge 仪表盘深度解析
一、引言仪表盘Gauge是人类最古老的量化展示方式之一。从汽车仪表盘上的速度表、医疗设备上的血压计到工业控制面板上的温度表——环形刻度盘以指针刻度颜色分区的组合在极小的空间内同时传递了当前值是多少、“处于什么范围”、离临界值还有多远三层信息。在移动应用的数据可视化场景中Gauge 是最有张力的展示组件之一。与线性进度条Progress不同Gauge 天然具有视觉焦点——它的圆形结构将用户的视线自然地吸引到中心配合弧形轨迹和梯度色彩创造了进度条难以达到的紧迫感和氛围感。当你需要让用户立刻注意到某个指标的状态时比如 CPU 接近满载、体温接近危险区Gauge 比任何表格和数字都更有效。ArkUI 提供了原生的Gauge组件专为环形仪表盘场景设计。通过Gauge({ value, min, max })构造函数定义数值范围通过.startAngle()和.endAngle()控制弧形的开口范围和方向通过.colors()定义梯度色带如绿→黄→红通过.strokeWidth()控制环的粗细——这些参数组合起来可以创造出从精致的圆形进度环到气势磅礴的半圆弧仪表等丰富多彩的视觉效果。本文将通过一个完整的**“设备监控仪表盘”**实战案例深入解析 Gauge 组件的构造方式、角度控制、梯度色彩映射、滑块联动和预设值快速切换。阅读完本文你将能够掌握 Gauge 的构造参数value、min、max和核心属性理解 startAngle 和 endAngle 对仪表盘弧形的影响使用 colors() 构建动态梯度色带映射实现 Gauge 与 Slider 的双向联动通过预设按钮实现快速数值切换二、Gauge 核心 API 详解2.1 构造函数value / min / maxGauge 组件的构造函数接受三个核心参数Gauge({value:number,// 当前值指针指向的位置min?:number,// 最小值默认 0max?:number,// 最大值默认 100})这三个参数定义了仪表盘的数据域。min和max决定了刻度的范围value决定了指针或填充弧的当前位置。在我们的 Demo 中Gauge({value:this.values[idx],min:0,max:100})四个仪表盘CPU、内存、存储、温度使用了不同的初始值45、62、78、35在页面上形成了从绿色正常到黄色中度再到红色高负载的完整梯度展示。min和max的值不需要是整数也不必须是 0 和 100——它们可以是任意数值范围。比如一个体温计仪表盘可以设为min: 35, max: 42一个压力计可以设为min: 0, max: 200。2.2 startAngle 与 endAngle弧形的开口startAngle和endAngle是 Gauge 组件最具视觉影响力的两个属性。它们控制仪表盘弧形的起始角度和终止角度使用度数制而非弧度制从 3 点钟方向开始顺时针计算。.startAngle(150)// 从 150° 开始大约 8 点钟方向.endAngle(390)// 到 390° 结束绕一圈多 30°即 9 点钟方向常见的角度组合及其视觉效果用途startAngleendAngle视觉效果圆形进度环0360完整的圆环无缺口大半圆弧150390底部留一个 120° 的缺口类似汽车仪表盘半圆弧180360上半圆环类似速度表大半弧下方135405底部留 90° 缺口环更宽扇形22531590° 扇形类似音量指示在我们的 Demo 中四个仪表盘使用了不同的角度配置{startAngle:150,endAngle:390},// CPU240° 弧长底部 120° 缺口{startAngle:160,endAngle:380},// 内存220° 弧长底部 140° 缺口{startAngle:135,endAngle:405},// 存储270° 弧长底部 90° 缺口{startAngle:180,endAngle:360},// 温度180° 半圆弧不同的角度配置产生了不同的仪表盘个性——存储空间使用最开放的弧度270°暗示空间是充裕的温度使用最收敛的半圆弧180°暗示温度区间是有限的。这是一种通过视觉元素传递语义的设计手法。2.3 strokeWidth环的视觉重量.strokeWidth(18)// 18vp 粗的环形strokeWidth控制仪表环的粗细即线条宽度。较细的环如 8-12vp显得精致、含蓄适合用作小尺寸的状态指示较粗的环如 18-24vp更有视觉重量适合用作页面级的大指标展示。在我们的 Demo 中{strokeWidth:18},// CPU中等粗细标准仪表{strokeWidth:14},// 内存稍细精致感{strokeWidth:22},// 存储最粗强调空间的视觉量感{strokeWidth:16},// 温度标准粗细2.4 colors()梯度色彩映射colors()是 Gauge 组件最强大的可视化特性。它接受一个Array[ResourceColor, number]类型的参数——每个元素是一个[颜色, 百分比权重]的元组.colors([[#52C41A,50],// 绿色占 50%[#FAAD14,30],// 黄色占 30%[#FF4D4F,20],// 红色占 20%])系统会根据各颜色的百分比权重自动计算它们在弧上的分布。权重不一定要加起来等于 100——系统会自动进行归一化计算——但建议使用总和为 100 的权重以便于理解和维护。在我们的 Demo 中色彩映射是动态的——根据当前值的大小绿色/黄色/红色的权重会变化functiongetColorStops(value:number):Array[ResourceColor,number]{if(value60){// 低负载绿色占主导return[[#52C41A,value],[#FAAD14,30],[#FF4D4F,10]];}elseif(value80){// 中负载黄色占主导return[[#52C41A,50],[#FAAD14,value],[#FF4D4F,10]];}else{// 高负载红色占主导return[[#52C41A,50],[#FAAD14,30],[#FF4D4F,value]];}}当value较小时绿色#52C41A的权重跟随value增长而增长给予足够的健康区间视觉占比。当value进入中负载时黄色的权重跟随value增长。当value进入高负载时红色的权重跟随value增长。这种动态色彩映射让仪表盘不仅能显示数值还能发出警告——当参数接近危险区域时红色部分自然扩大产生一种视觉上的压迫感比单纯看数字变化要有力得多。2.5 value 动态更新value属性可以通过链式调用动态更新Gauge({value:this.values[idx],min:0,max:100})当this.values[idx]通过 Slider 或预设按钮发生变化时Gauge 会自动重新渲染——指针会平滑地过渡到新位置具体过渡效果取决于设备支持。三、实战设备监控仪表盘3.1 页面整体设计设备监控仪表盘围绕运维/监控的场景设计包含 4 个独立的 Gauge 卡片CPU 使用率⚙️— 240° 弧长18vp 粗初始 45%内存使用率— 220° 弧长14vp 细初始 62%存储空间— 270° 弧长22vp 最粗初始 78%设备温度️— 180° 半圆弧16vp 粗初始 35%每个卡片包含标题行图标 标签 当前数值 状态标签Gauge 仪表140vp 高的 Stack 容器调节滑块min 到 max 范围步进 1预设按钮低/中/高三档快速跳转3.2 状态标签数值→语义的映射每个 Gauge 卡片右上角的状态标签将数值翻译为人类可读的语义functiongetStatusText(value:number):string{if(value80)return高负载;if(value60)return中度;return正常;}functiongetStatusColor(value:number):string{if(value80)return#FF4D4F;// 红色if(value60)return#FAAD14;// 黄色return#52C41A;// 绿色}状态标签的文字颜色和背景色使用了与 Gauge 色彩映射相同的颜色绿色正常、黄色中度、红色高负载。这个一致性很重要——用户看仪表盘的颜色红色弧段更多和看标签的颜色红色背景得到同样的这是个问题的信号。如果仪表盘使用绿/黄/红但标签使用其他颜色会造成认知上的不协调。标签的文字和数值使用相同的颜色通过getStatusColor()标签的背景使用颜色填充 白色文字形成一种药丸pill式的徽标效果。3.3 Slider 联动拖拽即时的参数调节每个 Gauge 卡片下方都有一个 Slider用于调节该指标的值Slider({value:this.values[idx],min:config.min,max:config.max,step:1}).onChange((value:number){constupdated:number[][];for(leti0;ithis.values.length;i){if(iidx){updated.push(value);}else{updated.push(this.values[i]);}}this.valuesupdated;})Slider 的拖动即时反映在 Gauge 上——这是State values数组与 Gauge 的value属性双向绑定的效果。用户拖动 Slider 的瞬间this.values[idx]更新为新的数值Gauge 的.value(this.values[idx])响应更新指针移动到新位置标题行中的数值显示同步更新getColorStops()重新计算色带分布颜色分区随之调整getStatusText()和getStatusColor()更新标签前端的深度响应在这里体现得淋漓尽致——单一的State变量变化驱动了 5 个不同视觉元素的同步更新。3.4 预设按钮低/中/高快速跳转每个卡片底部有三个预设按钮低/中/高允许用户一键将指标跳转到典型值Text(低).onClick((){/* 设为 20 */})Text(中).onClick((){/* 设为 65 */})Text(高).onClick((){/* 设为 90 */})这三个预设值20 / 65 / 90分别对应三种状态——低绿色主导、中黄色主导、高红色主导。用户可以通过这三个按钮快速体验 Gauge 在三种不同状态下的视觉效果点击低仪表盘变成绿/黄/红20:30:10绝大部分是绿色标签显示正常点击中仪表盘变成绿/黄/红50:65:10黄色弧段显著扩大标签显示中度点击高仪表盘变成绿/黄/红50:30:90红色弧段占据主导标签显示高负载预设按钮和 Slider 之间也保持了同步——点击预设按钮后Slider 的滑块会自动跳转到对应的位置因为 Slider 的value绑定到同一个this.values[idx]。3.5 不可变更新模式由于 ArkTS 要求State数组必须通过创建新数组来触发 UI 刷新所有的数组更新都使用了不可变更新模式constupdated:number[][];for(leti0;ithis.values.length;i){if(iidx){updated.push(value);// 创建新值}else{updated.push(this.values[i]);// 保持旧值引用}}this.valuesupdated;// 替换整个数组引用这种模式在之前的文章中多次出现GoalTrackerPage 的增减操作等但值得再次强调在 ArkTS 中直接修改State数组的元素如this.values[idx] value不会触发 UI 刷新。必须创建一个全新的数组并赋值给this.valuesArkUI 的声明式刷新机制才能检测到变化并触发重新渲染。四、完整代码结构页面组件树Column ├── Row标题栏设备监控 └── Scroll └── Column ├── CPU 卡片 │ ├── Row⚙️ CPU 使用率 45% 正常标签 │ ├── Gauge240°弧18vp粗动态色带 │ ├── Slider0-100步进1 │ └── Row低/中/高 三个预设按钮 ├── 内存卡片 │ └── 同上结构220°弧14vp细 ├── 存储卡片 │ └── 同上结构270°弧22vp粗 └── 温度卡片 └── 同上结构180°半圆弧16vp粗代码约 210 行核心聚焦 Gauge 的 value/min/max 构造函数、startAngle/endAngle 角度控制、colors() 动态色带映射、strokeWidth 环粗控制以及与 Slider 的双向联动。五、总结本文以设备监控仪表盘为应用场景深入解析了 ArkUI Gauge 仪表盘组件的核心 API、角度控制和色彩映射。回顾本文覆盖的核心要点Gauge 的本质环形仪表盘组件通过value当前值、min最小值、max最大值定义数据域通过指针或填充弧的位置直观展示数值。角度控制startAngle和endAngle定义弧形的形状从半圆弧180°-360°到完整圆环0°-360°再到超大半圆弧135°-405°不同的角度范围赋予仪表盘不同的性格。环粗控制strokeWidth定义环的线条粗细从精致的 8vp 到有分量的 24vp根据指标的重要性和展示空间选择。配合不同的角度范围相同的 strokeWidth 会产生不同的视觉重量。梯度色彩映射colors(Array[ResourceColor, number])定义多段色带每段由颜色和百分比权重组成。通过动态调整各段的权重实现数值越大、红色越多的自适应色彩表达。这是 Gauge 最核心的可视化能力。与 Slider 联动Gauge 的value属性绑定到State变量与 Slider 共享同一数据源实现拖拽即时的双向联动。配合预设按钮用户可以快速体验不同数值下的仪表盘视觉效果。状态语义化通过getStatusText()和getStatusColor()将抽象数值如 78翻译为人类可读的语义标签如中度/黄色与 Gauge 的色彩映射保持视觉语言一致。Gauge 是 ArkUI 中最有工业设计感的组件之一。它天然携带了仪表盘的隐喻——指针、刻度、色区这些视觉元素让人联想到飞机驾驶舱、汽车仪表盘、医疗监护仪——进而传递了一种精确、实时、重要的感觉。当你的应用需要展示某个关键指标时CPU、心率、温度、进度、评分不要只放一个数字——用一个 Gauge让数据说话的方式更有力量。
