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: DataPanelOptions) 20 21Since API version 9, this API is supported in ArkTS widgets. 22 23**Parameters** 24 25| Name| Type| Mandatory| Description| 26| -------- | -------- | -------- | -------- | 27| options | [DataPanelOptions](#datapaneloptions)| Yes| Parameters of the data panel.| 28 29## DataPanelOptions 30 31| Name | Type | Mandatory | Description| 32| ----------------- | -------- | ----- | -------- | 33| 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**.| 34| 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**| 35| type<sup>8+</sup> | [DataPanelType](#datapaneltype8) | No| Type of the data panel (dynamic modification is not supported).<br>Default value: **DataPanelType.Circle**| 36 37 38## DataPanelType<sup>8+</sup> 39 40Since API version 9, this API is supported in ArkTS widgets. 41 42| Name| Description| 43| -------| ------------ | 44| Line | Line data panel.| 45| Circle | Circle data panel.| 46 47 48## Attributes 49 50In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 51 52 53| Name | Type| Description| 54| ------------- | ------- | -------- | 55| closeEffect | boolean | Whether to disable the rotation and shadow effects for the component.<br>Default value: **false**<br>**NOTE**<br> This attribute enables or disables the shadow effect only when **trackShadow** is not set.<br> The shadow effect enabled through this attribute is in the default style.| 56| valueColors<sup>10+</sup> | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | Array of data segment colors. A value of the **ResourceColor** type indicates a solid color, and A value of the **LinearGradient** type indicates a color gradient.| 57| trackBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | Background color.<br>The value is in hexadecimal ARGB notation. The first two digits indicate opacity.<br>Default value: **'#08182431'**| 58| strokeWidth<sup>10+</sup> | [Length](ts-types.md#length) | Stroke width of the border.<br>Default value: **24**<br>Unit: vp<br>**NOTE**<br>A value less than 0 evaluates to the default value.<br>This attribute does not take effect when the data panel type is **DataPanelType.Line**.| 59| trackShadow<sup>10+</sup> | [DataPanelShadowOptions](#datapanelshadowoptions10) | Shadow style.<br>**NOTE**<br>If this attribute is set to **null**, the shadow effect is disabled.| 60 61 62## DataPanelShadowOptions<sup>10+</sup> 63| Name | Type| Mandatory| Description| 64| ------------- | ------- | ---- | -------- | 65| radius | number \| [Resource](ts-types.md#resource)| No| Shadow blur radius.<br>The default value varies by API version.<br>API version 10 and earlier versions: **5**<br>Since API version 11: **20**<br>Unit: vp<br>**NOTE**<br>A value less than or equal to 0 evaluates to the default value.| 66| colors | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | No| Array of shadow colors for data segments.<br>Default value: same as the value of **valueColors**<br>**NOTE**<br>If the number of the set shadow colors is less than that of the data segments, the number of the displayed shadow colors is the same as the former.<br>If the number of the set shadow colors is greater than that of the data segments, the number of the displayed shadow colors is the same as the latter.| 67| offsetX | number \| [Resource](ts-types.md#resource)| No| Offset on the x-axis.<br>Default value: **5**<br>Unit: vp| 68| offsetY | number \| [Resource](ts-types.md#resource)| No| Offset on the y-axis.<br>Default value: **5**<br>Unit: vp| 69 70## LinearGradient<sup>10+</sup> 71 72Describes the linear gradient. 73 74LinearGradient(colorStops: ColorStop[]) 75 76| Name | Type| Mandatory| Description| 77| ------------- | ------- | ---- | -------- | 78| colorStops | [ColorStop](#colorstop10)[] | Yes| Gradient colors and color stops.| 79 80 81## ColorStop<sup>10+</sup> 82 83Describes the gradient color stop. 84 85| Name | Type| Mandatory| Description| 86| ------------- | ------- | ---- | -------- | 87| color | [ResourceColor](ts-types.md#resourcecolor) | Yes| Color value.| 88| offset | [Length](ts-types.md#length) | Yes| Gradient color stop (proportion value between 0 and 1). A value less than 0 evaluates to the value **0**. A value greater than 1 evaluates to the value **1**.<br>**NOTE**<br>If the value is a string that represents a number, it will be converted to a number.<br>For example, **'10vp'** is converted to 10, and **'10%'** is converted to 0.1.| 89 90 91 92## Example 93 94### Example 1 95 96```ts 97// xxx.ets 98@Entry 99@Component 100struct DataPanelExample { 101 public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] 102 103 build() { 104 Column({ space: 5 }) { 105 Row() { 106 Stack() { 107 DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168) 108 Column() { 109 Text('30').fontSize(35).fontColor('#182431') 110 Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6) 111 } 112 113 Text('%') 114 .fontSize(9.33) 115 .lineHeight(12.83) 116 .fontWeight(500) 117 .opacity(0.6) 118 .position({ x: 104.42, y: 78.17 }) 119 }.margin({ right: 44 }) 120 121 Stack() { 122 DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168) 123 Column() { 124 Text('75').fontSize(35).fontColor('#182431') 125 Text('Used: 98 GB/128 GB') .fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6) 126 } 127 128 Text('%') 129 .fontSize(9.33) 130 .lineHeight(12.83) 131 .fontWeight(500) 132 .opacity(0.6) 133 .position({ x: 104.42, y: 78.17 }) 134 } 135 }.margin({ bottom: 59 }) 136 137 DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10) 138 }.width('100%').margin({ top: 5 }) 139 } 140} 141``` 142 143 144 145### Example 2 146 147```ts 148// xxx.ets 149@Entry 150@Component 151struct LinearGradientDataPanelExample { 152 public values1: number[] = [20, 20, 20, 20] 153 public color1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#FFEF629F", offset: 1 }]) 154 public color2: LinearGradient = new LinearGradient([{ color: "#FF67F9D4", offset: 0 }, { color: "#FFFF9554", offset: 1 }]) 155 public colorShadow1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#65EF629F", offset: 1 }]) 156 public colorShadow2: LinearGradient = new LinearGradient([{ color: "#65e26709", offset: 0 }, { color: "#65efbd08", offset: 1 }]) 157 public colorShadow3: LinearGradient = new LinearGradient([{ color: "#6572B513", offset: 0 }, { color: "#6508efa6", offset: 1 }]) 158 public colorShadow4: LinearGradient = new LinearGradient([{ color: "#65ed08f5", offset: 0 }, { color: "#65ef0849", offset: 1 }]) 159 @State color3: string = '#00FF00' 160 @State color4: string = '#20FF0000' 161 @State bgColor: string = '#08182431' 162 @State offsetX: number = 15 163 @State offsetY: number = 15 164 @State radius: number = 5 165 @State colorArray: Array<LinearGradient | ResourceColor> = [this.color1, this.color2, this.color3, this.color4] 166 @State shadowColorArray: Array<LinearGradient | ResourceColor> = [this.colorShadow1, this.colorShadow2, this.colorShadow3, this.colorShadow4] 167 168 build() { 169 Column({ space: 5 }) { 170 Text('LinearGradient').fontSize(9).fontColor(0xCCCCCC).textAlign(TextAlign.Start).width('100%').margin({ top: 20, left: 20}) 171 DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 172 .width(300) 173 .height(300) 174 .valueColors(this.colorArray) 175 .trackShadow({ 176 radius: this.radius, 177 colors: this.shadowColorArray, 178 offsetX: this.offsetX, 179 offsetY: this.offsetY 180 }) 181 .strokeWidth(30) 182 .trackBackgroundColor(this.bgColor) 183 }.width('100%').margin({ top: 5 }) 184 } 185} 186``` 187 188 189
