当前位置：首页 > news >正文

HarmonyOS6 PC 端 Gauge 仪表盘组件实战：实时监控数据的可视化利器

news 2026/6/5 14:00:52

前言

在系统监控、设备管理、IoT 控制台这类应用中，仪表盘是最经典的数据可视化形式之一。圆弧形的指针读数、醒目的数值显示、颜色渐变的报警区域……这些设计不只是好看，它们的存在是为了让用户在最短时间内感知到当前状态是"正常"还是"危险"。

HarmonyOS ArkUI 提供了Gauge组件，专门用来渲染这种圆弧形仪表盘。它支持自定义起止角度、多段颜色渐变，配合Slider滑块实现联动交互，非常适合做实时数据展示界面。本文结合一个模拟 CPU 使用率的完整案例，把Gauge组件的核心用法、配色逻辑、状态预警联动全部讲清楚。

状态设计：用一个值驱动多个 UI 元素

@StategaugeValue:number=65@StategaugeLabel:string='CPU 使用率'

只需要两个状态：gaugeValue是核心数值，范围 0~100；gaugeLabel是标签文字。整个界面的仪表盘、数值文字、状态提示、滑块，都是由gaugeValue这一个状态驱动的。这体现了 ArkUI 声明式 UI 的设计哲学：一处状态，多处响应。

Gauge 组件的核心配置

Gauge({value:this.gaugeValue,min:0,max:100}).width(200).height(200).startAngle(210).endAngle(150).colors([['#4D96FF',1],['#FFD93D',1],['#FF6B6B',1]])

逐个属性拆解：

value、min、max：仪表盘的当前值和范围。当value是 65，min是 0，max是 100 时，指针指向 65% 的位置。

startAngle和endAngle：仪表盘圆弧的起止角度，单位是度数，以时钟 12 点方向为 0 度，顺时针增加。startAngle(210)大约是 7 点钟方向，endAngle(150)大约是 5 点钟方向。这两个参数共同决定了仪表盘的"张口"范围，270 度的圆弧是仪表盘最常见的形态。

.colors()：设置仪表盘圆弧的颜色段。参数是一个二维数组，每个子数组包含两个元素：颜色值和该颜色段的权重（weight）。三段都是权重 1，意味着三段颜色各占圆弧的 1/3。蓝色区域对应低值，黄色对应中值，红色对应高值，形成从"安全"到"危险"的视觉过渡。

数值显示与状态文字

Text(`${this.gaugeValue}%`).fontSize(40).fontWeight(FontWeight.Bold).fontColor('#4D96FF')Text(this.gaugeLabel).fontSize(14).fontColor('#888888').margin({top:4})Text(this.gaugeValue>=80?'⚠️ 负载过高':this.gaugeValue>=50?'⚡ 正常运行':'✅ 负载较低').fontSize(13).fontColor(this.gaugeValue>=80?'#FF6B6B':this.gaugeValue>=50?'#FFA500':'#6BCB77').margin({top:4})

这里用了两层三目运算符实现了三档状态判断：

gaugeValue >= 80：负载过高，显示红色警告
50 <= gaugeValue < 80：正常运行，显示橙色提示
gaugeValue < 50：负载较低，显示绿色正常

文字颜色和状态提示都随gaugeValue动态变化，和仪表盘的颜色区域形成视觉呼应。当指针进入红色区域时，下方文字也变红，用户能立刻感受到异常。

三种控制方式：按钮 + 滑块联动

Row({space:8}){Button('增加').onClick(()=>{this.gaugeValue=Math.min(100,this.gaugeValue+10)})Button('减少').onClick(()=>{this.gaugeValue=Math.max(0,this.gaugeValue-10)})Button('随机').onClick(()=>{this.gaugeValue=Math.floor(Math.random()*100)})}.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:16})Text('拖拽滑块调整').fontSize(11).fontColor('#888888').margin({top:8})Slider({value:$$this.gaugeValue,min:0,max:100,step:1}).trackColor('#E0E0E0').selectedColor('#4D96FF').width('100%')

按钮控制：

"增加"按钮：每次 +10，用Math.min(100, ...)防止超过最大值
"减少"按钮：每次 -10，用Math.max(0, ...)防止低于最小值
"随机"按钮：生成 0~99 的随机整数，模拟监控数据的随机波动

滑块联动：

