019_Gauge

Gauge

鸿蒙开发以身入局
声明式 UI，内有大乾坤
组件学习开始了
掌握 Gauge 组件

• 数据量规图表组件
• 用于将数据展示为环形图表

参数

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

参数名	参数类型	是否必填	默认值	参数描述
value	number	是	-	量规图的当前数据值，即图中指针指向位置。用于组件创建时量规图初始值预设
min	number	否	0	当前数据段最小值
max	number	否	100	当前数据段最大值

注意 ： 当 max 小于 min 的时候，min 和 max 都会使用默认值，即 0 和 100。
max 和 min 支持填写负数
注意 ： 当 value 值不在 min 和 max 范围内的时候使用 min 作为默认值

属性

名称	参数类型	默认值	描述
value	number	0	设置量规图的数据值，可用于动态修改量规图的数据值
startAngle	number	0	设置起始角度位置，时钟 0 点为 0 度，顺时针方向为正角度
endAngle	number	360	设置终止角度位置，时钟 0 点为 0 度，顺时针方向为正角度
colors	Array<ColorStop>	[]	设置量规图的颜色，支持分段颜色设置
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)
  }
}