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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/357179.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SpringCloud微服务常见问题

1 微服务 返回面试宝典 问题1 SpringCloud常见组件有哪些? SpringCloud包含的组件很多,有很多功能是重复的,其中最常见的组件包括: 注册中心组件:Eureka、Nacos等;负载均衡组件:Ribbon&…

Spring Security的入门案例!!!

一、导入依赖 <dependencies><!--web--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--security--><dependency><groupId>…

如何获得《幻兽帕鲁》隐藏帕鲁唤夜兽?13000个配种配方查询 幻兽帕鲁Steam好评率还在涨 Mac苹果电脑玩幻兽帕鲁 Crossover玩Windows游戏

《幻兽帕鲁》是一款Steam平台热门游戏&#xff0c;开放式大陆和养成式冒险结合&#xff0c;成为2024首款热门游戏&#xff0c;不过由于官方仅发布了Windows版的游戏客户端&#xff0c;Mac用户无法直接玩&#xff0c;好在有Crossover这样的神器&#xff0c;让苹果电脑也能玩上《…

OCP NVME SSD规范解读-8.SMART日志要求-2

SMART-7&#xff1a; 软错误ECC计数可能是记录了被第一级ECC&#xff08;比如LDPC Hard Decode&#xff09;成功纠正过的读取错误次数。这意味着数据恢复成功&#xff0c;但依然表明存储介质出现了某种程度上的可靠性下降。 LDPC码是一种基于稀疏矩阵的纠错码&#xff0c;它由…

WebGL 入门:开启三维网页图形的新篇章(下)

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 &#x1f35a; 蓝桥云课签约作者、上架课程《Vue.js 和 E…

go基础-垃圾回收+混合写屏障GC全分析

