1# DataPanel 2 3数据面板组件，用于将多个数据占比情况使用占比图进行展示。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10 11 12## 子组件 13 14无 15 16 17## 接口 18 19DataPanel(options: DataPanelOptions) 20 21从API version 9开始，该接口支持在ArkTS卡片中使用。 22 23**参数:** 24 25| 参数名 | 参数类型 | 必填 | 参数描述 | 26| -------- | -------- | -------- | -------- | 27| options | [DataPanelOptions](#datapaneloptions对象说明)| 是 | 数据面板组件参数。 | 28 29## DataPanelOptions对象说明 30 31| 参数名 | 参数类型 | 必填 | 参数描述 | 32| ----------------- | -------- | ----- | -------- | 33| values | number[] | 是 | 数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。 | 34| max | number | 否 | - max大于0，表示数据的最大值。<br/>- max小于等于0，max等于value数组各项的和，按比例显示。<br/>默认值：100 | 35| type<sup>8+</sup> | [DataPanelType](#datapaneltype8枚举说明) | 否 | 数据面板的类型（不支持动态修改）。<br/>默认值：DataPanelType.Circle | 36 37 38## DataPanelType<sup>8+</sup>枚举说明 39 40从API version 9开始，该接口支持在ArkTS卡片中使用。 41 42| 名称 | 描述 | 43| -------| ------------ | 44| Line | 线型数据面板。 | 45| Circle | 环形数据面板。 | 46 47 48## 属性 49 50除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 51 52 53| 名称 | 参数类型 | 描述 | 54| ------------- | ------- | -------- | 55| closeEffect | boolean | 关闭数据占比图表旋转动效和投影效果。<br/>默认值：false <br/>**说明：** <br/> 若未设置trackShadow属性，则该属性控制投影效果的开关，开启投影的效果为投影的默认效果。<br/> 若设置trackShadow属性，则由trackShadow属性值控制投影效果的开关。| 56| valueColors<sup>10+</sup> | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10对象说明)> | 各数据段颜色，ResourceColor为纯色，LinearGradient为渐变色。| 57| trackBackgroundColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 底板颜色。<br/>默认值：'#08182431'，格式为十六进制ARGB值，前俩位代表透明度。 | 58| strokeWidth<sup>10+</sup> | [Length](ts-types.md#length) | 圆环粗细。<br/>默认值：24<br/>单位：vp<br/>**说明：** <br/>设置小于0的值时，按默认值显示。<br/>数据面板的类型为DataPanelType.Line时该属性不生效。 | 59| trackShadow<sup>10+</sup> | [DataPanelShadowOptions](#datapanelshadowoptions10对象说明) | 投影样式。<br/>**说明：** <br/>设置null为不开启投影。| 60 61 62## DataPanelShadowOptions<sup>10+</sup>对象说明 63| 名称 | 参数类型 | 必填 | 描述 | 64| ------------- | ------- | ---- | -------- | 65| radius | number \| [Resource](ts-types.md#resource类型) | 否 | 投影模糊半径。 <br/>默认值：5<br/>单位：vp <br/>**说明：** <br/>设置小于等于0的值时，按默认值显示。| 66| colors | Array<[ResourceColor](ts-types.md#resourcecolor) \| [LinearGradient](#lineargradient10对象说明)> | 否 | 各数据段投影的颜色。 <br/>默认值：与valueColors值相同 <br/>**说明：** <br/>若设置的投影颜色的个数少于数据段个数时，则显示的投影颜色的个数和设置的投影颜色个数一致。<br/>若设置的投影颜色的个数多于数据段个数时，则显示的投影颜色的个数和数据段个数一致。| 67| offsetX | number \| [Resource](ts-types.md#resource类型) | 否 | X轴的偏移量。 <br/>默认值：5<br/>单位：vp | 68| offsetY | number \| [Resource](ts-types.md#resource类型) | 否 | Y轴的偏移量。 <br/>默认值：5<br/>单位：vp | 69 70## LinearGradient<sup>10+</sup>对象说明 71 72线性渐变颜色描述。 73 74LinearGradient(colorStops: ColorStop[]) 75 76| 名称 | 参数类型 | 必填 | 描述 | 77| ------------- | ------- | ---- | -------- | 78| colorStops | [ColorStop](#colorstop10对象说明)[] | 是 | 存储渐变颜色和渐变点。| 79 80 81## ColorStop<sup>10+</sup>对象说明 82 83颜色断点类型，用于描述渐进色颜色断点。 84 85| 名称 | 参数类型 | 必填 | 描述 | 86| ------------- | ------- | ---- | -------- | 87| color | [ResourceColor](ts-types.md#resourcecolor) | 是 | 颜色值。| 88| offset | [Length](ts-types.md#length) | 是 | 渐变色断点（0~1之间的比例值，若数据值小于0则置为0，若数据值大于1则置为1）。| 89 90 91 92## 示例 93 94### 示例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('已使用98GB/128GB').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### 示例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
