提交 3e6fa4dc 编写于 作者: E ester.zhou

ts-basic-components-datapanel.md (7946)

Signed-off-by: Nester.zhou <ester.zhou@huawei.com>
上级 ba32342e
# DataPanel
> **NOTE**<br>
> This component is supported since API version 8. Updates will be marked with a superscript to indicate their earliest API version.
The **&lt;DataPanel&gt;** component displays proportions in a chart.
The **\<DataPanel>** component displays proportions in a chart.
> **NOTE**
>
> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
## Required Permissions
......@@ -15,7 +14,7 @@ None
## Child Components
None
Not supported
## APIs
......@@ -23,24 +22,25 @@ None
DataPanel(value:{values: number[], max?: number, type?: DataPanelType})
- Parameters
| Name | Type | Mandatory | Default Value | Description |
| Name | Type | Mandatory | Default Value | Description |
| -------- | -------- | -------- | -------- | -------- |
| values | number[] | Yes | - | Value list. A maximum of nine values are supported. |
| max | number | No | 100 | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br/>- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion. |
| type<sup>8+</sup> | DataPanelType | No | DataPanelType.Circle | Type of the data panel. |
| values | number[] | Yes | - | Value list. A maximum of nine values are supported. |
| max | number | No | 100 | - When set to a value greater than 0, this parameter indicates the maximum value in the **values** list.<br/>- When set to a value equal to or smaller than 0, this parameter indicates the sum of values in the **values** list. The values are displayed in proportion. |
| type<sup>8+</sup> | DataPanelType | No | DataPanelType.Circle | Type of the data panel. |
- DataPanelType enums
| Name | Description |
| Name | Description |
| -------- | -------- |
| Line | Line data panel. |
| Line | Line data panel. |
| Circle | Circle data panel. |
## Example
```
```ts
// xxx.ets
@Entry
@Component
struct DataPanelExample {
......
......@@ -37,7 +37,7 @@ Grid(value:{scroller?: Scroller})
| rowsTemplate | string | '1fr' | Number of rows in the current grid layout. If this parameter is not set, one row is used by default. For example, **'1fr 1fr 2fr'** divides the component into three rows. The width allowed by the parent component is divided into four equal parts. The first row occupies one part, the second row occupies one part, and the third row occupies two parts.|
| columnsGap | Length | 0 | Spacing between columns.|
| rowsGap | Length | 0 | Spacing between rows.|
| editMode<font color=ff0000><sup>8+</sup></font> | boolean | flase | Whether to enter editing mode. In editing mode, you can drag the **\<[GridItem](ts-container-griditem.md)>** in the **\<Grid>** component.|
| editMode<font color=ff0000><sup>8+</sup></font> | boolean | false | Whether to enter editing mode. In editing mode, you can drag the **\<[GridItem](ts-container-griditem.md)>** in the **\<Grid>** component.|
| layoutDirection<font color=ff0000><sup>8+</sup></font> | number | 0 |Main axis direction of the layout. The options are as follows:<br>- **0**: Horizontal layout, where the child components are arranged in the same direction as the main axis runs along the rows.<br>- **1**: Vertical layout, where the child components are arranged in the same direction as the main axis runs down the columns.|
| maxCount<font color=ff0000><sup>8+</sup></font> | number | 1 | When **layoutDirection** is **Row**: maximum number of rows that can be displayed.<br>When **layoutDirection** is **Column**: maximum number of columns that can be displayed.|
| minCount<font color=ff0000><sup>8+</sup></font> | number | 1 | When **layoutDirection** is **Row**: minimum number of rows that can be displayed.<br>When **layoutDirection** is **Column**: minimum number of columns that can be displayed.|
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册