HarmonyOS-UIAbitity-Gauge——【坚果派-红目香薰】
摘要
作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有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 })
}
}
示例效果：
- 点赞
- 收藏
- 关注作者
评论（0）