Gauge

數據量規圖表組件，用于將數據展示為環形圖表。

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

子組件

可以包含單個子組件。

說明：
建議使用文本組件構建當前數值文本和輔助文本。
若子組件寬高為百分比形式，則基準范圍為以外圓環做為內切圓的矩形。

接口

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

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

參數：

參數名	參數類型	必填	參數描述
value	number	是	量規圖的當前數據值，即圖中指針指向位置。用于組件創建時量規圖初始值的預置。說明：value不在min和max范圍內時使用min作為默認值。
min	number	否	當前數據段最小值。默認值：0
max	number	否	當前數據段最大值。默認值：100說明：max小于min時使用默認值0和100。 max和min支持負數。

屬性

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

名稱	參數類型	描述
value	number	設置量規圖的數據值，可用于動態修改量規圖的數據值。默認值：0 從API version 9開始，該接口支持在ArkTS卡片中使用。
startAngle	number	設置起始角度位置，時鐘0點為0度，順時針方向為正角度。默認值：0 從API version 9開始，該接口支持在ArkTS卡片中使用。
endAngle	number	設置終止角度位置，時鐘0點為0度，順時針方向為正角度。默認值：360 從API version 9開始，該接口支持在ArkTS卡片中使用。
colors	[ResourceColor11+]	[LinearGradient11+]
strokeWidth	Length	設置環形量規圖的環形厚度。默認值：4 單位：vp 從API version 9開始，該接口支持在ArkTS卡片中使用。說明：設置小于0的值時，按默認值顯示。不支持百分比。
description11+	[CustomBuilder]	設置說明文本。說明：@Builder中內由開發者自定義，建議使用文本或者圖片。若自定義部分的寬高為百分比形式，則基準范圍為圓環直徑的44.4%25.4%的矩形（圖片為28.6%28.6%），距離圓環底部0vp，左右居中。設置null則不顯示內容。不設置則依賴是否設置數據最大最小值。若設置最大最小值或者只設置其中一個，則顯示最大最小值。若未設置最大最小值，則不顯示內容。最大最小值顯示在圓環底部，位置不可移動，若圓環開口角度設置不恰當，存在圓環遮擋文字的情況。
trackShadow11+	[GaugeShadowOptions]	設置陰影樣式。說明：陰影顏色與圓環顏色一致。設置null為不開啟投影。
indicator11+	[GaugeIndicatorOptions]	設置指針樣式。說明：設置null則不顯示指針。

ColorStop

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

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

名稱	類型定義	描述
ColorStop	[[ResourceColor]	[LinearGradient11+], number]

GaugeShadowOptions11+對象說明

名稱	參數類型	必填	描述
radius	number	[Resource]	否
offsetX	number	[Resource]	否
offsetY	number	[Resource]	否

GaugeIndicatorOptions11+對象說明

名稱	參數類型	必填	描述
icon	[Resource]	否	圖標資源路徑。說明：不配置則使用默認的三角形樣式指針。支持使用svg格式的圖標，若使用其他格式，則使用默認的三角形樣式指針。
space	[Dimension]	否	指針距離圓環外邊的間距。(不支持百分比) 默認值：8 單位：vp說明：對于默認的三角形樣式指針，間距為黑色三角形到圓環外邊的間距。若設置值小于0，則使用默認值。若設置值大于圓環半徑，則使用默認值。`HarmonyOS與OpenHarmony鴻蒙文檔籽料：mau123789是v直接拿`

鴻蒙文檔.png

示例

// xxx.ets
@Entry
@Component
struct GaugeExample {
  build() {
    Column({ space: 20 }) {
      // 使用默認的min和max為0-100，角度范圍默認0-360，value值設置
      // 參數中設置當前值為75
      Gauge({ value: 75 })
        .width(200).height(200)
        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      
      // 參數設置當前值為75，屬性設置值為25，屬性設置優先級高
      Gauge({ value: 75 })
        .value(25) // 屬性和參數都設置時以屬性為準
        .width(200).height(200)
        .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      
      // 210--150度環形圖表
      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 })
  }
}