Gauge

數(shù)據(jù)量規(guī)圖表組件，用于將數(shù)據(jù)展示為環(huán)形圖表。

說明：
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 ：[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]點擊或者復(fù)制轉(zhuǎn)到。
該組件從API Version 8開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標單獨標記該內(nèi)容的起始版本。

子組件

可以包含單個子組件。

說明：

建議使用文本組件構(gòu)建當前數(shù)值文本和輔助文本。

若子組件寬高為百分比形式，則基準范圍為以外圓環(huán)做為內(nèi)切圓的矩形。

接口

Gauge(options:{value: number, min?: number, max?: number})

從API version 9開始，該接口支持在ArkTS卡片中使用。

參數(shù)：

屬性

除支持[通用屬性]外，還支持以下屬性：

ColorStop

顏色斷點類型，用于描述漸進色顏色斷點。

從API version 9開始，該接口支持在ArkTS卡片中使用。

GaugeShadowOptions11+對象說明

GaugeIndicatorOptions11+對象說明

示例

// xxx.ets
@Entry
@Component
struct GaugeExample {
  build() {
    Column({ space: 20 }) {
      // 使用默認的min和max為0-100，角度范圍默認0-360，value值設(shè)置
      // 參數(shù)中設(shè)置當前值為75
      Gauge({ value: 75 })
        .width(200).height(200)
        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      
      // 參數(shù)設(shè)置當前值為75，屬性設(shè)置值為25，屬性設(shè)置優(yōu)先級高
      Gauge({ value: 75 })
        .value(25) // 屬性和參數(shù)都設(shè)置時以屬性為準
        .width(200).height(200)
        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      
      // 210--150度環(huán)形圖表
      Gauge({ value: 30, min: 0, max: 100 })
        .startAngle(210)
        .endAngle(150)
        .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]])
        .strokeWidth(20)
        .width(200)
        .height(200)
    }.width('100%').margin({ top: 5 })
  }
}