数据面板组件

2024-01-22 17:08 更新

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

说明

该组件从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

子组件

接口

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

从API version 9开始,该接口支持在ArkTS卡片中使用。

参数:

参数名

参数类型

必填

参数描述

values

number[]

数据值列表,最多包含9个数据,大于9个数据则取前9个数据。若数据值小于0则置为0。

max

number

- max大于0,表示数据的最大值。

- max小于等于0,max等于value数组各项的和,按比例显示。

默认值:100

type8+

DataPanelType

数据面板的类型(不支持动态修改)。

默认值:DataPanelType.Circle

属性

除支持通用属性外,还支持以下属性:

名称

类型

描述

closeEffect

boolean

关闭数据占比图表旋转动效。

默认值:false

DataPanelType枚举说明

从API version 9开始,该接口支持在ArkTS卡片中使用。

名称

描述

Line

线型数据面板。

Circle

环形数据面板。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct DataPanelExample {
  5. public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]
  6. build() {
  7. Column({ space: 5 }) {
  8. Row() {
  9. Stack() {
  10. DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168)
  11. Column() {
  12. Text('30').fontSize(35).fontColor('#182431')
  13. Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6)
  14. }
  15. Text('%')
  16. .fontSize(9.33)
  17. .lineHeight(12.83)
  18. .fontWeight(500)
  19. .opacity(0.6)
  20. .position({ x: 104.42, y: 78.17 })
  21. }.margin({ right: 44 })
  22. Stack() {
  23. DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168)
  24. Column() {
  25. Text('75').fontSize(35).fontColor('#182431')
  26. Text('已使用98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6)
  27. }
  28. Text('%')
  29. .fontSize(9.33)
  30. .lineHeight(12.83)
  31. .fontWeight(500)
  32. .opacity(0.6)
  33. .position({ x: 104.42, y: 78.17 })
  34. }
  35. }.margin({ bottom: 59 })
  36. DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10)
  37. }.width('100%').margin({ top: 5 })
  38. }
  39. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号