当前位置：首页 > news >正文

第九节HarmonyOS 常用基础组件14-DataPanel

news 2025/8/26 9:51:32

1、描述

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

2、接口

DataPanel(options:{values: number[], max?: numner, type?: DataPanelType})

3、参数

参数名	参数类型	必填	描述
values	number[]	是	数据值列表，最多含9条数据，大于9条数据则取前9条数据，若数据小于0则置为0。
max	number	否	表示数据最大值，max等于values的数据各项的和，按比例显示。默认值：100
type	DataPanelType	否	数据面板的类型。默认值DataPanelType.Circle

4、DataPanelType说明

Line - 线型数据面板

Circle - 环形数据面板

5、属性

closeEffect - boolean - 关闭数据占比图表旋转动效。

6、示例

@Entry
@Component
struct DataPanelPage {@State message: string = '数据面板组件，用于将多个数据占比情况使用占比图进行展示。';@State valueArrs: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 20];@State valueArrs2: number[] = [10, 10, 10, 10, 10, 10, 10, 10, 10];build() {Row() {Scroll() {Column() {Text(this.message).fontSize(20).fontWeight(FontWeight.Bold).width("96%")Blank(12)DataPanel({ values: this.valueArrs, max: 100 }).width(200).height(200)Blank(12)DataPanel({ values: this.valueArrs2, max: 100 }).width(200).height(200)Blank(12)DataPanel({ values: this.valueArrs, max: 100, type: DataPanelType.Line }).width("96%").height(20).closeEffect(true)Blank(12)DataPanel({ values: this.valueArrs2, max: 100, type: DataPanelType.Line }).width("96%").height(20).closeEffect(true)Blank(12)Button("DataPanel文本文档").fontSize(20).backgroundColor('#007DFF').width('96%').onClick(() => {// 处理点击事件逻辑router.pushUrl({url: "pages/baseComponent/dataPanel/DataPanelDesc",})})Blank(12)}.width('100%')}}.padding({ top: 12, bottom: 12 })}
}

7、效果图