1# DataPanel 2 3数据面板组件，用于将多个数据占比情况使用占比图进行展示。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10 11 12## 子组件 13 14无 15 16 17## 接口 18 19DataPanel(options:{values: number[], max?: number, type?: DataPanelType}) 20 21从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**参数:** 24 25| 参数名 | 参数类型 | 必填 | 参数描述 | 26| ----------------- | -------- | ----- | -------- | 27| values | number[] | 是 | 数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。 | 28| max | number | 否 | - max大于0，表示数据的最大值。<br/>- max小于等于0，max等于value数组各项的和，按比例显示。<br/>默认值：100 | 29| type<sup>8+</sup> | [DataPanelType](#datapaneltype枚举说明) | 否 | 数据面板的类型（不支持动态修改）。<br/>默认值：DataPanelType.Circle | 30 31 32## DataPanelType枚举说明 33 34从API version 9开始，该接口支持在ArkTS卡片中使用。 35 36| 名称 | 描述 | 37| -------| ------------ | 38| Line | 线型数据面板。 | 39| Circle | 环形数据面板。 | 40 41 42## 属性 43 44除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 45 46 47| 名称 | 参数类型 | 描述 | 48| ------------- | ------- | -------- | 49| closeEffect | boolean | 关闭数据占比图表旋转动效和投影效果。<br/>默认值：false <br/>**说明：** <br/> 若未设置trackShadow属性，则该属性控制投影效果的开关，开启投影的效果为投影的默认效果。<br/> 若设置trackShadow属性，则由trackShadow属性值控制投影效果的开关。| 50| valueColors<sup>10+</sup> | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10对象说明)> | 各数据段颜色，ResourceColor为纯色，LinearGradient为渐变色。| 51| trackBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 底板颜色。<br/>默认值：'#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 | 52| strokeWidth<sup>10+</sup> | [Length](ts-types.md#Length) | 圆环粗细。<br/>默认值：24<br/>单位：vp<br/>**说明：** <br/>设置小于0的值时，按默认值显示。<br/>数据面板的类型为DataPanelType.Line时该属性不生效。 | 53| trackShadow<sup>10+</sup> | [DataPanelShadowOptions](#datapanelshadowoptions10对象说明) | 投影样式。<br/>**说明：** <br/>设置null为不开启投影。| 54 55 56## DataPanelShadowOptions<sup>10+</sup>对象说明 57| 名称 | 参数类型 | 必填 | 描述 | 58| ------------- | ------- | ---- | -------- | 59| radius | number \| [Resource](ts-types.md#resource类型) | 否 | 投影模糊半径。 <br/>默认值：5<br/>单位：vp <br/>**说明：** <br/>设置小于等于0的值时，按默认值显示。| 60| colors | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10对象说明)> | 否 | 各数据段投影的颜色。 <br/>默认值：与valueColors值相同 <br/>**说明：** <br/>若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。<br/>若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。| 61| offsetX | number \| [Resource](ts-types.md#resource类型) | 否 | X轴的偏移量。 <br/>默认值：5<br/>单位：vp | 62| offsetY | number \| [Resource](ts-types.md#resource类型) | 否 | Y轴的偏移量。 <br/>默认值：5<br/>单位：vp | 63 64## LinearGradient<sup>10+</sup>对象说明 65 66线性渐变颜色描述。 67 68LinearGradient(colorStops: ColorStop[]) 69 70| 名称 | 参数类型 | 必填 | 描述 | 71| ------------- | ------- | ---- | -------- | 72| colorStops | [ColorStop](#colorstop10对象说明)[] | 是 | 存储渐变颜色和渐变点。| 73 74 75## ColorStop<sup>10+</sup>对象说明 76 77颜色断点类型，用于描述渐进色颜色断点。 78 79| 名称 | 参数类型 | 必填 | 描述 | 80| ------------- | ------- | ---- | -------- | 81| color | [ResourceColor](ts-types.md#resourcecolor) | 是 | 颜色值。| 82| offset | [Length](ts-types.md#Length) | 是 | 渐变色断点（0~1之间的比例值，若数据值小于0则置为0，若数据值大于1则置为1）。| 83 84 85 86## 示例 87 88### 示例1 89 90```ts 91// xxx.ets 92@Entry 93@Component 94struct DataPanelExample { 95 public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10] 96 97 build() { 98 Column({ space: 5 }) { 99 Row() { 100 Stack() { 101 DataPanel({ values: [25], max: 100, type: DataPanelType.Circle }).width(168).height(168) 102 Column() { 103 Text('30').fontSize(35).fontColor('#182431') 104 Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6) 105 } 106 107 Text('%') 108 .fontSize(9.33) 109 .lineHeight(12.83) 110 .fontWeight(500) 111 .opacity(0.6) 112 .position({ x: 104.42, y: 78.17 }) 113 }.margin({ right: 44 }) 114 115 Stack() { 116 DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168) 117 Column() { 118 Text('75').fontSize(35).fontColor('#182431') 119 Text('已使用98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6) 120 } 121 122 Text('%') 123 .fontSize(9.33) 124 .lineHeight(12.83) 125 .fontWeight(500) 126 .opacity(0.6) 127 .position({ x: 104.42, y: 78.17 }) 128 } 129 }.margin({ bottom: 59 }) 130 131 DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10) 132 }.width('100%').margin({ top: 5 }) 133 } 134} 135``` 136 137 138 139### 示例2 140 141```ts 142// xxx.ets 143@Entry 144@Component 145struct LinearGradientDataPanelExample { 146 public values1: number[] = [20, 20, 20, 20] 147 public color1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#FFEF629F", offset: 1 }]) 148 public color2: LinearGradient = new LinearGradient([{ color: "#FF67F9D4", offset: 0 }, { color: "#FFFF9554", offset: 1 }]) 149 public colorShadow1: LinearGradient = new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#65EF629F", offset: 1 }]) 150 public colorShadow2: LinearGradient = new LinearGradient([{ color: "#65e26709", offset: 0 }, { color: "#65efbd08", offset: 1 }]) 151 public colorShadow3: LinearGradient = new LinearGradient([{ color: "#6572B513", offset: 0 }, { color: "#6508efa6", offset: 1 }]) 152 public colorShadow4: LinearGradient = new LinearGradient([{ color: "#65ed08f5", offset: 0 }, { color: "#65ef0849", offset: 1 }]) 153 @State color3: string = '#00FF00' 154 @State color4: string = '#20FF0000' 155 @State bgColor: string = '#08182431' 156 @State offsetX: number = 15 157 @State offsetY: number = 15 158 @State radius: number = 5 159 @State colorArray: Array<LinearGradient | ResourceColor> = [this.color1, this.color2, this.color3, this.color4] 160 @State shadowColorArray: Array<LinearGradient | ResourceColor> = [this.colorShadow1, this.colorShadow2, this.colorShadow3, this.colorShadow4] 161 162 build() { 163 Column({ space: 5 }) { 164 Text('LinearGradient').fontSize(9).fontColor(0xCCCCCC).textAlign(TextAlign.Start).width('100%').margin({ top: 20, left: 20}) 165 DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle }) 166 .width(300) 167 .height(300) 168 .valueColors(this.colorArray) 169 .trackShadow({ 170 radius: this.radius, 171 colors: this.shadowColorArray, 172 offsetX: this.offsetX, 173 offsetY: this.offsetY 174 }) 175 .strokeWidth(30) 176 .trackBackgroundColor(this.bgColor) 177 }.width('100%').margin({ top: 5 }) 178 } 179} 180``` 181 182
