ArkTS DataPanel组件的用法（附带实例）

DataPanel 是数据面板组件，用于将多个数据占比情况使用占比图进行展示。

在 DataPanel 中，可以通过 valueColors 来定义各数据的颜色，如果没有定义，会由默认的颜色填充。数据面板的类型有环型和线型两种。

DataPanel环型进度条

示例代码如下：

// 外层布局：横向排列
Row() {
  // 标题文本
  Text('环形进度条')
    .fontSize(20)
    .fontWeight(800)
    .width('100%')
}

// 横向排列的行
Row() {
  // 堆叠容器，用于叠放组件
  Stack() {
    // 环形数据面板
    DataPanel({
      values: [30],           // 数据值列表，最多支持 9 个数据段
      max: 100,               // 数据最大值
      type: DataPanelType.Circle  // 面板类型：Circle 为环形，Line 为线形
    })
      .width(168)
      .height(168)
      // 各数据段颜色设置：纯色使用 ResourceColor，渐变使用 LinearGradient
      .valueColors(['#00ff00'])  // 绿色

    // 垂直排列的列
    Column() {
      // 中心显示的数字文本
      Text('20')
        .fontSize(35)
        .fontColor('#182431')  // 深灰色
    }
  }
}

DataPanel线型进度条

示例代码如下：

Row(){
  Text('线型进度条').fontSize(20).fontWeight(800)
}.width('100%')
Row(){
  Stack(){
    DataPanel({ values: this.valueArr, max: 100, type: DataPanelType.Line }).width(300).height(10)
  }
}

DataPanel 组件的示例效果如下图所示：


DataPanel 的其他属性：

• closeEffect：关闭数据占比图旋转动效和投影效果。默认值为 false；
• trackBackgroundColor：底板颜色。默认值为 '#08182431'，格式为十六进制 ARGB 值，前两位代表透明度；
• strokeWidth：圆环粗细；
• trackShadow：投影样式。