forked from OpenHarmony / docs

加入 Gitee

与超过 1200万开发者一起发现、参与优秀开源项目，私有仓库也完全免费：）

克隆/下载

ts-basic-components-datapanel.md 3.55 KB

# DataPanel<a name="ZH-CN_TOPIC_0000001150706126"></a>

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

## 子组件<a name="section53281531154915"></a>

无

## 接口<a name="section1989913519718"></a>

DataPanel\(value:\{values: number\[\], max?: number\}\)

-   参数

<a name="table1392916196212"></a>
 <table><thead align="left"><tr id="row19306191218"><th class="cellrowborder" valign="top" width="16.11%" id="mcps1.1.6.1.1"><a name="p199307193217"></a><a name="p199307193217"></a>参数名
 </th>
 <th class="cellrowborder" valign="top" width="14.01%" id="mcps1.1.6.1.2"><a name="p119302191128"></a><a name="p119302191128"></a>参数类型
 </th>
 <th class="cellrowborder" valign="top" width="13%" id="mcps1.1.6.1.3"><a name="p7930141911211"></a><a name="p7930141911211"></a>必填
 </th>
 <th class="cellrowborder" valign="top" width="9.17%" id="mcps1.1.6.1.4"><a name="p1393020194219"></a><a name="p1393020194219"></a>默认值
 </th>
 <th class="cellrowborder" valign="top" width="47.71%" id="mcps1.1.6.1.5"><a name="p693061912210"></a><a name="p693061912210"></a>参数描述
 </th>
 </tr>
 </thead>
 <tbody><tr id="row1093021911217"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><a name="p119307198218"></a><a name="p119307198218"></a>values
 </td>
 <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><a name="p129301719828"></a><a name="p129301719828"></a>number[]
 </td>
 <td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.6.1.3 "><a name="p893091913213"></a><a name="p893091913213"></a>是
 </td>
 <td class="cellrowborder" valign="top" width="9.17%" headers="mcps1.1.6.1.4 "><a name="p421641117507"></a><a name="p421641117507"></a>-
 </td>
 <td class="cellrowborder" valign="top" width="47.71%" headers="mcps1.1.6.1.5 "><a name="p693016198212"></a><a name="p693016198212"></a>数据值列表，最大支持9个数据。
 </td>
 </tr>
 <tr id="row199301191726"><td class="cellrowborder" valign="top" width="16.11%" headers="mcps1.1.6.1.1 "><a name="p0930419923"></a><a name="p0930419923"></a>max
 </td>
 <td class="cellrowborder" valign="top" width="14.01%" headers="mcps1.1.6.1.2 "><a name="p1993071918217"></a><a name="p1993071918217"></a>number
 </td>
 <td class="cellrowborder" valign="top" width="13%" headers="mcps1.1.6.1.3 "><a name="p29309191029"></a><a name="p29309191029"></a>否
 </td>
 <td class="cellrowborder" valign="top" width="9.17%" headers="mcps1.1.6.1.4 "><a name="p393019193220"></a><a name="p393019193220"></a>100
 </td>
 <td class="cellrowborder" valign="top" width="47.71%" headers="mcps1.1.6.1.5 "><a name="p793001918220"></a><a name="p793001918220"></a>数据的最大值。
 </td>
 </tr>
 </tbody>
 </table>

## 示例<a name="section13800193662114"></a>

```
@Entry
@Component
struct DataPanelExample {
  public values1: number[] = [40, 20, 20, 10, 10]

build() {
    Column({ space: 5 }) {
      DataPanel({ values: this.values1, max: 100 })
        .width(150)
        .height(150)
    }.width('100%').margin({ top: 5 })
  }
}
```

![](figures/datapanel.png)

一键复制编辑原始数据按行查看历史

提交于 2021-11-10 20:02 . add arkui

DataPanel

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

子组件

无

接口

DataPanel(value:{values: number[], max?: number})

参数

参数名	参数类型	必填	默认值	参数描述
values	number[]	是	-	数据值列表，最大支持9个数据。
max	number	否	100	数据的最大值。

示例

@Entry
@Component
struct DataPanelExample {
  public values1: number[] = [40, 20, 20, 10, 10]

  build() {
    Column({ space: 5 }) {
      DataPanel({ values: this.values1, max: 100 })
        .width(150)
        .height(150)
    }.width('100%').margin({ top: 5 })
  }
}

https://gitee.com/openharmony-build/docs.git

git@gitee.com:openharmony-build/docs.git

openharmony-build

docs

master

OpenHarmony-build / docs

DataPanel

子组件

接口

示例

简介

发行版

贡献者

近期动态

OpenHarmony-build / docs .gitee-modal { width: 500px !important; }

DataPanel

子组件

接口

示例

简介

发行版

贡献者

近期动态

搜索帮助

OpenHarmony-build / docs