HarmonyOS-UIAbitity-Gauge——【坚果派-红目香薰】

红目香薰

发布于 2024-01-31 10:05:07

1310

发布于 2024-01-31 10:05:07

文章被收录于专栏：CSDNToQQCodeCSDNToQQCode

摘要

作者：红目香薰团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。

HarmonyOS-UIAbitity-Gauge

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

接口

Gauge(options:{value: number, min?: number, max?: number})

参数：

参数名	参数类型	必填	参数描述
value	number	是	当前数据值。
min	number	否	当前数据段最小值。默认值：0
max	number	否	当前数据段最大值。默认值：100

属性

名称	参数类型	描述
value	number	设置当前数据图表的值。默认值：0
startAngle	number	设置起始角度位置，时钟0点为0度，顺时针方向为正角度。默认值：-150
endAngle	number	设置终止角度位置，时钟0点为0度，顺时针方向为正角度。默认值：150
colors	Array<ColorStop>	设置图表的颜色，支持分段颜色设置。
strokeWidth	Length	设置环形图表的环形厚度。

ColorStop

颜色断点类型，用于描述渐进色颜色断点。

名称	类型定义	描述
ColorStop	[ResourceColor, number]	描述渐进色颜色断点类型，第一个参数为颜色值，第二个参数为0~1之间的比例值。

示例代码

 // xxx.ets
 @Entry
 @Component
 struct Index {
   build() {
     Column({ space: 20 }) {
       // 使用默认的min和max为0-100，角度范围默认0-360，value值设置
       // 参数中设置当前值为75
       Gauge({ value: 75 })
         .width(200).height(200)
         .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
       // 参数设置当前值为75，属性设置值为25，属性设置优先级高
       Gauge({ value: 75 })
         .value(25) //属性和参数都设置时以参数为准
         .width(200).height(200)
         .colors([[0x317AF7, 1], [0x5BA854, 1], [0xE08C3A, 1], [0x9C554B, 1]])
       // 210--150度环形图表
       Gauge({ value: 30, min: 0, max: 100 })
         .startAngle(210)
         .endAngle(150)
         .colors([[0x317AF7, 0.1], [0x5BA854, 0.2], [0xE08C3A, 0.3], [0x9C554B, 0.4]])
         .strokeWidth(20)
         .width(200)
         .height(200)
     }.width('100%').margin({ top: 5 })
   }
 }

示例效果：