• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# DataPanel
2
3数据面板组件，用于将多个数据占比情况使用占比图进行展示。
4
5>  **说明：**
6>
7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9
10
11
12## 子组件
13
14无
15
16
17## 接口
18
19DataPanel(options:{values: number[], max?: number, type?: DataPanelType})
20
21从API version 9开始，该接口支持在ArkTS卡片中使用。
22
23**参数:**
24
25| 参数名            | 参数类型   | 必填  | 参数描述 |
26| ----------------- | -------- | ----- | -------- |
27| values            | number[]   | 是    | 数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。 |
28| max               | number     | 否    |   -&nbsp;max大于0，表示数据的最大值。<br/>-&nbsp;max小于等于0，max等于value数组各项的和，按比例显示。<br/>默认值：100 |
29| type<sup>8+</sup> | [DataPanelType](#datapaneltype枚举说明) | 否 | 数据面板的类型（不支持动态修改）。<br/>默认值：DataPanelType.Circle |
30
31## 属性
32
33除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
34
35| 名称        | 类型    | 描述                                         |
36| ----------- | ------- | -------------------------------------------- |
37| closeEffect | boolean | 关闭数据占比图表旋转动效。<br/>默认值：false |
38
39
40
41## DataPanelType枚举说明
42
43从API version 9开始，该接口支持在ArkTS卡片中使用。
44
45| 名称 | 描述 |
46| -------| ------------ |
47| Line   | 线型数据面板。 |
48| Circle | 环形数据面板。 |
49
50
51## 示例
52
53```ts
54// xxx.ets
55@Entry
56@Component
57struct DataPanelExample {
58  public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]
59
60  build() {
61    Column({ space: 5 }) {
62      Row() {
63        Stack() {
64          DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168)
65          Column() {
66            Text('30').fontSize(35).fontColor('#182431')
67            Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6)
68          }
69
70          Text('%')
71            .fontSize(9.33)
72            .lineHeight(12.83)
73            .fontWeight(500)
74            .opacity(0.6)
75            .position({ x: 104.42, y: 78.17 })
76        }.margin({ right: 44 })
77
78        Stack() {
79          DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168)
80          Column() {
81            Text('75').fontSize(35).fontColor('#182431')
82            Text('已使用98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6)
83          }
84
85          Text('%')
86            .fontSize(9.33)
87            .lineHeight(12.83)
88            .fontWeight(500)
89            .opacity(0.6)
90            .position({ x: 104.42, y: 78.17 })
91        }
92      }.margin({ bottom: 59 })
93
94      DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10)
95    }.width('100%').margin({ top: 5 })
96  }
97}
98```
99
100![dataPanel](figures/dataPanel.PNG)
101