Slider用了$$this.gaugeValue双向绑定语法（$$是 ArkUI 的双向绑定操作符）。拖动滑块会直接修改gaugeValue，仪表盘、数值文字、状态提示会同步更新，无需额外的事件处理代码。这是 ArkUI 里非常优雅的联动方式。

trackColor('#E0E0E0')设置轨道背景色，selectedColor('#4D96FF')设置已滑过部分的颜色。

完整代码

@Entry@Componentstruct gaugeLabelDemo{@StateisShow:boolean=true@StategaugeValue:number=65@StategaugeLabel:string='CPU 使用率'build(){Column(){if(this.isShow){Scroll(){Column(){Text('Gauge 仪表盘').fontSize(18).fontWeight(FontWeight.Bold).margin({bottom:8})Column(){Text('仪表盘组件').fontSize(14).fontWeight(FontWeight.Medium).margin({bottom:12})Column(){Gauge({value:this.gaugeValue,min:0,max:100}).width(200).height(200).startAngle(210).endAngle(150).colors([['#4D96FF',1],['#FFD93D',1],['#FF6B6B',1]])}.width('100%').alignItems(HorizontalAlign.Center)Text(`${this.gaugeValue}%`).fontSize(40).fontWeight(FontWeight.Bold).fontColor('#4D96FF')Text(this.gaugeLabel).fontSize(14).fontColor('#888888').margin({top:4})Text(this.gaugeValue>=80?'⚠️ 负载过高':this.gaugeValue>=50?'⚡ 正常运行':'✅ 负载较低').fontSize(13).fontColor(this.gaugeValue>=80?'#FF6B6B':this.gaugeValue>=50?'#FFA500':'#6BCB77').margin({top:4})Row({space:8}){Button('增加').onClick(()=>{this.gaugeValue=Math.min(100,this.gaugeValue+10)})Button('减少').onClick(()=>{this.gaugeValue=Math.max(0,this.gaugeValue-10)})Button('随机').onClick(()=>{this.gaugeValue=Math.floor(Math.random()*100)})}.width('100%').justifyContent(FlexAlign.SpaceEvenly).margin({top:16})Text('拖拽滑块调整').fontSize(11).fontColor('#888888').margin({top:8})Slider({value:$$this.gaugeValue,min:0,max:100,step:1}).trackColor('#E0E0E0').selectedColor('#4D96FF').width('100%')}.width('100%').backgroundColor('#FFFFFF').borderRadius(12).padding(16)}.width('100%')}.layoutWeight(1)}}.width('100%').height('100%').backgroundColor('#F5F6FA').padding(16)}}

关键技巧：`$$`双向绑定

$$this.gaugeValue中的$$是 ArkUI 提供的双向绑定语法糖。普通的this.gaugeValue是把状态值传给子组件，只能单向同步；而$$this.gaugeValue则允许子组件（这里是Slider）直接修改父组件的状态变量。

适用$$的前提：子组件内部会改变这个值，并且你想让改变自动同步回父组件状态。Toggle、Slider、TextInput这类有用户输入的组件，配合$$使用最省代码。

角度计算的小技巧

startAngle(210)和endAngle(150)这两个数值初看让人困惑。ArkUI 中 Gauge 的角度以时钟 12 点方向为 0 度，顺时针增加：

12 点方向 = 0 度
3 点方向 = 90 度
6 点方向 = 180 度
9 点方向 = 270 度
210 度 ≈ 7 点方向（左下）
150 度 ≈ 5 点方向（右下）

从 210 度（左下）顺时针到 150 度（右下），中间经过 12 点方向（顶部），圆弧跨度是 300 度，形成经典的仪表盘"大张口"造型。

总结

Gauge组件是 HarmonyOS ArkUI 中专为仪表盘场景设计的可视化组件，通过value/min/max控制指针位置，startAngle/endAngle控制圆弧范围，colors设置多段渐变配色。配合Slider的$$双向绑定，可以用极少的代码实现流畅的滑块联动交互。

本文展示的三档状态预警设计——绿色正常、橙色注意、红色危险——是监控类界面的标准范式。通过在fontColor和Text内容上都使用条件表达式，让颜色与文字同步变化，用户能在第一时间感知系统状态，而不需要去读精确数值。

掌握了Gauge组件，配合DataPanel，你已经具备了在 HarmonyOS 应用中构建数据监控仪表盘的完整能力。无论是 CPU/内存使用率、电量状态、还是 IoT 设备的传感器读数，这套组合都能胜任。

查看全文

http://www.jsqmd.com/news/955481/