文章目录组件概述核心 API 与参数1. 组件构造参数2. 关键枚举3. 基础样式属性示例代码功能说明代码逐段解析1. 数据定义2. 布局容器3. 单段环形数据面板核心4. 多段环形数据面板5. 线性数据面板运行效果总结组件概述DataPanel数据面板组件是 HarmonyOS 6 提供的可视化数据展示组件支持环形Circle和线性Line两种展示类型可灵活呈现单段/多段数据占比、进度等信息广泛应用于系统状态展示、存储使用率、版本进度等场景。核心 API 与参数1. 组件构造参数参数名类型必填说明valuesnumber[]是数据数组- 单段数据数组长度为1如[30]表示单一占比- 多段数据数组长度1如[50,12,8,5]表示多维度占比总和maxnumber是数据最大值通常设为100表示百分比也可自定义业务最大值typeDataPanelType是展示类型-DataPanelType.Circle环形展示-DataPanelType.Line线性展示注官方文档中Linear与Line为同一类型API 中可互通2. 关键枚举枚举值说明适用场景DataPanelType.Circle环形数据面板占比类数据如使用率、完成率DataPanelType.Line线性数据面板多段趋势/分段进度如多节点完成状态3. 基础样式属性属性名类型说明width/heightnumber组件宽高环形建议设为正方形如168x168线性建议宽远大于高如300x20position{x: number, y: number}绝对定位用于调整辅助文本如%的位置示例代码功能说明示例实现三类 DataPanel 展示效果单段环形数据面板展示30%的占比数据叠加版本号文本多段环形数据面板展示多维度数据总和占比50128575%叠加存储使用率文本线性数据面板展示9段均分数据每段10%的线性进度条。代码逐段解析1. 数据定义public valueArr: number[] [10, 10, 10, 10, 10, 10, 10, 10, 10]定义线性数据面板的数据源9个10%的分段数据总和90%未占满100%剩余10%为空白使用public修饰保证组件内可直接调用。2. 布局容器build() { Column({ space: 5 }) { // 环形数据面板行容器 Row() { ... }.margin({ bottom: 59 }) // 线性数据面板 DataPanel(...) }.width(100%).margin({ top: 5 }) }整体采用Column纵向布局环形面板与线性面板间距5vpRow容器承载两个环形面板横向排列右侧间距44vp。3. 单段环形数据面板核心Stack() { // 单段环形数据面板 DataPanel({ values: [30], max: 100, type: DataPanelType.Circle }).width(168).height(168) Column() { Text(30).fontSize(35).fontColor(#182431) Text(1.0.0).fontSize(9.33).lineHeight(12.83).fontWeight(500).opacity(0.6) } Text(%) .fontSize(9.33) .lineHeight(12.83) .fontWeight(500) .opacity(0.6) .position({ x: 104.42, y: 78.17 }) }.margin({ right: 44 })关键说明Stack堆叠容器实现“环形面板 中心文本 百分比符号”的叠加效果DataPanel配置values: [30]表示30%占比max: 100为百分比基数Circle类型渲染环形中心文本展示核心数值“30”和版本号“1.0.0”通过字体大小/透明度区分主次绝对定位%符号通过position精准定位到环形右侧提升视觉完整性。4. 多段环形数据面板Stack() { DataPanel({ values: [50, 12, 8, 5], max: 100, type: DataPanelType.Circle }).width(168).height(168) Column() { Text(75).fontSize(35).fontColor(#182431) Text(已使用98GB/128GB).fontSize(8.17).lineHeight(11.08).fontWeight(500).opacity(0.6) } Text(%) .fontSize(9.33) .lineHeight(12.83) .fontWeight(500) .opacity(0.6) .position({ x: 104.42, y: 78.17 }) }关键说明values: [50,12,8,5]4段数据总和75对应中心文本“75%”环形自动按数据占比分割为4个颜色段使用系统默认配色中心文本替换为存储使用率描述已使用98GB/128GB贴合实际业务场景。5. 线性数据面板DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(20)关键说明type: DataPanelType.Line渲染线性进度条宽300vp、高20vp符合线性展示视觉习惯values: this.valueArr9段10%的数据线性面板会分割为9个等宽的颜色段无叠加文本纯线性展示适用于多节点状态、分段进度等场景。运行效果组件类型展示效果单段环形168x168 环形面板30%区域填充系统默认色中心显示“30”“1.0.0”右侧显示“%”多段环形168x168 环形面板按50/12/8/5的占比分割为4个颜色段中心显示“75”“已使用98GB/128GB”右侧显示“%”线性面板300x20 线性进度条均分9个10%的颜色段总占比90%剩余10%为空白运行效果如图总结环形面板布局建议使用Stack堆叠容器叠加文本实现“数据面板核心数值”的复合展示环形宽高需设为相同值正方形否则会拉伸变形。数据逻辑values数组总和可小于/等于max小于时剩余部分为空白等于时填满整个面板多段环形的颜色由系统自动分配如需自定义可通过colors属性扩展示例未使用。文本定位辅助文本如%建议使用position绝对定位需根据环形尺寸微调x/y值保证视觉对齐中心文本建议通过Column居中字体大小建议为环形宽度的1/5~1/4如168宽度对应35字号。兼容性说明支持设备Phone/平板/PC/智慧屏API 7类型兼容DataPanelType.Linear与DataPanelType.Line为同一类型可互换使用样式扩展示例未使用strokeWidth环形宽度/线性高度、colors自定义颜色等属性可参考官方文档扩展。如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力