摘要

作者：红目香薰
团队：坚果派
团队介绍：坚果派由坚果创建，团队拥有12个华为HDE以及若干其他领域的三十余位万粉博主运营。 

目录

摘要

HarmonyOS-UIAbitity-DataPanel

接口

属性

DataPanelType枚举说明

DataPanel示例 

---

 

HarmonyOS-UIAbitity-DataPanel

接口

DataPanel(options:{values: number[], max?: number, type?: DataPanelType})

参数:

参数名	参数类型	必填	默认值	参数描述
values	number[]	是	-	数据值列表，最大支持9个数据。
max	number	否	100	- max大于0，表示数据的最大值。 - max小于等于0，max等于value数组各项的和，按比例显示。
type8+	DataPanelType	否	DataPanelType.Circle	数据面板的类型。

属性

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

DataPanelType枚举说明

名称	描述
Line	线型数据面板。
Circle	环形数据面板。

DataPanel示例 

示例源码:

@Entry
@Component
struct Index {
  public values1: number[] = [15, 12, 1, 5, 2,17, 11, 12, 10]

  build() {
    Column({ space: 5 }) {
      Text('Circle').fontSize(9).fontColor(0xCCCCCC).margin({ top: 20, right: '80%' })
      DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }).width(200).height(200)

      Text('Line').fontSize(9).fontColor(0xCCCCCC).margin({ bottom: 20, right: '80%' })
      DataPanel({ values: this.values1, max: 100, type: DataPanelType.Line }).width(300).height(10)
    }.width('100%').margin({ top: 5 })
  }
}