1# Gauge 2 3数据量规图表组件，用于将数据展示为环形图表。 4 5 6> **说明：** 7> 8> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 子组件 12 13可以包含单个子组件。 14 15> **说明：** 16> 17> 建议使用文本组件构建当前数值文本和辅助文本。 18> 19> 若子组件宽高为百分比形式，则基准范围为以外圆环做为内切圆的矩形。 20 21 22## 接口 23 24Gauge(options: GaugeOptions) 25 26创建数据量规图表组件。 27 28**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 29 30**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 31 32**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34**参数：** 35 36| 参数名 | 类型 | 必填 | 说明 | 37| -------- | -------- | -------- | -------- | 38| options | [GaugeOptions](#gaugeoptions18对象说明)| 是 | 数据量规图表组件参数。 | 39 40## GaugeOptions<sup>18+</sup>对象说明 41 42**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 43 44**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 45 46**系统能力：** SystemCapability.ArkUI.ArkUI.Full 47 48| 名称 | 类型 | 必填 | 说明 | 49| -------- | -------- | -------- | -------- | 50| value<sup>8+</sup> | number | 是 | 量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br/>**说明：** <br/>value不在min和max范围内时使用min作为默认值。 | 51| min<sup>8+</sup> | number | 否 | 当前数据段最小值。<br/>默认值：0<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 52| max<sup>8+</sup> | number | 否 | 当前数据段最大值。<br/>默认值：100<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。<br/>**说明：** <br/>max小于min时使用默认值0和100。<br/>max和min支持负数。 | 53 54## 属性 55 56除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 57 58### value 59 60value(value: number) 61 62设置量规图的数据值。 63 64**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 65 66**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 67 68**系统能力：** SystemCapability.ArkUI.ArkUI.Full 69 70**参数：** 71 72| 参数名 | 类型 | 必填 | 说明 | 73| ------ | ------ | ---- | ------------------------------------------------------------ | 74| value | number | 是 | 量规图的数据值，可用于动态修改量规图的数据值。<br/>默认值：0 | 75 76### startAngle 77 78startAngle(angle: number) 79 80设置起始角度位置。 81 82**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 83 84**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88**参数：** 89 90| 参数名 | 类型 | 必填 | 说明 | 91| ------ | ------ | ---- | ------------------------------------------------------------ | 92| angle | number | 是 | 起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：0 | 93 94### endAngle 95 96endAngle(angle: number) 97 98设置终止角度位置。起始角度位置和终止角度位置差过小时，会绘制出异常图像，请取合理的起始角度位置和终止角度位置。建议使用单色环改变Gauge的value参数实现数据值的调节，可通过定时器setTimeout进行数值的延迟加载。 99 100**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 101 102**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 103 104**系统能力：** SystemCapability.ArkUI.ArkUI.Full 105 106**参数：** 107 108| 参数名 | 类型 | 必填 | 说明 | 109| ------ | ------ | ---- | ------------------------------------------------------------ | 110| angle | number | 是 | 终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：360 | 111 112### colors 113 114colors(colors: ResourceColor | LinearGradient | Array<[ResourceColor | LinearGradient, number]>) 115 116设置量规图的颜色。 117 118从API version 11开始，该接口使用以下规则： 119 120参数类型为ResourceColor，则圆环类型为单色环。 121 122参数类型为LinearGradient，则圆环类型为渐变环。 123 124参数类型为数组，则圆环类型为分段渐变环，第一个参数为颜色值，若设置为非颜色类型，则置为"0xFFE84026"。第二个参数为颜色所占比重，若设置为负数或是非数值类型，则将比重置为0。 125 126分段渐变环最大显示段数为9段，若多于9段，则多于部分不显示。 127 128**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 129 130**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 131 132**系统能力：** SystemCapability.ArkUI.ArkUI.Full 133 134**参数：** 135 136| 参数名 | 类型 | 必填 | 说明 | 137| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 138| colors | [ResourceColor<sup>11+</sup>](ts-types.md#resourcecolor) \| [LinearGradient<sup>11+</sup>](ts-basic-components-datapanel.md#lineargradient10) \| Array<[[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient<sup>11+</sup>](ts-basic-components-datapanel.md#lineargradient10) \, number]> | 是 | 量规图的颜色，支持分段颜色设置。<br/>API version 9 默认值：Color.Black<br/>API version 11默认值：<br/>若不传颜色，或者数组为空，无法确定圆环类型及颜色，则圆环颜色为"0xFF64BB5C"、"0xFFF7CE00"、"0xFFE84026"的渐变环。<br/>若传入颜色，但颜色值有误，则该颜色为"0xFFE84026"。<br/>若对应颜色的比重为0，则该颜色在圆环中不显示。若所有颜色比重均为0，圆环不显示。 | 139 140### strokeWidth 141 142strokeWidth(length: Length) 143 144设置环形量规图的环形厚度。 145 146**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 147 148**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 149 150**系统能力：** SystemCapability.ArkUI.ArkUI.Full 151 152**参数：** 153 154| 参数名 | 类型 | 必填 | 说明 | 155| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 156| length | [Length](ts-types.md#length) | 是 | 环形量规图的环形厚度。<br/>默认值：4<br/>单位：vp<br/>**说明：** <br/>设置小于0的值时，按默认值显示。<br/>环形厚度的最大值为圆环的半径，超过最大值按最大值处理。<br/>不支持百分比。 | 157 158### description<sup>11+</sup> 159 160description(value: CustomBuilder) 161 162设置说明内容。 163 164**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 165 166**系统能力：** SystemCapability.ArkUI.ArkUI.Full 167 168**参数：** 169 170| 参数名 | 类型 | 必填 | 说明 | 171| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 172| value | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 说明内容。<br/>**说明：** <br/>@Builder中的内容由开发者自定义，建议使用文本或者图片。<br/>若自定义部分的宽高为百分比形式，则基准范围为圆环直径的44.4%*25.4%的矩形（图片为28.6%*28.6%），距离圆环底部0vp，左右居中。<br/>设置null则不显示内容。<br/>不设置则依赖是否设置数据最大最小值。<br/>若设置最大最小值或者只设置其中一个，则显示最大最小值。<br/>若未设置最大最小值，则不显示内容。<br/>最大最小值显示在圆环底部，位置不可移动，若圆环开口角度设置不恰当，存在圆环遮挡文字的情况。 | 173 174### trackShadow<sup>11+</sup> 175 176trackShadow(value: GaugeShadowOptions) 177 178设置阴影样式。 179 180**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 181 182**系统能力：** SystemCapability.ArkUI.ArkUI.Full 183 184**参数：** 185 186| 参数名 | 类型 | 必填 | 说明 | 187| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 188| value | [GaugeShadowOptions](#gaugeshadowoptions11对象说明) | 是 | 阴影样式。<br/>**说明：** <br/>阴影颜色与圆环颜色一致。<br/>设置null为不开启投影。 | 189 190### indicator<sup>11+</sup> 191 192indicator(value: GaugeIndicatorOptions) 193 194设置指针样式。 195 196**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 197 198**系统能力：** SystemCapability.ArkUI.ArkUI.Full 199 200**参数：** 201 202| 参数名 | 类型 | 必填 | 说明 | 203| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 204| value | [GaugeIndicatorOptions](#gaugeindicatoroptions11对象说明) | 是 | 指针样式。<br/>**说明：** <br/>设置null则不显示指针。 | 205 206### privacySensitive<sup>12+</sup> 207 208privacySensitive(isPrivacySensitiveMode: Optional\<boolean\>) 209 210设置隐私敏感。 211 212**卡片能力：** 从API version 12开始，该接口支持在ArkTS卡片中使用。 213 214**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 215 216**系统能力：** SystemCapability.ArkUI.ArkUI.Full 217 218**参数：** 219 220| 参数名 | 类型 | 必填 | 说明 | 221| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 222| isPrivacySensitiveMode | [Optional\<boolean\>] | 是 | 设置隐私敏感，隐私模式下Gauge指针指向0位置，最大值最小值文本将被遮罩，量程显示灰色或者底色。<br/>**说明：** <br/>设置null则不敏感。<br/><!--Del--><br/>需要在卡片中使用Gauge，并用[FormComponent](./ts-basic-components-formcomponent-sys.md)组件设置[隐私遮罩](./ts-universal-attributes-obscured.md)属性显示卡片时才有隐私遮罩效果。<!--DelEnd--> | 223 224### contentModifier<sup>12+</sup> 225 226contentModifier(modifier: ContentModifier\<GaugeConfiguration>) 227 228定制Gauge内容区的方法。 229 230**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 231 232**系统能力：** SystemCapability.ArkUI.ArkUI.Full 233 234**参数：** 235 236| 参数名 | 类型 | 必填 | 说明 | 237| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 238| modifier | [ContentModifier\<GaugeConfiguration>](#gaugeconfiguration12对象说明) | 是 | 在Gauge组件上，定制内容区的方法。<br/>modifier： 内容修改器，开发者需要自定义class实现ContentModifier接口。 | 239 240## GaugeShadowOptions<sup>11+</sup>对象说明 241 242GaugeShadowOptions继承自[MultiShadowOptions](ts-types.md#multishadowoptions10)，具有MultiShadowOptions的全部属性。 243 244**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 245 246## GaugeIndicatorOptions<sup>11+</sup>对象说明 247 248**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 249 250**系统能力：** SystemCapability.ArkUI.ArkUI.Full 251 252| 名称 | 类型 | 必填 | 说明 | 253| ------------- | ------- | ---- | -------- | 254| icon | [ResourceStr](ts-types.md#resourcestr) | 否 | 图标资源路径。<br/>**说明：** <br/>不配置则使用默认的三角形样式指针。<br/>支持使用svg格式的图标，若使用其他格式，则使用默认的三角形样式指针。 | 255| space | [Dimension](ts-types.md#dimension10) | 否 | 指针距离圆环外边的间距。(不支持百分比) <br/>默认值：8<br/>单位：vp <br/>**说明：** <br/> 对于默认的三角形样式指针，间距为黑色三角形到圆环外边的间距。<br/> 若设置值小于0，则使用默认值。<br/>若设置值大于圆环半径，则使用默认值。| 256 257## GaugeConfiguration<sup>12+</sup>对象说明 258 259开发者需要自定义class实现ContentModifier接口。 260 261**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 262 263**系统能力：** SystemCapability.ArkUI.ArkUI.Full 264 265| 名称 | 类型 | 必填 | 说明 | 266| ------ | ------ | ----| ---------------- | 267| value | number | 是 | 当前数据值。 | 268| min | number | 是 | 当前数据段最小值。 | 269| max | number | 是 | 当前数据段最大值。 | 270 271 272## 示例 273### 示例1（设置多色量规图） 274 275该示例通过colors接口，实现了多色量规图效果。 276 277```ts 278@Entry 279@Component 280struct Gauge1 { 281 @Builder 282 descriptionBuilder() { 283 Text('说明文本') 284 .maxFontSize('30sp') 285 .minFontSize("10.0vp") 286 .fontColor("#fffa2a2d") 287 .fontWeight(FontWeight.Medium) 288 .width('100%') 289 .height("100%") 290 .textAlign(TextAlign.Center) 291 } 292 293 build() { 294 Column() { 295 Gauge({ value: 50, min: 1, max: 100 }) { 296 Column() { 297 Text('50') 298 .fontWeight(FontWeight.Medium) 299 .width('62%') 300 .fontColor("#ff182431") 301 .maxFontSize("60.0vp") 302 .minFontSize("30.0vp") 303 .textAlign(TextAlign.Center) 304 .margin({ top: '35%' }) 305 .textOverflow({ overflow: TextOverflow.Ellipsis }) 306 .maxLines(1) 307 Text('辅助文本') 308 .maxFontSize("16.0fp") 309 .minFontSize("10.0vp") 310 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 311 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 312 .fontWeight(FontWeight.Regular) 313 .width('67.4%') 314 .height('9.5%') 315 .textAlign(TextAlign.Center) 316 }.width('100%').height('100%') 317 } 318 .value(50) 319 .startAngle(210) 320 .endAngle(150) 321 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 322 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 323 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 324 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 325 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 326 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 327 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 328 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 329 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 330 .width('80%') 331 .height('80%') 332 .strokeWidth(18) 333 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 334 .description(this.descriptionBuilder) 335 .padding(18) 336 }.margin({ top: 40 }).width('100%').height('100%') 337 } 338} 339``` 340 341 342### 示例2（设置单色量规图） 343 344该示例通过colors接口，实现了单色量规图效果。 345 346```ts 347@Entry 348@Component 349struct Gauge2 { 350 @Builder 351 descriptionBuilderImage() { 352 Image($r('sys.media.ohos_ic_public_clock')).width(72).height(72) 353 } 354 355 build() { 356 Column() { 357 Gauge({ value: 50, min: 1, max: 100 }) { 358 Column() { 359 Text('50') 360 .fontWeight(FontWeight.Medium) 361 .width('62%') 362 .fontColor("#ff182431") 363 .maxFontSize("60.0vp") 364 .minFontSize("30.0vp") 365 .textAlign(TextAlign.Center) 366 .margin({ top: '35%' }) 367 .textOverflow({ overflow: TextOverflow.Ellipsis }) 368 .maxLines(1) 369 }.width('100%').height('100%') 370 } 371 .startAngle(210) 372 .endAngle(150) 373 .colors('#cca5d61d') 374 .width('80%') 375 .height('80%') 376 .strokeWidth(18) 377 .description(this.descriptionBuilderImage) 378 .padding(18) 379 }.margin({ top: 40 }).width('100%').height('100%') 380 } 381} 382``` 383 384 385### 示例3（设置定制说明区） 386 387该示例通过description接口，实现了说明区的设置功能。 388 389```ts 390@Entry 391@Component 392struct Gauge3 { 393 @Builder 394 descriptionBuilder() { 395 Text('说明文本') 396 .maxFontSize('30sp') 397 .minFontSize("10.0vp") 398 .fontColor("#fffa2a2d") 399 .fontWeight(FontWeight.Medium) 400 .width('100%') 401 .height("100%") 402 .textAlign(TextAlign.Center) 403 } 404 405 build() { 406 Column() { 407 Column() { 408 Gauge({ value: 50, min: 1, max: 100 }) { 409 Column() { 410 Text('50') 411 .fontWeight(FontWeight.Medium) 412 .width('62%') 413 .fontColor("#ff182431") 414 .maxFontSize("60.0vp") 415 .minFontSize("30.0vp") 416 .textAlign(TextAlign.Center) 417 .margin({ top: '35%' }) 418 .textOverflow({ overflow: TextOverflow.Ellipsis }) 419 .maxLines(1) 420 }.width('100%').height('100%') 421 } 422 .startAngle(210) 423 .endAngle(150) 424 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 425 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 426 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 427 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 428 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 429 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 430 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 431 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 432 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 433 .width('80%') 434 .height('80%') 435 .strokeWidth(18) 436 .description(this.descriptionBuilder) 437 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 438 .padding(18) 439 }.margin({ top: 40 }).width('100%').height('100%') 440 } 441 } 442} 443``` 444 445 446### 示例4（设置辅助区） 447 448该示例通过设置子组件，实现了辅助区的设置功能。 449 450```ts 451@Entry 452@Component 453struct Gauge4 { 454 build() { 455 Column() { 456 Gauge({ value: 50, min: 1, max: 100 }) { 457 Column() { 458 Text('50') 459 .maxFontSize("72.0vp") 460 .minFontSize("10.0vp") 461 .fontColor("#ff182431") 462 .width('40%') 463 .textAlign(TextAlign.Center) 464 .margin({ top: '35%' }) 465 .textOverflow({ overflow: TextOverflow.Ellipsis }) 466 .maxLines(1) 467 Text('辅助文本') 468 .maxFontSize("30.0vp") 469 .minFontSize("18.0vp") 470 .fontWeight(FontWeight.Medium) 471 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 472 .width('62%') 473 .height('15.9%') 474 .textAlign(TextAlign.Center) 475 }.width('100%').height('100%') 476 } 477 .startAngle(210) 478 .endAngle(150) 479 .colors([[new LinearGradient([{ color: "#deb6fb", offset: 0 }, { color: "#ac49f5", offset: 1 }]), 9], 480 [new LinearGradient([{ color: "#bbb7fc", offset: 0 }, { color: "#564af7", offset: 1 }]), 8], 481 [new LinearGradient([{ color: "#f5b5c2", offset: 0 }, { color: "#e64566", offset: 1 }]), 7], 482 [new LinearGradient([{ color: "#f8c5a6", offset: 0 }, { color: "#ed6f21", offset: 1 }]), 6], 483 [new LinearGradient([{ color: "#fceb99", offset: 0 }, { color: "#f7ce00", offset: 1 }]), 5], 484 [new LinearGradient([{ color: "#dbefa5", offset: 0 }, { color: "#a5d61d", offset: 1 }]), 4], 485 [new LinearGradient([{ color: "#c1e4be", offset: 0 }, { color: "#64bb5c", offset: 1 }]), 3], 486 [new LinearGradient([{ color: "#c0ece5", offset: 0 }, { color: "#61cfbe", offset: 1 }]), 2], 487 [new LinearGradient([{ color: "#b5e0f4", offset: 0 }, { color: "#46b1e3", offset: 1 }]), 1]]) 488 .width('80%') 489 .height('80%') 490 .strokeWidth(18) 491 .description(null) 492 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 493 .padding(18) 494 }.margin({ top: 40 }).width('100%').height('100%') 495 } 496} 497``` 498 499 500### 示例5（设置最大最小值） 501 502该示例通过设置min，max属性，实现了量规图的最大最小值设置的功能。 503 504```ts 505@Entry 506@Component 507struct Gauge5 { 508 build() { 509 Column() { 510 Gauge({ value: 50, min: 1, max: 100 }) { 511 Column() { 512 Text('50') 513 .maxFontSize("80sp") 514 .minFontSize("60.0vp") 515 .fontWeight(FontWeight.Medium) 516 .fontColor("#ff182431") 517 .width('40%') 518 .height('30%') 519 .textAlign(TextAlign.Center) 520 .margin({ top: '22.2%' }) 521 .textOverflow({ overflow: TextOverflow.Ellipsis }) 522 .maxLines(1) 523 }.width('100%').height('100%') 524 } 525 .startAngle(225) 526 .endAngle(135) 527 .colors(new LinearGradient([{ color: "#e84026", offset: 0 }, 528 { color: "#f7ce00", offset: 0.6 }, 529 { color: "#64bb5c", offset: 1 }])) 530 .width('80%') 531 .height('80%') 532 .strokeWidth(18) 533 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 534 .padding(18) 535 }.margin({ top: 40 }).width('100%').height('100%') 536 } 537} 538``` 539 540 541### 示例6（设置指针） 542 543该示例通过indicator接口，实现了设置量规图的指针的功能。 544 545```ts 546@Entry 547@Component 548struct Gauge6 { 549 build() { 550 Column() { 551 Gauge({ value: 50, min: 1, max: 100 }) { 552 Column() { 553 Text('50') 554 .maxFontSize('60sp') 555 .minFontSize('30.0vp') 556 .fontWeight(FontWeight.Medium) 557 .fontColor("#ff182431") 558 .width('62%') 559 .textAlign(TextAlign.Center) 560 .margin({ top: '35%' }) 561 .textOverflow({ overflow: TextOverflow.Ellipsis }) 562 .maxLines(1) 563 Text('辅助文本') 564 .maxFontSize('16sp') 565 .minFontSize("10.0vp") 566 .fontColor($r('sys.color.ohos_id_color_text_secondary')) 567 .fontWeight(FontWeight.Regular) 568 .width('67.4%') 569 .height('9.5%') 570 .textAlign(TextAlign.Center) 571 }.width('100%').height('100%') 572 } 573 .startAngle(225) 574 .endAngle(135) 575 .colors(Color.Red) 576 .width('80%') 577 .height('80%') 578 .indicator(null) 579 .strokeWidth(18) 580 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 581 .padding(18) 582 }.margin({ top: 40 }).width('100%').height('100%') 583 } 584} 585``` 586 587 588### 示例7（设置起止角度） 589 590该示例通过startAngle、endAngle接口，实现了量规图起止角度设置的功能。 591 592```ts 593@Entry 594@Component 595struct Gauge7 { 596 build() { 597 Column() { 598 Gauge({ value: 50, min: 1, max: 100 }) { 599 Column() { 600 Text('50') 601 .maxFontSize('60sp') 602 .minFontSize('30.0vp') 603 .fontWeight(FontWeight.Medium) 604 .fontColor("#ff182431") 605 .width('62%') 606 .textAlign(TextAlign.Center) 607 .margin({ top: '35%' }) 608 .textOverflow({ overflow: TextOverflow.Ellipsis }) 609 .maxLines(1) 610 }.width('100%').height('100%') 611 } 612 .startAngle(225) 613 .endAngle(135) 614 .colors(Color.Red) 615 .width('80%') 616 .height('80%') 617 .indicator(null) 618 .strokeWidth(18) 619 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 620 .padding(18) 621 }.margin({ top: 40 }).width('100%').height('100%') 622 } 623} 624``` 625 626 627 628 629### 示例8（设置定制内容区） 630 631该示例通过contentModifier接口，实现了定制量规图内容区的功能。 632 633```ts 634// xxx.ets 635//该示例实现了Gauge组件使用Builder定制内容区，使用了环形图表组件，按钮和文本框。点击增加按钮，环形图表指针位置会向右偏移，反之点减少按钮环形图表指针位置会向左偏移。 636@Builder 637function buildGauge(config: GaugeConfiguration) { 638 Column({ space: 30 }) { 639 Row() { 640 Text('【ContentModifier】 value：' + JSON.stringify((config.contentModifier as MyGaugeStyle).value) + 641 ' min：' + JSON.stringify((config.contentModifier as MyGaugeStyle).min) + 642 ' max：' + JSON.stringify((config.contentModifier as MyGaugeStyle).max)) 643 .fontSize(12) 644 } 645 646 Text('【Config】value：' + config.value + ' min：' + config.min + ' max：' + config.max).fontSize(12) 647 Gauge({ 648 value: config.value, 649 min: config.min, 650 max: config.max 651 }).width("50%") 652 } 653 .width("100%") 654 .padding(20) 655 .margin({ top: 5 }) 656 .alignItems(HorizontalAlign.Center) 657} 658 659class MyGaugeStyle implements ContentModifier<GaugeConfiguration> { 660 value: number = 0 661 min: number = 0 662 max: number = 0 663 664 constructor(value: number, min: number, max: number) { 665 this.value = value 666 this.min = min 667 this.max = max 668 } 669 670 applyContent(): WrappedBuilder<[GaugeConfiguration]> { 671 return wrapBuilder(buildGauge) 672 } 673} 674 675@Entry 676@Component 677struct refreshExample { 678 @State gaugeValue: number = 20 679 @State gaugeMin: number = 0 680 @State gaugeMax: number = 100 681 682 build() { 683 Column({ space: 20 }) { 684 Gauge({ 685 value: this.gaugeValue, 686 min: this.gaugeMin, 687 max: this.gaugeMax 688 }) 689 .contentModifier(new MyGaugeStyle(30, 10, 100)) 690 691 Column({ space: 20 }) { 692 Row({ space: 20 }) { 693 Button('增加').onClick(() => { 694 if (this.gaugeValue < this.gaugeMax) { 695 this.gaugeValue += 1 696 } 697 }) 698 Button('减少').onClick(() => { 699 if (this.gaugeValue > this.gaugeMin) { 700 this.gaugeValue -= 1 701 } 702 }) 703 } 704 }.width('100%') 705 }.width('100%').margin({ top: 5 }) 706 } 707} 708``` 709 710 711 712### 示例9（设置隐私隐藏） 713 714该示例通过privacySensitive接口，实现了隐私隐藏效果，效果展示需要卡片框架支持 715 716```ts 717@Entry 718@Component 719struct GaugeExample { 720 build() { 721 Scroll() { 722 Column({ space: 15 }) { 723 Row() { 724 Gauge({ value: 50, min: 1, max: 100 }) { 725 Column() { 726 Text('60') 727 .maxFontSize("180sp") 728 .minFontSize("160.0vp") 729 .fontWeight(FontWeight.Medium) 730 .fontColor("#ff182431") 731 .width('40%') 732 .height('30%') 733 .textAlign(TextAlign.Center) 734 .margin({ top: '22.2%' }) 735 .textOverflow({ overflow: TextOverflow.Ellipsis }) 736 .maxLines(1) 737 }.width('100%').height('100%') 738 } 739 .startAngle(225) 740 .endAngle(135) 741 .colors(Color.Red) 742 .width('80%') 743 .height('80%') 744 .strokeWidth(18) 745 .trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }) 746 .padding(18) 747 .privacySensitive(true) 748 } 749 } 750 } 751 } 752} 753``` 754 755 756### 示例10（设置自定义指针） 757 758该示例通过indicator接口，实现了自定义指针功能，开发者导入svg类型的图片以替换默认指针。 759 760```ts 761@Entry 762@Component 763struct Gauge2 { 764 build() { 765 Column() { 766 Gauge({ value: 50, min: 1, max: 100 }) 767 .indicator({ space: 10, icon: $r('app.media.indicator') }) 768 .startAngle(210) 769 .endAngle(150) 770 .colors('#cca5d61d') 771 .width('80%') 772 .height('80%') 773 .strokeWidth(18) 774 .padding(18) 775 }.margin({ top: 40 }).width('100%').height('100%') 776 } 777} 778``` 779```xml 780<svg width="200px" height="200px"> 781 <path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z" 782 stroke="black" stroke-width="3" fill="white"> 783 </path> 784</svg> 785``` 786
