DataPanel

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

  • 数据面板组件
  • 用于将多个数据的占比情况使用 占比图 进行展示

参数

参数形式 ： DataPanel( options:{ values: number[], max?: number, type?: DataPanelType } )

参数名参数类型是否必填默认值参数描述
valuesnumber[]是-数据值列表,最大支持 9 个数据
maxnumber否100max 设置为大于 0 的数据时，表示数据最大值; max 设置为小于等于 0 的数据时，max 等于 value 数组内各项数据的和，按比例显示
typeDataPanelType否DataPanelType.Circle数据面板类型

DataPanelType 枚举说明

名称描述
DataPanelType.Circle环状数据面板
DataPanelType.Line线性数据面板

属性

名称参数类型默认值描述
closeEffectbooleantrue设置是否禁用数据比率图表的特殊效果。

示例 1

第一个 ：
因为设置了最大值是 100，所以只能识别到累计为 100 的数据的比率图表
第二个 ：
因为设置的最大值是 0， 所以真实识别的最大值是所有值的总和，就可以完整显示出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@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)
    }
  }
}