1# Gauge 2 3数据量规图表组件，用于将数据展示为环形图表。 4 5 6> **说明：** 7> 8> 该组件从API Version 8开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 9 10 11## 子组件 12 13无 14 15 16## 接口 17 18Gauge(options:{value: number, min?: number, max?: number}) 19 20从API version 9开始，该接口支持在ArkTS卡片中使用。 21 22**参数：** 23 24| 参数名 | 参数类型 | 必填 | 参数描述 | 25| -------- | -------- | -------- | -------- | 26| value | number | 是 | 量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。 | 27| min | number | 否 | 当前数据段最小值。<br/>默认值：0 | 28| max | number | 否 | 当前数据段最大值。<br/>默认值：100 | 29 30## 属性 31 32除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 33 34| 名称 | 参数类型 | 描述 | 35| -------- | -------- | -------- | 36| value | number | 设置量规图的数据值，可用于动态修改量规图的数据值。<br/>默认值：0<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 37| startAngle | number | 设置起始角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：0<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 38| endAngle | number | 设置终止角度位置，时钟0点为0度，顺时针方向为正角度。<br/>默认值：360<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 39| colors | Array<[ColorStop](#colorstop)> | 设置量规图的颜色，支持分段颜色设置。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 40| strokeWidth | Length | 设置环形量规图的环形厚度。<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。 | 41 42## ColorStop 43 44颜色断点类型，用于描述渐进色颜色断点。 45 46从API version 9开始，该接口支持在ArkTS卡片中使用。 47 48| 名称 | 类型定义 | 描述 | 49| --------- | -------------------- | ------------------------------------------------------------ | 50| ColorStop | [[ResourceColor](ts-types.md#resourcecolor), number] | 描述渐进色颜色断点类型，第一个参数为颜色值，若设置为非颜色类型，则置为黑色。第二个参数为颜色所占比重，若设置为负数或是非数值类型，则将比重置为0，该颜色不显示。 | 51 52 53## 示例 54 55 56```ts 57// xxx.ets 58@Entry 59@Component 60struct GaugeExample { 61 build() { 62 Column({ space: 20 }) { 63 // 使用默认的min和max为0-100，角度范围默认0-360，value值设置 64 // 参数中设置当前值为75 65 Gauge({ value: 75 }) 66 .width(200).height(200) 67 .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) 68 69 // 参数设置当前值为75，属性设置值为25，属性设置优先级高 70 Gauge({ value: 75 }) 71 .value(25) // 属性和参数都设置时以参数为准 72 .width(200).height(200) 73 .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) 74 75 // 210--150度环形图表 76 Gauge({ value: 30, min: 0, max: 100 }) 77 .startAngle(210) 78 .endAngle(150) 79 .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]]) 80 .strokeWidth(20) 81 .width(200) 82 .height(200) 83 }.width('100%').margin({ top: 5 }) 84 } 85} 86``` 87 88 89
