简介

DataPanel( )组件是鸿蒙开发钟的一种数据面板组件，简单来说就是环形图（当然也有线性的），用于将多个数据占比情况使用占比图进行展示。完整使用请参考官方文档：DataPanel( )组件

使用方法

DataPanel( )的参数类型为 object ，其中 values 是必填项，各参数说明如下：

用一段简单的代码来直观感受一下：

Column() {
  Text("DataPanel( )组件")
    .fontSize(30)
    .fontWeight(600)
    .margin({ top: 20 })
  DataPanel({
    values: [10, 20, 30, 40], // 数据列表
    max: 100, // 最大值默认是100
    type: DataPanelType.Circle  // 类型默认是 Circle，可选 Line
  })
}

效果如下： 

如果将类型改为 Line，则需要设置一下高度，而且 strokeWidth 是不生效的，我一般会用这种类型去做图例，示例代码如下：

DataPanel({
  values: [10, 20, 30, 40], // 数据列表
  max: 100, // 最大值默认是100
  type: DataPanelType.Line  // 类型默认是 Circle，可选 Line
})
  .valueColors(this.colorArray)
  // .strokeWidth(50)  // 若类型为 Line，则 strokeWidth 属性不生效
  .height(20)  // 若类型为 Line，需要设置高度

类型为 Line 的效果如图所示：

我们还可以通过  strokeWidth 属性来调整圆环粗细，valueColors 属性来自定义各数据段的颜色，示例代码如下：

public color1: LinearGradient =
  new LinearGradient([{ color: "#00FF00", offset: 0 }, { color: "#ADFF2F", offset: 1 }])
public color2: LinearGradient =
  new LinearGradient([{ color: "#0077FF", offset: 0 }, { color: "#66CCFF", offset: 1 }])
public color3: LinearGradient =
  new LinearGradient([{ color: "#8A2BE2 ", offset: 0 }, { color: "#BA55D3", offset: 1 }])
public color4: LinearGradient =
  new LinearGradient([{ color: "#FF0000", offset: 0 }, { color: "#FFAD00", offset: 1 }])
public colorArray: Array<LinearGradient | ResourceColor> = [this.color1, this.color2, this.color3, this.color4]

Column() {
  DataPanel({
    values: [10, 20, 30, 40], // 数据列表
    max: 100, // 最大值默认是100
    type: DataPanelType.Circle  // 类型默认是 Circle，可选 Line
  })
    .valueColors(this.colorArray)
    .strokeWidth(50)  // 圆环宽度为50
}

 效果如下所示：

此外，如果我们想在圆环内添加内容的话，可以使用 Stack( ) 组件进行嵌套，示例代码如下：

Stack() {
  Text("这里可以添加内容哦")
  DataPanel({
    values: [10, 20, 30, 40], // 数据列表
    max: 100, // 最大值默认是100
    type: DataPanelType.Circle  // 类型默认是 Circle，可选 Line
  })
    .valueColors(this.colorArray)
    .strokeWidth(30) // 若类型为 Line，则 strokeWidth 属性不生效
  // .height(20) // 若类型为 Line，需要设置高度
}

效果如下所示： 

 上述例子的完整代码可以点击git 链接下载。