鸿蒙API13开发【信息展示之DataPanel】ArkTS组件

数据面板组件，用于将多个数据占比情况使用占比图进行展示。
阐明
该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
子组件

无
接口

DataPanel(options: DataPanelOptions)
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明options[DataPanelOptions]是数据面板组件参数。 DataPanelOptions对象阐明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填阐明valuesnumber[]是数据值列表，最多包罗9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。maxnumber否- max大于0，表示数据的最大值。- max小于等于0，max等于value数组各项的和，按比例显示。默认值：100type8+[DataPanelType]否数据面板的类型（不支持动态修改）。默认值：DataPanelType.Circle DataPanelType8+摆列阐明

卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
名称阐明Line线型数据面板。Circle环形数据面板。 属性

除支持[通用属性]外，还支持以下属性：
closeEffect

closeEffect(value: boolean)
设置关闭数据占比图表旋转动效和投影效果。若未设置[trackShadow属性]，则该属性控制投影效果的开关，开启投影的效果为投影的默认效果。若设置trackShadow属性，则由trackShadow属性值控制投影效果的开关。
卡片能力： 从API version 9开始，该接口支持在ArkTS卡片中使用。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueboolean是关闭数据占比图表旋转动效和投影效果。默认值：false valueColors10+

valueColors(value: Array<ResourceColor | LinearGradient>)
设置各数据段颜色。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明valueArray<[ResourceColor][LinearGradient]>是 trackBackgroundColor10+

trackBackgroundColor(value: ResourceColor)
设置底板颜色。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明value[ResourceColor]是底板颜色。默认值：‘#08182431’，格式为十六进制ARGB值，前俩位代表透明度。 strokeWidth10+

strokeWidth(value: Length)
设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明value[Length]是圆环粗细。默认值：24单位：vp**阐明：**设置小于0的值时，按默认值显示。请公道设置圆环粗细，当value大于圆环半径时，圆环粗细会主动设置为圆环半径的12%。当value过大时，圆环可能会消失。 trackShadow10+

trackShadow(value: DataPanelShadowOptions)
设置投影样式。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明value[DataPanelShadowOptions]是投影样式。**阐明：**设置null为不开启投影。 contentModifier12+

contentModifier(modifier: ContentModifier)
定制DataPanel内容区的方法。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明modifier[ContentModifier]是在DataPanel组件上，定制内容区的方法。modifier: 内容修改器，开发者必要自定义class实现ContentModifier接口。 DataPanelShadowOptions10+对象阐明

DataPanelShadowOptions继承自[MultiShadowOptions]，具有MultiShadowOptions的全下属性。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填阐明colorsArray<[ResourceColor][LinearGradient]>否 LinearGradient10+

constructor

constructor(colorStops: ColorStop[])
线性渐变颜色形貌。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明colorStops[ColorStop][]是存储渐变颜色和渐变点。 ColorStop10+

颜色断点类型，用于形貌渐进色颜色断点。
元服务API： 从API version 11开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填阐明color[ResourceColor]是颜色值。offset[Length]是渐变色断点（0~1之间的比例值，若数据值小于0则置为0，若数据值大于1则置为1）。**阐明：**若传入字符串类型且内容为数字，则转换为对应的数值。比方’10vp’转换为10，'10%'转换为0.1。 DataPanelConfiguration12+对象阐明

开发者必要自定义class实现ContentModifier接口。
元服务API： 从API version 12开始，该接口支持在元服务中使用。
系统能力： SystemCapability.ArkUI.ArkUI.Full
名称类型必填阐明valuesnumber[]是当前DataPanel的数据值，最大长度为9。maxValuenumber是DataPanel显示的最大值。默认值：100。 示例

示例1（设置数据面板类型）

该示例通过type属性，实现了设置数据面板的类型的功能。

1. // xxx.ets
2. @Entry
3. @Component
4. struct DataPanelExample {
5.   public valueArr: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10]
7.   build() {
8.     Column({ space: 5 }) {
9.       Row() {
10.         Stack() {
11.           // 单段环形数据面板
12.           DataPanel({ values: [30], max: 100, type: DataPanelType.Circle }).width(168).height(168)
13.           Column() {
14.             Text('30').fontSize(35).fontColor('#182431')
15.             Text('1.0.0').fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6)
16.           }
18.           Text('%')
19.             .fontSize(9.33)
20.             .lineHeight(12.83)
21.             .fontWeight(500)
22.             .opacity(0.6)
23.             .position({ x: 104.42, y: 78.17 })
24.         }.margin({ right: 44 })
26.         // 多段环形数据面板
27.         Stack() {
28.           DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168)
29.           Column() {
30.             Text('75').fontSize(35).fontColor('#182431')
31.             Text('已使用98GB/128GB').fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6)
32.           }
34.           Text('%')
35.             .fontSize(9.33)
36.             .lineHeight(12.83)
37.             .fontWeight(500)
38.             .opacity(0.6)
39.             .position({ x: 104.42, y: 78.17 })
40.         }
41.       }.margin({ bottom: 59 })
43.       // 线形数据面板
44.       DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(20)
45.     }.width('100%').margin({ top: 5 })
46.   }
47. }

