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