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 | 是 | 量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值的预置。<br/>**说明：** <br/>value不在min和max范围内时使用min作为默认值。 | 27| min | number | 否 | 当前数据段最小值。<br/>默认值：0 | 28| max | number | 否 | 当前数据段最大值。<br/>默认值：100<br/>**说明：** <br/>max小于min时使用默认值0和100。<br/>max和min支持负数。 | 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<[[ResourceColor](ts-types.md#resourcecolor), number]> | 设置量规图的颜色，支持分段颜色设置。<br/>默认值：Color.Black<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/> 第一个参数为颜色值，若设置为非颜色类型，则置为黑色。第二个参数为颜色所占比重，若设置为负数或是非数值类型，则将比重置为0。 | 40| strokeWidth | Length | 设置环形量规图的环形厚度。<br/>默认值：4<br/>单位：vp<br/>从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**说明：** <br/>设置小于等于0的值时，按默认值显示。<br/>不支持百分比。 | 41 42## 示例 43 44 45```ts 46// xxx.ets 47@Entry 48@Component 49struct GaugeExample { 50 build() { 51 Column({ space: 20 }) { 52 // 使用默认的min和max为0-100，角度范围默认0-360，value值设置 53 // 参数中设置当前值为75 54 Gauge({ value: 75 }) 55 .width(200).height(200) 56 .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) 57 58 // 参数设置当前值为75，属性设置值为25，属性设置优先级高 59 Gauge({ value: 75 }) 60 .value(25) // 属性和参数都设置时以属性为准 61 .width(200).height(200) 62 .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]]) 63 64 // 210--150度环形图表 65 Gauge({ value: 30, min: 0, max: 100 }) 66 .startAngle(210) 67 .endAngle(150) 68 .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]]) 69 .strokeWidth(20) 70 .width(200) 71 .height(200) 72 }.width('100%').margin({ top: 5 }) 73 } 74} 75``` 76 77 78
