1# DataPanel 2 3数据面板组件，用于将多个数据占比情况使用占比图进行展示。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17DataPanel(options: DataPanelOptions) 18 19**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| -------- | -------- | -------- | -------- | 29| options | [DataPanelOptions](#datapaneloptions对象说明)| 是 | 数据面板组件参数。 | 30 31## DataPanelOptions对象说明 32 33**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 类型 | 必填 | 说明 | 40| ----------------- | -------- | ----- | -------- | 41| values | number[] | 是 | 数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。 | 42| max | number | 否 | - max大于0，表示数据的最大值。<br/>- max小于等于0，max等于value数组各项的和，按比例显示。<br/>默认值：100 | 43| type<sup>8+</sup> | [DataPanelType](#datapaneltype8枚举说明) | 否 | 数据面板的类型（不支持动态修改）。<br/>默认值：DataPanelType.Circle | 44 45 46## DataPanelType<sup>8+</sup>枚举说明 47 48**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 49 50**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 51 52**系统能力：** SystemCapability.ArkUI.ArkUI.Full 53 54| 名称 | 说明 | 55| -------| ------------ | 56| Line | 线型数据面板。 | 57| Circle | 环形数据面板。 | 58 59 60## 属性 61 62除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 63 64### closeEffect 65 66closeEffect(value: boolean) 67 68设置关闭数据占比图表旋转动效和投影效果。若未设置[trackShadow属性](#trackshadow10)，则该属性控制投影效果的开关，开启投影的效果为投影的默认效果。若设置trackShadow属性，则由trackShadow属性值控制投影效果的开关。 69 70**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 71 72**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 73 74**系统能力：** SystemCapability.ArkUI.ArkUI.Full 75 76**参数：** 77 78| 参数名 | 类型 | 必填 | 说明 | 79| ------ | ------- | ---- | ------------------------------------------------------ | 80| value | boolean | 是 | 关闭数据占比图表旋转动效和投影效果。<br/>默认值：false | 81 82### valueColors<sup>10+</sup> 83 84valueColors(value: Array<ResourceColor | LinearGradient>) 85 86设置各数据段颜色。 87 88**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92**参数：** 93 94| 参数名 | 类型 | 必填 | 说明 | 95| ------ | ------------------------------------------------------------ | ---- | ----------------------------------------------------------- | 96| value | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | 是 | 各数据段颜色，ResourceColor为纯色，LinearGradient为渐变色。 | 97 98### trackBackgroundColor<sup>10+</sup> 99 100trackBackgroundColor(value: ResourceColor) 101 102设置底板颜色。 103 104**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 105 106**系统能力：** SystemCapability.ArkUI.ArkUI.Full 107 108**参数：** 109 110| 参数名 | 类型 | 必填 | 说明 | 111| ------ | ------------------------------------------ | ---- | ------------------------------------------------------------ | 112| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 底板颜色。<br/>默认值：'#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 | 113 114### strokeWidth<sup>10+</sup> 115 116strokeWidth(value: Length) 117 118设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。 119 120**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 121 122**系统能力：** SystemCapability.ArkUI.ArkUI.Full 123 124**参数：** 125 126| 参数名 | 类型 | 必填 | 说明 | 127| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 128| value | [Length](ts-types.md#length) | 是 | 圆环粗细。<br/>默认值：24<br/>单位：vp<br/>**说明：** <br/>设置小于0的值时，按默认值显示。 | 129 130### trackShadow<sup>10+</sup> 131 132trackShadow(value: DataPanelShadowOptions) 133 134设置投影样式。 135 136**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 137 138**系统能力：** SystemCapability.ArkUI.ArkUI.Full 139 140**参数：** 141 142| 参数名 | 类型 | 必填 | 说明 | 143| ------ | ----------------------------------------------------------- | ---- | ----------------------------------------------------- | 144| value | [DataPanelShadowOptions](#datapanelshadowoptions10对象说明) | 是 | 投影样式。<br/>**说明：** <br/>设置null为不开启投影。 | 145 146### contentModifier<sup>12+</sup> 147 148contentModifier(modifier: ContentModifier\<DataPanelConfiguration>) 149 150定制DataPanel内容区的方法。 151 152**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 153 154**系统能力：** SystemCapability.ArkUI.ArkUI.Full 155 156**参数：** 157 158| 参数名 | 类型 | 必填 | 说明 | 159| ------ | --------------------------------------------- | ---- | ------------------------------------------------ | 160| modifier | [ContentModifier\<DataPanelConfiguration>](#datapanelconfiguration12对象说明) | 是 | 在DataPanel组件上，定制内容区的方法。<br/>modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。 | 161 162 163## DataPanelShadowOptions<sup>10+</sup>对象说明 164 165DataPanelShadowOptions继承自[MultiShadowOptions](ts-types.md#multishadowoptions10)，具有MultiShadowOptions的全部属性。 166 167**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 168 169**系统能力：** SystemCapability.ArkUI.ArkUI.Full 170 171| 名称 | 类型 | 必填 | 说明 | 172| ------------- | ------- | ---- | -------- | 173| colors | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10)> | 否 | 各数据段投影的颜色。 <br/>默认值：与valueColors值相同 <br/>**说明：** <br/>若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。<br/>若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。| 174 175## LinearGradient<sup>10+</sup> 176 177### constructor 178 179constructor(colorStops: ColorStop[]) 180 181线性渐变颜色描述。 182 183**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 184 185**系统能力：** SystemCapability.ArkUI.ArkUI.Full 186 187**参数：** 188 189| 参数名 | 类型 | 必填 | 说明 | 190| ------------- | ------- | ---- | -------- | 191| colorStops | [ColorStop](#colorstop10对象说明)[] | 是 | 存储渐变颜色和渐变点。| 192 193 194## ColorStop<sup>10+</sup>对象说明 195 196颜色断点类型，用于描述渐进色颜色断点。 197 198**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 199 200**系统能力：** SystemCapability.ArkUI.ArkUI.Full 201 202| 名称 | 类型 | 必填 | 说明 | 203| ------------- | ------- | ---- | -------- | 204| color | [ResourceColor](ts-types.md#resourcecolor) | 是 | 颜色值。| 205| offset | [Length](ts-types.md#length) | 是 | 渐变色断点（0~1之间的比例值，若数据值小于0则置为0，若数据值大于1则置为1）。<br>**说明：** <br/>若传入字符串类型且内容为数字，则转换为对应的数值。<br/>例如'10vp'转换为10，'10%'转换为0.1。 | 206 207## DataPanelConfiguration<sup>12+</sup>对象说明 208 209开发者需要自定义class实现ContentModifier接口。 210 211**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 212 213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 214 215| 名称 | 类型 | 必填 | 说明 | 216| ------ | ------ | ------ |-------------------------------- | 217| values | number[] | 是 | 当前DataPanel的数据值，最大长度为9。 | 218| maxValue | number | 是 | DataPanel显示的最大值。<br/>默认值：100。 | 219 220## 示例 221 222### 示例1 223 224```ts 225// xxx.ets 226@Entry 227@Component 228struct DataPanelExample { 229 public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] 230 231 build() { 232 Column({ space: 5 }) { 233 Row() { 234 Stack() { 235 DataPanel({ values: [30], max: 100, type: DataPanelType.Circle }).width(168).height(168) 236 Column() { 237 Text('30').fontSize(35).fontColor('#182431') 238 Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6) 239 } 240 241 Text('%') 242 .fontSize(9.33) 243 .lineHeight(12.83) 244 .fontWeight(500) 245 .opacity(0.6) 246 .position({ x: 104.42, y: 78.17 }) 247 }.margin({ right: 44 }) 248 249 Stack() { 250 DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168) 251 Column() { 252 Text('75').fontSize(35).fontColor('#182431') 253 Text('已使用98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6) 254 } 255 256 Text('%') 257 .fontSize(9.33) 258 .lineHeight(12.83) 259 .fontWeight(500) 260 .opacity(0.6) 261 .position({ x: 104.42, y: 78.17 }) 262 } 263 }.margin({ bottom: 59 }) 264 265 DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(20) 266 }.width('100%').margin({ top: 5 }) 267 } 268} 269``` 270 271 272 273### 示例2 274 275```ts 276// xxx.ets 277@Entry 278@Component 279struct LinearGradientDataPanelExample { 280 public values1: number[] = [20, 20, 20, 20] 281 public color1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#FFEF629F", offset: 1 }]) 282 public color2: LinearGradient = new LinearGradient([{ color: "#FF67F9D4", offset: 0 }, { color: "#FFFF9554", offset: 1 }]) 283 public colorShadow1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#65EF629F", offset: 1 }]) 284 public colorShadow2: LinearGradient = new LinearGradient([{ color: "#65e26709", offset: 0 }, { color: "#65efbd08", offset: 1 }]) 285 public colorShadow3: LinearGradient = new LinearGradient([{ color: "#6572B513", offset: 0 }, { color: "#6508efa6", offset: 1 }]) 286 public colorShadow4: LinearGradient = new LinearGradient([{ color: "#65ed08f5", offset: 0 }, { color: "#65ef0849", offset: 1 }]) 287 @State color3: string = '#00FF00' 288 @State color4: string = '#20FF0000' 289 @State bgColor: string = '#08182431' 290 @State offsetX: number = 15 291 @State offsetY: number = 15 292 @State radius: number = 5 293 @State colorArray: Array<LinearGradient | ResourceColor> = [this.color1, this.color2, this.color3, this.color4] 294 @State shadowColorArray: Array<LinearGradient | ResourceColor> = [this.colorShadow1, this.colorShadow2, this.colorShadow3, this.colorShadow4] 295 296 build() { 297 Column({ space: 5 }) { 298 Text('LinearGradient').fontSize(9).fontColor(0xCCCCCC).textAlign(TextAlign.Start).width('100%').margin({ top: 20, left: 20}) 299 DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 300 .width(300) 301 .height(300) 302 .valueColors(this.colorArray) 303 .trackShadow({ 304 radius: this.radius, 305 colors: this.shadowColorArray, 306 offsetX: this.offsetX, 307 offsetY: this.offsetY 308 }) 309 .strokeWidth(30) 310 .trackBackgroundColor(this.bgColor) 311 }.width('100%').margin({ top: 5 }) 312 } 313} 314``` 315 316 317 318### 示例3 319 320```ts 321// xxx.ets 322@Builder 323function buildDataPanel(config: DataPanelConfiguration) { 324 Column() { 325 Column() { 326 ForEach(config.values, (item: number, index: number) => { 327 ChildItem({ item: item, index: index, max:config.maxValue}) 328 }, (item: string) => item) 329 }.padding(10) 330 Column() { 331 Line().width("100%").backgroundColor("#ff373737").margin({bottom:5}) 332 }.padding({left: 20, right: 20}) 333 Row() { 334 Text('Length=' + config.values.length + ' ').margin({ left: 10 }).align(Alignment.Start) 335 Text('Max=' + config.maxValue).margin({ left: 10 }).align(Alignment.Start) 336 } 337 } 338} 339 340class DataPanelBuilder implements ContentModifier<DataPanelConfiguration> { 341 constructor() { 342 } 343 applyContent () : WrappedBuilder<[DataPanelConfiguration]> { 344 return wrapBuilder(buildDataPanel) 345 } 346} 347 348@Entry 349@Component 350struct Index { 351 build() { 352 Column() { 353 Text("Data panel").margin({ top: 12 }); 354 Row() { 355 DataPanel({ values: [12.3, 21.1, 13.4, 35.2, 26.0, 32.0], max: 140, type: DataPanelType.Circle }) 356 .width(400).height(260) 357 .constraintSize({maxWidth: "100%"}) 358 .padding({ top: 10 }) 359 .contentModifier(new DataPanelBuilder()) 360 }.margin(15).backgroundColor("#fff5f5f5") 361 } 362 } 363} 364 365@Component 366struct ChildItem { 367 @Prop item: number; 368 @Prop index: number; 369 @Prop max: number; 370 public color1: string = "#65ff00dd" 371 public color2: string = "#6500ff99" 372 public color3: string = "#65ffe600" 373 public color4: string = "#6595ff00" 374 public color5: string = "#65000dff" 375 public color6: string = "#650099ff" 376 public colorArray: Array<string> = [this.color1, this.color2, this.color3, this.color4, this.color5, this.color6] 377 378 build() { 379 RelativeContainer() { 380 Row() { 381 Rect().height(25).width(this.item * 600 / this.max).foregroundColor(this.colorArray[this.index]).radius(5) 382 .align(Alignment.Start) 383 Text(" "+this.item) 384 .fontSize(17) 385 } 386 }.height(28) 387 } 388} 389``` 390
