| 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. |
| 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<fontcolor=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<fontcolor=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<fontcolor=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<fontcolor=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<fontcolor=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.|