ArkTS Gauge组件的用法（附带实例）

Gauge 是数据量规图表组件，用于将数据展示为环形图表。

Gauge默认样式

示例代码如下：

// 仪表盘组件：value 当前值，min 最小值，max 最大值
Gauge({ value: 50, min: 1, max: 100 }) {
  // 垂直排列的列，用于放置仪表盘内的文字
  Column() {
    // 主数值文本
    Text('50')
      .fontWeight(FontWeight.Medium)          // 字体粗细：中等
      .width('62%')                           // 宽度占父容器 62%
      .fontColor('#ff182431')                 // 字体颜色：深灰色
      .maxFontSize('60.0vp')                  // 最大字体大小 60vp
      .minFontSize('30.0vp')                  // 最小字体大小 30vp
      .textAlign(TextAlign.Center)            // 文字水平居中
      .margin({ top: '35%' })                 // 顶部外边距占父容器 35%
      .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出部分省略号显示
      .maxLines(1)                            // 最多显示一行

    // 辅助文本
    Text('辅助文本')
      .maxFontSize('16.0fp')                  // 最大字体大小 16fp
      .minFontSize('10.0vp')                  // 最小字体大小 10vp
      .fontColor($r('sys.color.ohos_id_color_text_secondary')) // 使用系统次级文本颜色
      .fontWeight(FontWeight.Regular)         // 字体粗细：常规
      .width('67.4%')                         // 宽度占父容器 67.4%
      .height('9.5%')                         // 高度占父容器 9.5%
      .textAlign(TextAlign.Center)            // 文字水平居中
  }
}

Gauge 组件的默认样式示例效果如下图所示：

Gauge属性配置

示例代码如下：

// 自定义 Builder：用于 Gauge 的 description 插槽
@Builder descriptionBuilderImage() {
  Image($r('sys.media.ohos_ic_public_clock'))   // 引用系统时钟图标
    .width(72)
    .height(72)
}

// 第一个 ListItem：标题行
ListItem() {
  Row() {
    Text('属性配置')
      .fontSize(20)
      .fontWeight(800)   // 800 对应 FontWeight.Bold
  }
}

// 第二个 ListItem：包含 Gauge 仪表盘
ListItem() {
  /**
   * value：量规图当前数据值，即指针指向的位置
   * min  ：当前数据段最小值
   * max  ：当前数据段最大值
   */
  Gauge({ value: 50, min: 1, max: 100 }) {
    Column() {
      Text('50')
        .fontWeight(FontWeight.Medium)
        .width('62%')
        .fontColor('#ff182431')
        .maxFontSize('60.0vp')
        .minFontSize('30.0vp')
        .textAlign(TextAlign.Center)
        .margin({ top: '35%' })
        .textOverflow({ overflow: TextOverflow.Ellipsis })
        .maxLines(1)
    }
    .width('100%')
    .height('100%')
  }
  .startAngle(210)   // 设置起始角度，时钟 0 点为 0°，顺时针为正
  .endAngle(150)     // 设置终止角度；起始与终止角度差过小会导致绘制异常
  // 分段渐变色：每段颜色用 LinearGradient 表示，数字代表权重/占比
  .colors([
    [new LinearGradient([{ color: '#deb6fb', offset: 0 }, { color: '#ac49f5', offset: 1 }]), 9],
    [new LinearGradient([{ color: '#bbb7fc', offset: 0 }, { color: '#564af7', offset: 1 }]), 8],
    [new LinearGradient([{ color: '#f5b5c2', offset: 0 }, { color: '#e64566', offset: 1 }]), 7],
    [new LinearGradient([{ color: '#f8c5a6', offset: 0 }, { color: '#ed6f21', offset: 1 }]), 6],
    [new LinearGradient([{ color: '#fceb99', offset: 0 }, { color: '#f7ce00', offset: 1 }]), 5],
    [new LinearGradient([{ color: '#dbefa5', offset: 0 }, { color: '#a5d61d', offset: 1 }]), 4],
    [new LinearGradient([{ color: '#c1e4be', offset: 0 }, { color: '#64bb5c', offset: 1 }]), 3],
    [new LinearGradient([{ color: '#c0ece5', offset: 0 }, { color: '#61cfbe', offset: 1 }]), 2],
    [new LinearGradient([{ color: '#b5e0f4', offset: 0 }, { color: '#46b1e3', offset: 1 }]), 1]
  ])
  // 也可简写为 .colors('#46b1e3') 设置单一颜色
  .width('80%')
  .height('80%')
  .strokeWidth(18)                     // 环形厚度
  .description(this.descriptionBuilderImage) // 插入自定义 Builder 的内容，可用文本或图片
  .padding(18)
}

Gauge 组件的示例效果（属性运用）如下图所示：