1# Gauge 2 3The **Gauge** component represents a gauge that displays data in a circular format. 4 5 6> **NOTE** 7> 8> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version. 9 10 11## Child Components 12 13This component can contain only one child component. 14 15> **NOTE** 16> 17> You are advised to use the **Text** component to build the current value and auxiliary text. 18> 19> If the width and height of the child component are in percentage, the reference range is the rectangle that has the outer ring as its inscribed circle. 20 21 22## APIs 23 24Gauge(options: GaugeOptions) 25 26Creates a gauge. 27 28**Widget capability**: This API can be used in ArkTS widgets since API version 9. 29 30**Atomic service API**: This API can be used in atomic services since API version 11. 31 32**System capability**: SystemCapability.ArkUI.ArkUI.Full 33 34**Parameters** 35 36| Name| Type| Mandatory| Description| 37| -------- | -------- | -------- | -------- | 38| options | [GaugeOptions](#gaugeoptions14)| Yes| Settings of the gauge.| 39 40## GaugeOptions<sup>14+</sup> 41 42**Widget capability**: This API can be used in ArkTS widgets since API version 14. 43 44**Atomic service API**: This API can be used in atomic services since API version 14. 45 46**System capability**: SystemCapability.ArkUI.ArkUI.Full 47 48| Name| Type| Mandatory| Description| 49| -------- | -------- | -------- | -------- | 50| value<sup>8+</sup> | number | Yes| Current value of the gauge, that is, the position to which the indicator points in the gauge. It is used as the initial value of the gauge when it is created.<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.<br>**NOTE**<br>If the value is not within the range defined by the **min** and **max** parameters, the value of **min** is used.| 51| min<sup>8+</sup> | number | No| Minimum value of the current data segment.<br>Default value: **0**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.| 52| max<sup>8+</sup> | number | No| Maximum value of the current data segment.<br>Default value: **100**<br>**Widget capability**: This API can be used in ArkTS widgets since API version 9.<br>**Atomic service API**: This API can be used in atomic services since API version 11.<br>**NOTE**<br>If the value of **max** is less than that of **min**, the default values **0** and **100** are used.<br>The values of **max** and **min** can be negative numbers.| 53 54## Attributes 55 56In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 57 58### value 59 60value(value: number) 61 62Sets the value of the gauge. 63 64**Widget capability**: This API can be used in ArkTS widgets since API version 9. 65 66**Atomic service API**: This API can be used in atomic services since API version 11. 67 68**System capability**: SystemCapability.ArkUI.ArkUI.Full 69 70**Parameters** 71 72| Name| Type | Mandatory| Description | 73| ------ | ------ | ---- | ------------------------------------------------------------ | 74| value | number | Yes | Value of the gauge. It can be dynamically changed.<br>Default value: **0**| 75 76### startAngle 77 78startAngle(angle: number) 79 80Sets the start angle of the gauge. 81 82**Widget capability**: This API can be used in ArkTS widgets since API version 9. 83 84**Atomic service API**: This API can be used in atomic services since API version 11. 85 86**System capability**: SystemCapability.ArkUI.ArkUI.Full 87 88**Parameters** 89 90| Name| Type | Mandatory| Description | 91| ------ | ------ | ---- | ------------------------------------------------------------ | 92| angle | number | Yes | Start angle of the gauge. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **0**| 93 94### endAngle 95 96endAngle(angle: number) 97 98Sets the end angle of the gauge. Ensure an appropriate difference between the start angle and end angle. If this difference is too small, the drawn chart may be abnormal. You are advised to use a monochrome ring to set the **value** attribute of the **Gauge**. You can also use **setTimeout** to delay value loading. 99 100**Widget capability**: This API can be used in ArkTS widgets since API version 9. 101 102**Atomic service API**: This API can be used in atomic services since API version 11. 103 104**System capability**: SystemCapability.ArkUI.ArkUI.Full 105 106**Parameters** 107 108| Name| Type | Mandatory| Description | 109| ------ | ------ | ---- | ------------------------------------------------------------ | 110| angle | number | Yes | End angle of the gauge. The value **0** indicates 0 degrees, and a positive value indicates the clockwise direction.<br>Default value: **360**| 111 112### colors 113 114colors(colors: ResourceColor | LinearGradient | Array<[ResourceColor | LinearGradient, number]>) 115 116Sets the colors of the gauge. 117 118Since API version 11, this API follows the following rules: 119 120If the data type is ResourceColor, the ring is of the monochrome type. 121 122If the data type is LinearGradient, the ring is of the gradient type. 123 124If the data type is Array, the ring is of the gradient type. The first parameter indicates the color value. If it is set to a non-color value, the color of 0xFFE84026 is used. The second parameter indicates the color weight. If it is set to a negative number or a non-numeric value, the color weight is 0. 125 126A ring of the gradient type contains a maximum of nine color segments. If there are more than nine segments, the excess is not displayed. 127 128**Widget capability**: This API can be used in ArkTS widgets since API version 9. 129 130**Atomic service API**: This API can be used in atomic services since API version 11. 131 132**System capability**: SystemCapability.ArkUI.ArkUI.Full 133 134**Parameters** 135 136| Name| Type | Mandatory| Description | 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]> | Yes | Colors of the gauge. You can set colors for individual segments.<br>Default value in API version 9: **Color.Black**<br>Default value in API version 11:<br>If no color is provided or the array is empty, the ring color will be a gradient consisting of the following colors: 0xFF64BB5C, 0xFFF7CE00, and 0xFFE84026.<br>If a color value is provided but invalid, the ring will be in the color of 0xFFE84026.<br>Colors with a weight of 0 are not displayed in the ring. If all weights are 0, the ring is not displayed.| 139 140### strokeWidth 141 142strokeWidth(length: Length) 143 144Sets the stroke width of the gauge. 145 146**Widget capability**: This API can be used in ArkTS widgets since API version 9. 147 148**Atomic service API**: This API can be used in atomic services since API version 11. 149 150**System capability**: SystemCapability.ArkUI.ArkUI.Full 151 152**Parameters** 153 154| Name| Type | Mandatory| Description | 155| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 156| length | [Length](ts-types.md#length) | Yes | Stroke width of the gauge.<br>Default value: **4**<br>Unit: vp<br>**NOTE**<br>If a value less than 0 is set, the default value is used.<br>If the value exceeds the maximum value, the radius of the gauge, the maximum value is used.<br>The value cannot be in percentage.| 157 158### description<sup>11+</sup> 159 160description(value: CustomBuilder) 161 162Sets the description of the gauge. 163 164**Atomic service API**: This API can be used in atomic services since API version 12. 165 166**System capability**: SystemCapability.ArkUI.ArkUI.Full 167 168**Parameters** 169 170| Name| Type | Mandatory| Description | 171| ------ | ------------------------------------------- | ---- | ------------------------------------------------------------ | 172| value | [CustomBuilder](ts-types.md#custombuilder8) | Yes | Description.<br>**NOTE**<br>You need to customize the content – text or imagery recommended – in @Builder.<br>If the width and height of the custom content are in percentage, the reference range is a rectangle that is 44.4% of the diameter of the ring horizontally and 25.4% vertically (for images, it is 28.6% both horizontally and vertically), positioned 0 vp away from the bottom of the ring and centered horizontally.<br>If this parameter is set to null, no description is displayed.<br>If this parameter is not set, what's displayed is subject to the maximum and minimum value settings.<br>If either or both of the maximum and minimum values are set, they are displayed.<br>If neither maximum nor minimum values are set, no description is displayed.<br>The maximum and minimum values are displayed at the bottom of the ring and cannot be relocated. They may be blocked by the ring if the ring's start and end angles are not set properly.| 173 174### trackShadow<sup>11+</sup> 175 176trackShadow(value: GaugeShadowOptions) 177 178Sets the shadow style of the gauge. 179 180**Atomic service API**: This API can be used in atomic services since API version 12. 181 182**System capability**: SystemCapability.ArkUI.ArkUI.Full 183 184**Parameters** 185 186| Name| Type | Mandatory| Description | 187| ------ | --------------------------------------------------- | ---- | ------------------------------------------------------------ | 188| value | [GaugeShadowOptions](#gaugeshadowoptions11) | Yes | Shadow style.<br>**NOTE**<br>The shadow color is the same as the ring color.<br>If this attribute is set to **null**, the shadow effect is disabled.| 189 190### indicator<sup>11+</sup> 191 192indicator(value: GaugeIndicatorOptions) 193 194Sets the indicator style of the gauge. 195 196**Atomic service API**: This API can be used in atomic services since API version 12. 197 198**System capability**: SystemCapability.ArkUI.ArkUI.Full 199 200**Parameters** 201 202| Name| Type | Mandatory| Description | 203| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 204| value | [GaugeIndicatorOptions](#gaugeindicatoroptions11) | Yes | Indicator style.<br>**NOTE**<br>If this attribute is set to **null**, no indicator is displayed.| 205 206### privacySensitive<sup>12+</sup> 207 208privacySensitive(isPrivacySensitiveMode: Optional\<boolean\>) 209 210Sets whether to enable privacy mode. 211 212**Widget capability**: This API can be used in ArkTS widgets since API version 12. 213 214**Atomic service API**: This API can be used in atomic services since API version 12. 215 216**System capability**: SystemCapability.ArkUI.ArkUI.Full 217 218**Parameters** 219 220| Name| Type | Mandatory| Description | 221| ------ | --------------------------------------------------------- | ---- | ----------------------------------------------------- | 222| isPrivacySensitiveMode | [Optional\<boolean\>] | Yes | Whether to enable privacy mode. In privacy mode, the gauge indicator points to **0**, the maximum and minimum values are masked, and the scale range is displayed in gray or the background color.<br>**NOTE**<br>If this parameter is set to **null**, privacy mode is disabled.<br>[Enabling privacy mode requires widget framework support.](./ts-universal-attributes-obscured.md) | 223 224### contentModifier<sup>12+</sup> 225 226contentModifier(modifier: ContentModifier\<GaugeConfiguration>) 227 228Creates a content modifier. 229 230**Atomic service API**: This API can be used in atomic services since API version 12. 231 232**System capability**: SystemCapability.ArkUI.ArkUI.Full 233 234**Parameters** 235 236| Name| Type | Mandatory| Description | 237| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 238| modifier | [ContentModifier\<GaugeConfiguration>](#gaugeconfiguration12)| Yes | Content modifier to apply to the current component.<br>**modifier**: content modifier. You need a custom class to implement the **ContentModifier** API.| 239 240## GaugeShadowOptions<sup>11+</sup> 241 242Inherits from [MultiShadowOptions](ts-types.md#multishadowoptions10) and has all attributes of **MultiShadowOptions**. 243 244**Atomic service API**: This API can be used in atomic services since API version 12. 245 246## GaugeIndicatorOptions<sup>11+</sup> 247 248**Atomic service API**: This API can be used in atomic services since API version 12. 249 250**System capability**: SystemCapability.ArkUI.ArkUI.Full 251 252| Name | Type| Mandatory| Description| 253| ------------- | ------- | ---- | -------- | 254| icon | [ResourceStr](ts-types.md#resourcestr) | No| Image path of the icon.<br>**NOTE**<br>If this parameter is not set, the default triangle style indicator is used.<br>Icons in SVG format are supported. If icons in other formats are used, the default triangle style indicator is used.| 255| space | [Dimension](ts-types.md#dimension10) | No| Distance between the indicator and the outer edge of the ring. The value cannot be in percentage.<br>Default value: **8**<br>Unit: vp<br>**NOTE**<br> For the default triangle style indicator, the distance is the amount of space between the triangle and the outer edge of the ring.<br> If this parameter is set to a value less than 0, the default value will be used.<br>If this parameter is set to a value greater than the ring radius, the default value will be used.| 256 257## GaugeConfiguration<sup>12+</sup> 258 259You need a custom class to implement the **ContentModifier** API. 260 261**Atomic service API**: This API can be used in atomic services since API version 12. 262 263**System capability**: SystemCapability.ArkUI.ArkUI.Full 264 265| Name | Type | Mandatory| Description | 266| ------ | ------ | ----| ---------------- | 267| value | number | Yes| Current value.| 268| min | number | Yes| Minimum value of the current data segment.| 269| max | number | Yes| Maximum value of the current data segment.| 270 271 272## Example 273### Example 1: Implementing a Multi-color Gauge 274 275This example demonstrates how to implement a multi-color gauge using the **colors** attribute. 276 277```ts 278@Entry 279@Component 280struct Gauge1 { 281 @Builder 282 descriptionBuilder() { 283 Text('Description') 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('Auxiliary 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### Example 2: Implementing a Single-Color Gauge 343 344This example demonstrates how to implement a single-color gauge using the **colors** attribute. 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### Example 3: Configuring a Custom Description Area 386 387This example illustrates how to configure a custom description area using the **description** attribute. 388 389```ts 390@Entry 391@Component 392struct Gauge3 { 393 @Builder 394 descriptionBuilder() { 395 Text('Description') 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### Example 4: Configuring the Auxiliary Area 447 448This example demonstrates how to configure the auxiliary area by setting child components. 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('Auxiliary 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### Example 5: Setting the Minimum and Maximum Values 501 502This example shows how to set the minimum and maximum values of the gauge by configuring **min** and **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### Example 6: Setting the Indicator 542 543This example illustrates how to set the indicator of the gauge using the **indicator** attribute. 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('Auxiliary 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### Example 7: Setting the Start and End Angles 589 590This example demonstrates how to set the start and end angles of the gauge using the **startAngle** and **endAngle** attributes. 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### Example 8: Setting the Custom Content Area 630 631This example shows how to customize the content area of the gauge using the **contentModifier** attribute. 632 633```ts 634// xxx.ets 635// The example implements the customization of the gauge's content area using a Builder, utilizing a circular chart, buttons, and text boxes. When the increase button is clicked, the indicator will shift to the right; conversely, when the decrease button is clicked, the indicator will shift to the left. 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('Increase').onClick(() => { 694 if (this.gaugeValue < this.gaugeMax) { 695 this.gaugeValue += 1 696 } 697 }) 698 Button('Decrease').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### Example 9: Securing Sensitive Information 713 714This example illustrates how to secure sensitive information using the **privacySensitive** attribute. Note that the display requires widget framework support. 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### Example 10: Implementing a Custom Indicator 757 758This example demonstrates how to implement a custom indicator using **indicator**. You can import an SVG image to replace the default indicator. 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 787
