鸿蒙入门11-DataPanel组件

数据面板组件

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

参数

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

DataPanelType 枚举说明

属性

示例 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)
    }
  }
}