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

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

原文地址：https://blog.csdn.net/yyxhzdm/article/details/135922905

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！