鸿蒙入门11-DataPanel组件

news2024/11/26 22:30:46

数据面板组件

用于将多个数据的占比情况使用 占比图 进行展示

参数

参数形式： 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)
    }
  }
}