HarmonyOS NEXT实战:占比图

举报
鸿蒙开发工程师 发表于 2025/06/26 16:03:09 2025/06/26
【摘要】 ##HarmonyOS Next实战##HarmonyOS SDK应用服务##教育##DataPanel数据面板组件,用于将多个数据占比情况使用占比图进行展示。知识点:接口DataPanel(options: DataPanelOptions)options:数据面板组件参数。DataPanelOptions对象属性values:数据值列表,最多包含9个数据,大于9个数据则取前9个数据。若数...

##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 })
  }
}
【声明】本内容来自华为云开发者社区博主,不代表华为云及华为云开发者社区的观点和立场。转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息,否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。