HarmonyOS NEXT实战：占比图

##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##

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

知识点：

接口

DataPanel(options: DataPanelOptions)

options：数据面板组件参数。

DataPanelOptions对象属性

• values：数据值列表，最多包含9个数据，大于9个数据则取前9个数据。若数据值小于0则置为0。
• max：max大于0，表示数据的最大值。max小于等于0，max等于value数组各项的和，按比例显示。默认值：100
• type：数据面板的类型（不支持动态修改）。默认值：DataPanelType.Circle

组件属性

• closeEffect(value: boolean)：设置关闭数据占比图表旋转动效和投影效果。若未设置trackShadow属性，则该属性控制投影效果的开关，开启投影的效果为投影的默认效果。若设置trackShadow属性，则由trackShadow属性值控制投影效果的开关。
• valueColors(value: Array<ResourceColor | LinearGradient>)：设置各数据段颜色。ResourceColor为纯色，LinearGradient为渐变色。
• trackBackgroundColor(value: ResourceColor)：设置底板颜色。默认值：'#08182431'，格式为十六进制ARGB值，前俩位代表透明度。
• strokeWidth(value: Length)：设置圆环粗细。数据面板的类型为DataPanelType.Line时该属性不生效。默认值：24vp。说明：设置小于0的值时，按默认值显示。请合理设置圆环粗细，当value大于圆环半径时，圆环粗细会自动设置为圆环半径的12%。当value过大时，圆环可能会消失。
• trackShadow(value: DataPanelShadowOptions)：设置投影样式。设置null为不开启投影。
• contentModifier(modifier: ContentModifier<DataPanelConfiguration>)：定制DataPanel内容区的方法。在DataPanel组件上，定制内容区的方法。modifier: 内容修改器，开发者需要自定义class实现ContentModifier接口。

ColorStop：颜色断点类型，用于描述渐进色颜色断点。

ColorStop属性：

color：颜色值。

offset：渐变色断点（0~1之间的比例值，若数据值小于0则置为0，若数据值大于1则置为1）。说明：若传入字符串类型且内容为数字，则转换为对应的数值。例如'10vp'转换为10，'10%'转换为0.1。

DataPanelConfiguration对象属性

• values：当前DataPanel的数据值。取值范围：0, 9，若数据值小于0，则置为0。
• maxValue：DataPanel显示的最大值。默认值：100。如果小于或等于0，maxValue将被设为values数组中所有项的总和，并按比例显示。

实战：DataPanelPage

@Entry
@Component
struct DataPanelPage {
  @State value: number = 30

  build() {
    Column({ space: 10 }) {
      Text('DataPanel占比图实战')
      Row() {
        Stack() {
          // 单段环形数据面板
          DataPanel({ values: [this.value], max: 100, type: DataPanelType.Circle }).width(168).height(168)
          Text(this.value + '%').fontSize(25).fontColor('#182431')
        }
        .width('100%')
        .margin({ right: 44 })
      }
      .width('100%')
      .margin({ bottom: 59 })

    }
    .width('100%')
    .height('100%')
    .margin({ top: 5 })
  }
}