复制代码

示例2（设置渐变色和阴影）

该示例通过valueColors和trackShadow接口设置LinearGradient颜色，实现了设置渐变色效果和阴影效果。

1. // xxx.ets
2. @Entry
3. @Component
4. struct LinearGradientDataPanelExample {
5.   public values1: number[] = [20, 20, 20, 20]
6.   public color1: LinearGradient =
7.     new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#FFEF629F", offset: 1 }])
8.   public color2: LinearGradient =
9.     new LinearGradient([{ color: "#FF67F9D4", offset: 0 }, { color: "#FFFF9554", offset: 1 }])
10.   public colorShadow1: LinearGradient =
11.     new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#65EF629F", offset: 1 }])
12.   public colorShadow2: LinearGradient =
13.     new LinearGradient([{ color: "#65e26709", offset: 0 }, { color: "#65efbd08", offset: 1 }])
14.   public colorShadow3: LinearGradient =
15.     new LinearGradient([{ color: "#6572B513", offset: 0 }, { color: "#6508efa6", offset: 1 }])
16.   public colorShadow4: LinearGradient =
17.     new LinearGradient([{ color: "#65ed08f5", offset: 0 }, { color: "#65ef0849", offset: 1 }])
18.   @State color3: string = '#00FF00'
19.   @State color4: string = '#20FF0000'
20.   @State bgColor: string = '#08182431'
21.   @State offsetX: number = 15
22.   @State offsetY: number = 15
23.   @State radius: number = 5
24.   @State colorArray: Array<LinearGradient | ResourceColor> = [this.color1, this.color2, this.color3, this.color4]
25.   @State shadowColorArray: Array<LinearGradient | ResourceColor> =
26.     [this.colorShadow1, this.colorShadow2, this.colorShadow3, this.colorShadow4]
28.   build() {
29.     Column({ space: 5 }) {
30.       Text('LinearGradient')
31.         .fontSize(9)
32.         .fontColor(0xCCCCCC)
33.         .textAlign(TextAlign.Start)
34.         .width('100%')
35.         .margin({ top: 20, left: 20 })
36.       DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle })
37.         .width(300)
38.         .height(300)
39.         .valueColors(this.colorArray)
40.         .trackShadow({
41.           radius: this.radius,
42.           colors: this.shadowColorArray,
43.           offsetX: this.offsetX,
44.           offsetY: this.offsetY
45.         })
46.         .strokeWidth(30)
47.         .trackBackgroundColor(this.bgColor)
48.     }.width('100%').margin({ top: 5 })
49.   }
50. }

复制代码

示例3（设置关闭动画和阴影）

该示例通过closeEffect接口，实现了关闭数据面板动画和阴影的功能。

1. // xxx.ets
2. @Entry
3. @Component
4. struct LinearGradientDataPanelExample {
5.   public values1: number[] = [20, 20, 20, 20]
6.   public color1: LinearGradient =
7.     new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#FFEF629F", offset: 1 }])
8.   public color2: LinearGradient =
9.     new LinearGradient([{ color: "#FF67F9D4", offset: 0 }, { color: "#FFFF9554", offset: 1 }])
10.   public colorShadow1: LinearGradient =
11.     new LinearGradient([{ color: "#65EEC9A3", offset: 0 }, { color: "#65EF629F", offset: 1 }])
12.   public colorShadow2: LinearGradient =
13.     new LinearGradient([{ color: "#65e26709", offset: 0 }, { color: "#65efbd08", offset: 1 }])
14.   public colorShadow3: LinearGradient =
15.     new LinearGradient([{ color: "#6572B513", offset: 0 }, { color: "#6508efa6", offset: 1 }])
16.   public colorShadow4: LinearGradient =
17.     new LinearGradient([{ color: "#65ed08f5", offset: 0 }, { color: "#65ef0849", offset: 1 }])
18.   @State color3: string = '#00FF00'
19.   @State color4: string = '#20FF0000'
20.   @State bgColor: string = '#08182431'
21.   @State offsetX: number = 15
22.   @State offsetY: number = 15
23.   @State radius: number = 5
24.   @State colorArray: Array<LinearGradient | ResourceColor> = [this.color1, this.color2, this.color3, this.color4]
25.   @State shadowColorArray: Array<LinearGradient | ResourceColor> =
26.     [this.colorShadow1, this.colorShadow2, this.colorShadow3, this.colorShadow4]
28.   build() {
29.     Column({ space: 5 }) {
30.       Text('LinearGradient')
31.         .fontSize(9)
32.         .fontColor(0xCCCCCC)
33.         .textAlign(TextAlign.Start)
34.         .width('100%')
35.         .margin({ top: 20, left: 20 })
36.       DataPanel({ values: this.values1, max: 100, type: DataPanelType.Circle })
37.         .width(300)
38.         .height(300)
39.         .valueColors(this.colorArray)
40.         .strokeWidth(30)
41.         .closeEffect(true)
42.         .trackBackgroundColor(this.bgColor)
43.     }.width('100%').margin({ top: 5 })
44.   }
45. }

