鸿蒙入门13-Gauge组件

数据量规图表组件

用于将数据展示为环形图表

参数

参数形式 ： Gauge( options: { value: number, min?: number, max?: number } )

参数名	参数类型	是否必填	默认值	参数描述
value	number	是	-	量规图的当前数据值，即图中指针指向位置。 用于组件创建时量规图初始值预设。 注意 ： 当 value 值不在 min 和 max 范围内的时候使用 min 作为默认值
min	number	否	0	当前数据段最小值
max	number	否	100	当前数据段最大值 注意 ： 当 max 小于 min 的时候，min 和 max 都会使用默认值，即 0 和 100。 max 和 min 支持填写负数

属性

名称	参数类型	默认值	描述
value	number	0	设置量规图的数据值，可用于动态修改量规图的数据值
startAngle	number	0	设置起始角度位置 时钟 0 点为 0 度 顺时针方向为正角度
endAngle	number	360	设置终止角度位置 时钟 0 点为 0 度 顺时针方向为正角度
colors	Array<ColorStop>	Color.Black	设置量规图的眼色，支持分段颜色设置
strokeWidth	Length	4vp	设置环形量规图的环形厚度 注意 ： 设置小于 0 的值时，按默认值显示，不支持百分比

ColorStop

名称	类型定义	描述
ColorStop	[ resourceColor, number ]	描述渐进色颜色断点类型 第一个参数为颜色值，若设置为非颜色类型，则置为黑色。 第二个参数为颜色所占比重，若设置为负数或是非数值类型，则将比重置为0。

示例 1

此时没有预设参数 min 和 max，所以 min 和 max 的值就是 0 和 100

那么 value 就按照 0 ～ 100 来取值

所以

25 就是 四分之一 位置（ 90deg ）

50 就是 二分之一 位置（ 180deg ）

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Gauge({ value: 25 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      }.margin(30)

      Row() {
        Gauge({ value: 50 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      }
    }.padding(50)
  }
}

示例 2

此时因为有预设参数 min 和 max， 分别是 0 和 10

那么 value 就要按照 0 ～ 10 来取值

所以

2.5 就是 四分之一 位置（ 90deg ）

5 就是 二分之一 位置（ 180deg ）

50 因为超出了 min ～ max 的取值范围，所以 value 就用 min 的值

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Gauge({ value: 2.5, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      }

      Row() {
        Gauge({ value: 5, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      }.margin(30)

      Row() {
        // value 超出了 min ～ max 的取值范围，所以 value 就是 min 的值
        Gauge({ value: 50, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      }
    }.padding(50)
  }
}

示例 3

通过相关属性设置了量规图的开始位置和结束位置

也就是从 270deg 位置顺时针画圆截至 150deg 位置

形成了一个非闭合圆环

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Gauge({ value: 2.5, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      }

      Row() {
        Gauge({ value: 2.5, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
          .startAngle(270)
          .endAngle(150)
      }.margin(30)

    }.padding(50)
  }
}

 示例 4

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Gauge({ value: 2.5, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      }

      Row() {
        Gauge({ value: 2.5, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
          .strokeWidth(20)
      }.margin(30)

    }.padding(50)
  }
}

示例 5

colors( [ [0xAABBCC, 0.1], [0xDDEEFF, 0.2], [0xAADDFF, 0.3], [0xCC2233, 0.4] ] )

颜色1 比重 颜色2 比重 颜色3 比重 颜色4 比重

因为 0.1 + 0.2 + 0.3 + 0.4 总和是 1

所以

颜色1 占比 十分之一

颜色2 占比 十分之二

颜色3 占比 十分之三

颜色4 占比 十分之四

@Entry
@Component
struct Index {
  build() {
    Column() {
      Row() {
        Gauge({ value: 2.5, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
      }

      Row() {
        Gauge({ value: 2.5, min: 0, max: 10 })
          .width(200).height(200)
          .colors([[0xAABBCC, 0.1], [0xDDEEFF, 0.2], [0xAADDFF, 0.3], [0xCC2233, 0.4]])
      }.margin(30)

    }.padding(50)
  }
}