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