复制代码

示例4（设置定制内容区）

该示例通过contentModifier接口，实现了定制数据面板内容区的功能。

1. // xxx.ets
2. @Builder
3. function buildDataPanel(config: DataPanelConfiguration) {
4.   Column() {
5.     Column() {
6.       ForEach(config.values, (item: number, index: number) => {
7.         ChildItem({ item: item, index: index, max: config.maxValue })
8.       }, (item: string) => item)
9.     }.padding(10)
11.     Column() {
12.       Line().width("100%").backgroundColor("#ff373737").margin({ bottom: 5 })
13.     }.padding({ left: 20, right: 20 })
15.     Row() {
16.       Text('Length=' + config.values.length + '    ').margin({ left: 10 }).align(Alignment.Start)
17.       Text('Max=' + config.maxValue).margin({ left: 10 }).align(Alignment.Start)
18.     }
19.   }
20. }
22. class DataPanelBuilder implements ContentModifier<DataPanelConfiguration> {
23.   constructor() {
24.   }
26.   applyContent(): WrappedBuilder<[DataPanelConfiguration]> {
27.     return wrapBuilder(buildDataPanel)
28.   }
29. }
31. @Entry
32. @Component
33. struct Index {
34.   build() {
35.     Column() {
36.       Text("Data panel").margin({ top: 12 });
37.       Row() {
38.         DataPanel({ values: [12.3, 21.1, 13.4, 35.2, 26.0, 32.0], max: 140, type: DataPanelType.Circle })
39.           .width(400)
40.           .height(260)
41.           .constraintSize({ maxWidth: "100%" })
42.           .padding({ top: 10 })
43.           .contentModifier(new DataPanelBuilder())
44.       }.margin(15).backgroundColor("#fff5f5f5")
45.     }
46.   }
47. }
49. @Component
50. struct ChildItem {
51.   @Prop item: number;
52.   @Prop index: number;
53.   @Prop max: number;
54.   public color1: string = "#65ff00dd"
55.   public color2: string = "#6500ff99"
56.   public color3: string = "#65ffe600"
57.   public color4: string = "#6595ff00"
58.   public color5: string = "#65000dff"
59.   public color6: string = "#650099ff"
60.   public colorArray: Array<string> = [this.color1, this.color2, this.color3, this.color4, this.color5, this.color6]
62.   build() {
63.     RelativeContainer() {
64.       Row() {
65.         Rect()
66.           .height(25)
67.           .width(this.item * 600 / this.max)
68.           .foregroundColor(this.colorArray[this.index])
69.           .radius(5)
70.           .align(Alignment.Start)
71.         Text(" " + this.item)
72.           .fontSize(17)
73.       }
74.     }.height(28)
75.   }
76. }

复制代码

最后呢

很多开发朋侪不知道必要学习那些鸿蒙技能？鸿蒙开发岗位必要把握那些核心技能点？为此鸿蒙的开发学习必须要系统性的进行。
而网上有关鸿蒙的开发资料非常的少，如果你想学好鸿蒙的应用开发与系统底层开发。你可以参考这份资料，少走很多弯路，节流没必要的麻烦。由两位前阿里高级研发工程师团结打造的《鸿蒙NEXT星河版OpenHarmony开发文档》里面内容包罗了（ArkTS、ArkUI开发组件、Stage模型、多端部署、分布式应用开发、音频、视频、WebGL、OpenHarmony多媒体技能、Napi组件、OpenHarmony内核、Harmony南向开发、鸿蒙项目实战等等）鸿蒙（Harmony NEXT）技能知识点
如果你是一名Android、Java、前端等等开发人员，想要转入鸿蒙方向发展。可以直接领取这份资料辅助你的学习。下面是鸿蒙开发的学习门路图。

针对鸿蒙成长门路打造的鸿蒙学习文档。话不多说，我们直接看详细鸿蒙（OpenHarmony ）手册（共计1236页）与鸿蒙（OpenHarmony ）开发入门视频，帮助各人在技能的道路上更进一步。

• 《鸿蒙 (OpenHarmony)开发学习视频》
  
• 《鸿蒙生态应用开发V2.0白皮书》
  
• 《鸿蒙 (OpenHarmony)开发基础到实战手册》
  
• OpenHarmony北向、南向开发环境搭建
  
• 《鸿蒙开发基础》
  
• 《鸿蒙开发进阶》
  
• 《鸿蒙开发实战》
  

总结

鸿蒙—作为国家主力推送的国产操纵系统。部门的高校已经取消了安卓课程，从而开设鸿蒙课程；企业纷纷跟进启动了鸿蒙研发。
并且鸿蒙是完全具备无与伦比的机遇和潜力的；预计到年底将有 5,000 款的应用完成原生鸿蒙开发，将来将会支持 50 万款的应用。那么这么多的应用必要开发，也就意味着必要有更多的鸿蒙人才。鸿蒙开发工程师也将会迎来发作式的增长，学习鸿蒙势在必行！ 自↓↓↓拿

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。