一、组件简介

DataPanel 是 ArkUI 提供的数据面板组件，用于可视化展示一组数据的占比情况。常见场景包括存储空间使用率、电量消耗分布、任务完成进度等。自 API Version 7 起支持。

二、接口定义

接口：DataPanel(options: DataPanelOptions)

DataPanelOptions 参数

面板类型

• DataPanelType.Line：线性（横向进度条样式）
• DataPanelType.Circle：环形（圆环占比图）

三、常用属性

四、简单示例

示例 1：磁盘空间占用（环形多段）

@Entry
@Component
struct DiskUsage {
  build() {
    Column({ space: 16 }) {
      Text('磁盘空间占用').fontSize(20).fontWeight(FontWeight.Bold)

      DataPanel({
        values: [42, 18, 12],   // 视频、图片、文档
        max: 100,
        type: DataPanelType.Circle
      })
        .width(180)
        .height(180)
        .strokeWidth(18)
        .valueColors([Color.Blue, Color.Green, Color.Orange])
        .trackBackgroundColor('#EFEFEF')

      Row({ space: 8 }) {
        Text('视频').fontColor(Color.Blue)
        Text('图片').fontColor(Color.Green)
        Text('文档').fontColor(Color.Orange)
      }
    }
    .width('100%')
    .padding(16)
  }
}

示例 2：任务完成进度（线性）

@Entry
@Component
struct TaskProgress {
  build() {
    Column({ space: 12 }) {
      Text('本周任务进度').fontSize(18).fontWeight(FontWeight.Medium)

      DataPanel({
        values: [70],
        max: 100,
        type: DataPanelType.Line
      })
        .width('100%')
        .height(24)
        .valueColors([Color.Green])
        .trackBackgroundColor('#E0E0E0')

      Text('已完成 70%').fontSize(14).fontColor('#666666')
    }
    .width('100%')
    .padding(16)
  }
}

示例 3：多段线性分布（用渐变色区分优先级）

@Entry
@Component
struct PriorityDist {
  build() {
    Column({ space: 12 }) {
      Text('工单优先级分布').fontSize(18).fontWeight(FontWeight.Medium)

      DataPanel({
        values: [30, 25, 45],   // 高、中、低
        max: 100,
        type: DataPanelType.Line
      })
        .width('100%')
        .height(20)
        .valueColors([Color.Red, Color.Yellow, Color.Green])
        .trackBackgroundColor('#F0F0F0')
    }
    .width('100%')
    .padding(16)
  }
}

五、使用注意事项

1. values 最多 9 个：超过 9 个数据会被忽略或只取前 9 个，需注意数据量。
2. 数据越界处理：负数按 0 处理，大于 max 的值按 max 处理。
3. 必须设置尺寸：环形建议设置等宽高（如 180 × 180），线性建议宽高比悬殊（如宽度 300、高度 20）。
4. strokeWidth 仅对环形生效：线性类型下该属性无效果。
5. 不能动态修改类型：type 不支持运行时修改，如需切换类型需重建组件。
6. 占比由 values 与 max 共同决定：若 max 未显式设置，默认 100，常用于百分比场景。

六、典型应用场景

• 系统状态监控（CPU / 内存 / 存储占用）
• 数据统计看板（销售占比、流量来源分布）
• 任务/项目进度展示