垃圾回收(Garbage Collection&#xff0c;简称GC)是编程语言中提供的自动的内存管理机制&#xff0c;自动释放不需要的对象&#xff0c;让出存储器资源&#xff0c;无需程序员手动执行。 Golang中的垃圾回收主要应用三色标记法&#xff0c;GC过程和其他用户goroutine可并发运行…

高端车规MCU的破局之路

目录 1 低质量的无效内卷 2 高端车规MCU产品共性 2.1 支持标定测量 2.2 低延迟通信加速 2.3 完备的网络安全解决方案 2.4虚拟化 3 国产替代的囚徒困境 1 低质量的无效内卷 近几年&#xff0c;车规MCU国产替代的呼声此消彼长&#xff0c;但仍然集中在低端产品。 从产…

网络安全知识和华为防火墙

网络安全 网络空间安全 ---Cyberspace 2003年美国提出的网络空间概念 ---一个由信息基础设施组成的互相依赖的网络。 我国官方文件定义&#xff1a;网络空间为继海、陆、空、天以外的第五大人类互动领域。 通信保密阶段 --- 计算机安全阶段 --- 信息系统安全 --- 网络空间安…

引用httplib时报undefined reference to `__imp_WSASocketW‘的解决方案

报错信息如下&#xff1a; undefined reference to __imp_getaddrinfo undefined reference to __imp_WSASocketW’ undefined reference to __imp_socket undefined reference to __imp_setsockopt’ undefined reference to __imp_setsockopt undefined reference to __imp_…

主从数据库MySQL服务重启步骤与注意事项

主从数据库MySQL服务重启步骤与注意事项 实验环境&#xff1a; 172.20.26.34 &#xff08;主应用服务器&#xff09; 172.20.26.26 &#xff08;备应用服务器&#xff09; 172.20.26.37 &#xff08;主库服务器&#xff09; 172.20.26.38 &#xff08;从库服务器&…

防御保护----防火墙基本知识

一.防火墙的基本知识--------------------------------------------------------- 防火墙&#xff1a;可以想象为古代每个城市的城墙&#xff0c;用来防守敌军的攻击。墙&#xff0c;始于防&#xff0c;忠于守。从古至今&#xff0c;墙予人以安全之意。 防火墙的主要职责在于&…

【客户端性能测试】手机设备的“高中端”怎么判断

在做客户端性能测试的时候&#xff0c;选择手机是一个老大难话题了&#xff0c;我们不可能随便拿一台设备就开工&#xff0c;最少也得选择高端机、终端机、低端机来看看结果。 一、先上科普 1.1 SoC 1.2 CPU 1.3 厂商rom 1.4 XXXm 二、划分思路 2.1 思路【目前是没有市面…

python字典JSON 和csv文件

JSON与Python字典 Python中的字典与JSON非常类似而且支持嵌套结构。Json通过key取值的过程和python字典通过索引取值过程完全一致。JavaScript数据类型&#xff08;值&#xff09;对应的Python数据类型&#xff08;值&#xff09; JSONPythonobjectdictarraylist/tuplestring…

Linux自动备份MySQL数据库

目录 1. 创建备份目录2. 创建自动化备份脚本3. 执行备份脚本测试4. 设置每天凌晨两点自动执行 1. 创建备份目录 cd home mkdir backup2. 创建自动化备份脚本 vim backup.sh编辑脚本内容主机&#xff0c;用户名&#xff0c;密码&#xff0c;备份数据库及备份路径自行填写 #!/…

ESP8266 传感器搭配 Node-RED实时显示数据,邮件告警 实验

前言 esp8266 12f,wif模块,接倾斜传感器,火焰传感器,烟雾传感器,水浸传感器,蜂鸣器。通过mqtt发布数据,并使用node-red实时获取数据,显示到页面上。并且通过邮件和页面两种方式报警。 需求如下: ①倾斜传感器:监测是否保持平衡。UI界面显示平衡度。如果不平衡,UI界…

制作OpenSSH 9.6 for openEuler 22.03 LTS的rpm升级包

OpenSSH作为操作系统底层管理平台软件&#xff0c;需要保持更新以免遭受安全攻击&#xff0c;编译生成rpm包是生产环境中批量升级的最佳途径。本文在国产openEuler 22.03 LTS系统上完成OpenSSH 9.6的编译工作。 一、编译环境 1、准备环境 基于vmware workstation发布的x86虚…

基于模型参考自适应的永磁同步电机MATLAB仿真模型

微❤关注“电气仔推送”获得资料&#xff08;专享优惠&#xff09; 模型简介 首先对传感器采集的电机电流和电压进行坐标变换&#xff0c;分别求得 dq轴的电流、电压。以此为依据&#xff0c;通过并联条模型计算 dq轴的电流的估计量&#xff0c;得到电流误差&#xff0c;然后…

Cloudreve个人网盘系统源码 支持云存储(七牛、阿里云OSS、腾讯云COS、又拍云、OneDrive) 基于Go框架

现在的网盘动不动就限速&#xff0c;涨价&#xff0c;弄得很是心烦。今天分享一款开源免费的网盘项目&#xff0c;基于 Go 语言开发的 Cloudreve。Cloudreve基于Go框架云存储个人网盘系统源码支持多家云存储驱动&#xff08;从机、七牛、阿里云 OSS、腾讯云 COS、又拍云、OneDr…

[GXYCTF2019]禁止套娃(特详解)

刚打开页面什么都没有&#xff0c;抓包也什么都没有 那就dirsaerch扫一下&#xff0c;发现状态码都是429&#xff0c;访问太快了&#xff08;这里很多师傅都没有说明或者说清楚&#xff09; 这里改了一下线程&#xff08;kali自带的&#xff0c;如果用的脚本要加前面要加python…

软件架构设计

一、考点分布 软件架构的概念&#xff08;※※※&#xff09;基于架构的软件开发&#xff08;※※※※&#xff09;软件架构风格&#xff08;※※※※※&#xff09;特定领域软件架构&#xff08;※※※&#xff09;软件质量属性&#xff08;※※※※※&#xff09;软件架构评估…