1# DataPanel 2 3The **\<DataPanel>** component displays proportions in a chart. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10 11 12## Child Components 13 14Not supported 15 16 17## APIs 18 19DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) 20 21Since API version 9, this API is supported in ArkTS widgets. 22 23**Parameters** 24 25| Name | Type | Mandatory | Description| 26| ----------------- | -------- | ----- | -------- | 27| values | number[] | Yes | Data value list. A maximum of nine values are supported. If more than nine values are set, only the first nine ones are used. A value less than 0 evaluates to the value **0**. | 28| max | number | No | - 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.<br>Default value: **100**| 29| type<sup>8+</sup> | [DataPanelType](#datapaneltype) | No| Type of the data panel (dynamic modification is not supported).<br>Default value: **DataPanelType.Circle**| 30 31## Attributes 32 33In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 34 35| Name | Type | Description | 36| ----------- | ------- | -------------------------------------------- | 37| closeEffect | boolean | Whether to disable the rotation effect for the component.<br>Default value: **false**| 38 39 40 41## DataPanelType 42 43Since API version 9, this API is supported in ArkTS widgets. 44 45| Name| Description| 46| -------| ------------ | 47| Line | Line data panel.| 48| Circle | Circle data panel.| 49 50 51## Example 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('Used: 98 GB/128 GB') .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 101
