鸿蒙入门-13Gauge组件

数据量规图表组件

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

 

参数

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

属性

ColorStop

示例 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)
  }
}