HarmonyOS开发之Gauge(环形图表)的简单使用

效果图：

代码块：

@Entry
@Component
struct GaugePage {@Builder descriptionBuilder() {Text('优').maxFontSize(30).minFontSize(30).fontColor("#fffa2a2d").fontWeight(FontWeight.Medium).width('100%').height("100%").textAlign(TextAlign.Center)}build() {Column() {Gauge({ value: 50}) {Column() {Text('50').maxFontSize(80).minFontSize(60).fontWeight(FontWeight.Medium).fontColor("#ff182431").width('40%').height('30%').textAlign(TextAlign.Center).margin({ top: '22.2%' }).textOverflow({ overflow: TextOverflow.Ellipsis }).maxLines(1)Text('空气质量').maxFontSize("16.0fp").minFontSize("10.0vp").fontColor($r('sys.color.ohos_id_color_text_secondary')).fontColor($r('sys.color.ohos_id_color_text_secondary')).fontWeight(FontWeight.Regular).width('67.4%').height('9.5%').textAlign(TextAlign.Center)}.width('100%').height('100%')}.startAngle(225).endAngle(135).colors(new LinearGradient([{ color: "#e84026", offset: 0 },{ color: "#f7ce00", offset: 0.6 },{ color: "#64bb5c", offset: 1 }])).width('80%').height('80%').strokeWidth(18).trackShadow({ radius: 7, offsetX: 7, offsetY: 7 }).description(this.descriptionBuilder).padding(18)}.margin({ top: 40 }).width('100%').height('100%')}
}