数据面板组件
用于将多个数据的占比情况使用 占比图 进行展示
参数
参数形式 : DataPanel( options:{ values: number[], max?: number, type?: DataPanelType } )
参数名 |
参数类型 |
是否必填 |
默认值 |
参数描述 |
values |
number[] |
是 |
- |
数据值列表 最大支持 9 个数据 |
max |
number |
否 |
100 |
max 设置为大于 0 的数据时,表示数据最大值 max 设置为小于等于 0 的数据时,max 等于 value 数组内各项数据的和,按比例显示 |
type |
DataPanelType |
否 |
DataPanelType.Circle |
数据面板类型 |
DataPanelType 枚举说明
名称 |
描述 |
DataPanelType.Circle |
环状数据面板 |
DataPanelType.Circle |
线性数据面板 |
属性
名称 |
参数类型 |
默认值 |
描述 |
closeEffect |
boolean |
true |
设置是否禁用数据比率图表的特殊效果。 |
示例 1
第一个 :
因为设置了最大值是 100,所以只能识别到累计为 100 的数据的比率图表
第二个 :
因为设置的最大值是 0, 所以真实识别的最大值是所有值的总和,就可以完整显示出来
@Entry
@Component
struct Index {
@State values: number[] = [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
build() {
Column() {
Row() {
DataPanel({ values: this.values, max: 100, type: DataPanelType.Circle })
.width(300)
.height(300)
}.width('100%').height(400).padding(20)
Row() {
DataPanel({ values: this.values, max: 0, type: DataPanelType.Circle })
.width(300)
.height(300)
}.width('100%').height(400).padding(20)
}
}
}
示例 2
@Entry
@Component
struct Index {
@State values: number[] = [ 10, 20, 30, 40, 50, 60, 70, 80, 90 ]
build() {
Column() {
Row() {
DataPanel({ values: this.values, max: 0,type: DataPanelType.Circle })
.width(300)
.height(300)
}.width('100%').height(400).padding(20)
Row() {
DataPanel({ values: this.values, max: 0,type: DataPanelType.Line })
.width(300)
.height(20)
}.width('100%').height(400).padding(20)
}
}
}