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. If the value is less than 0, the value 0 is used.| 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## DataPanelType 32 33Since API version 9, this API is supported in ArkTS widgets. 34 35| Name| Description| 36| -------| ------------ | 37| Line | Line data panel.| 38| Circle | Circle data panel.| 39 40 41## Example 42 43```ts 44// xxx.ets 45@Entry 46@Component 47struct DataPanelExample { 48 public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] 49 50 build() { 51 Column({ space: 5 }) { 52 Row() { 53 Stack() { 54 DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168) 55 Column() { 56 Text('30').fontSize(35).fontColor('#182431') 57 Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6) 58 } 59 60 Text('%') 61 .fontSize(9.33) 62 .lineHeight(12.83) 63 .fontWeight(500) 64 .opacity(0.6) 65 .position({ x: 104.42, y: 78.17 }) 66 }.margin({ right: 44 }) 67 68 Stack() { 69 DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168) 70 Column() { 71 Text('75').fontSize(35).fontColor('#182431') 72 Text('Used: 98 GB/128 GB') .fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6) 73 } 74 75 Text('%') 76 .fontSize(9.33) 77 .lineHeight(12.83) 78 .fontWeight(500) 79 .opacity(0.6) 80 .position({ x: 104.42, y: 78.17 }) 81 } 82 }.margin({ bottom: 59 }) 83 84 DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10) 85 }.width('100%').margin({ top: 5 }) 86 } 87} 88``` 89 90 91
