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、效果图
