HarmonyOS实战开发-switch、chart组件的使用

介绍

本篇Codelab基于switch组件和chart组件,实现线形图、占比图、柱状图,并通过switch切换chart组件数据的动静态显示。要求实现以下功能:

  1. 实现静态数据可视化图表。
  2. 打开开关,实现静态图切换为动态可视化图表。

相关概念

  • switch组件:开关选择器,通过开关,开启或关闭某个功能。
  • chart组件:图表组件,用于呈现线形图、占比图、柱状图界面。

环境搭建

软件要求

  • DevEco Studio版本:DevEco Studio 3.1 Release及以上版本。
  • OpenHarmony SDK版本:API version 9及以上版本。

硬件要求

  • 开发板类型:润和RK3568开发板。
  • OpenHarmony系统:3.2 Release及以上版本。

环境搭建

完成本篇Codelab我们首先要完成开发环境的搭建,本示例以RK3568开发板为例,参照以下步骤进行:

  1. 获取OpenHarmony系统版本:标准系统解决方案(二进制)。以3.2 Release版本为例:

2.搭建烧录环境。

  1. 完成DevEco Device Tool的安装
  2. 完成RK3568开发板的烧录

3.搭建开发环境。

  1. 开始前请参考工具准备,完成DevEco Studio的安装和开发环境配置。
  2. 开发环境配置完成后,请参考使用工程向导创建工程(模板选择“Empty Ability”)。
  3. 工程创建完成后,选择使用真机进行调测。

代码结构解读

本篇Codelab只对核心代码进行讲解。

├──entry/src/main/js	     // 代码区
│  └──MainAbility
│     ├──common
│     │  └──images           // 图片资源
│     ├──i18n                // 国际化中英文
│     │  ├──en-US.json			
│     │  └──zh-CN.json			
│     ├──pages
│     │  └──index
│     │     ├──index.css     // 首页样式文件	
│     │     ├──index.hml     // 首页布局文件
│     │     └──index.js      // 首页业务处理文件
│     └──app.js              // 程序入口
└──entry/src/main/resources  // 应用资源目录

构建主界面

本章节将介绍应用主页面的实现,页面从上至下分为两个部分:

  1. 使用switch组件实现切换按钮,用于控制chart组件数据的动静态显示。
  2. 使用chart组件依次实现线形图、占比图、柱状图。

本应用使用div组件用作外层容器,嵌套text、chart、switch等基础组件,共同呈现图文显示的效果。

<!-- index.hml -->
<div class="container"><!-- 自定义标题组件 --><div class="switch-block"><text class="title">Switch_Chart</text><text class="switch-info">{{ $t('strings.switchInfo') }}</text><!-- switch按钮组件 --><switch onchange="change"></switch></div>
</div>

在线形图中,lineOps用于设置线形图参数,包括曲线的样式、端点样式等。lineData 为线形图的数据。

<!-- index.hml -->
<div class="container">....<!-- 线形图组件 --><div class="chart-block"><stack class="stack-center"><image class="background-image" src="common/images/bg_png_line.png"></image><!-- 线形图 --><chart class="chart-data" type="line" ref="linechart" options="{{ lineOps }}" datasets="{{ lineData }}"></chart></stack><!-- 线形图标题 --><text class="text-vertical">{{ $t('strings.lineTitle') }}</text></div>
</div>

相对于线形图,占比图添加了自定义图例。其中rainBowData为占比图的数据。

<!-- index.hml -->
<div class="container">....<!-- 占比图组件 --><div class="gauge-block"><div class='flex-row-center full-size'><stack class="flex-row-center rainbow-size"><!-- 占比图组件 --><chart class="data-gauge" type="rainbow" segments="{{ rainBowData }}" effects="true"animationduration="2000"></chart>...</stack><div class='flex-column'><!-- 自定义图例 -->    <div class="chart-legend-item"><div class="chart-legend-icon rainbow-color-photo"></div><text class="chart-legend-text">{{ this.$t('strings.legendPhoto') }} 64GB</text></div>....</div></div><!-- 占比图标题 --><text class="text-vertical">{{ $t('strings.rainBowTitle') }}</text></div>
</div>

在柱状图中,barOps用于设置柱状图参数,barData为柱状图数据。

<!-- index.hml -->
<div class="container"><div class="bar-block"><div class="flex-column full-size"><!-- 自定义图例 -->...<stack class="full-size bar-height"><image class="background-image" src="common/images/bg_png_bar.png"></image><!-- 柱状图 --><chart class="data-bar" type="bar" id="bar-chart1" options="{{ barOps }}" datasets="{{ barData }}">  </chart></stack></div><!-- 柱状图标题 --><text class="text-vertical">{{ $t('strings.barTitle') }}</text></div>
</div>

动态显示数据

在上一章节讲解了switch组件实现切换按钮,接下来实现switch按钮的点击事件。在回调方法中设置chart组件静态或动态显示,静态时chart组件显示静态数据,动态时利用interval定时器动态生成并显示随机数据。

// index.js
export default {.../*** switch按钮点击事件的回调方法*/change(event) {if (event.checked) {// 线形图、柱状图数据定时器this.interval = setInterval(() => {// 更新线形图数据this.changeLine();// 更新柱状图数据this.changeBar();}, 1000);// 占比图数据定时器this.rainbowInterval = setInterval(() => {// 更新占比图数据this.changeGauge();}, 3000);} else {clearInterval(this.interval);clearInterval(this.rainbowInterval);}}
}

实现changeLine方法更新线形图数据。遍历所有数据,重新生成随机数并设置每个点的数据、形状、大小和颜色,最后为lineData重新赋值。

// index.js
export default {.../*** 更新线形图数据*/changeLine() {const dataArray = [];for (let i = 0; i < this.dataLength; i++) {const nowValue = Math.floor(Math.random() * CommonConstants.LINE_RANDOM_MAX + 1);const obj = {// y轴的值'value': nowValue,'pointStyle': {// 点的形状'shape': 'circle','size': CommonConstants.LINE_POINT_SIZE,'fillColor': '#FFFFFF','strokeColor': '#0A59F7'}};dataArray.push(obj);}this.lineData = [{// 曲线颜色strokeColor: '#0A59F7',// 渐变填充颜色fillColor: '#0A59F7', data: dataArray,gradient: true}];}
}

实现changeGauge方法更新占比图数据,每三秒增长5%的数据。

// index.js
export default {.../*** 更新占比图数据*/changeGauge() {const sysData = this.rainBowData[this.rainBowData.length - 2];sysData.value += addPercent;this.percent += addPercent;// 小数相加,保留一位小数this.used = (this.used * coefficients + addSize * coefficients) / coefficients;this.systemDataSize = (this.systemDataSize * coefficients + addSize * coefficients) / coefficients;// 数据总和到达100%后恢复初始数据if (sysData.value + CommonConstants.RAINBOW_OTHER_PERCENT > CommonConstants.RAINBOW_ALL_PERCENT) {sysData.value = CommonConstants.RAINBOW_SYSTEM_PERCENT;this.percent = CommonConstants.RAINBOW_USED_PERCENT;this.used = CommonConstants.RAINBOW_USED_SIZE;this.systemDataSize = CommonConstants.RAINBOW_SYSTEM_SIZE;}this.rainBowData = this.rainBowData.splice(0, this.rainBowData.length);},
}

实现changeBar方法更新柱状图数据。遍历柱状图所有的数据组,获取每组的数据后,再次遍历每组数据,生成随机数并为barData重新赋值。

// index.js
export default {.../*** 更新柱状图数据*/changeBar() {for (let i = 0; i < this.barGroup; i++) {const dataArray = this.barData[i].data;for (let j = 0; j < this.dataLength; j++) {dataArray[j] = Math.floor(Math.random() * CommonConstants.BAR_RANDOM_MAX + 1);}}this.barData = this.barData.splice(0, this.barGroup + 1);}
}

总结

您已经完成了本次Codelab的学习,并了解到以下知识点:

  1. switch、chart等组件的使用。

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等…视频教程

鸿蒙生态应用开发白皮书V2.0PDF:

获取完整版白皮书方式请点击→《鸿蒙生态应用开发白皮书V2.0PDF

在这里插入图片描述

鸿蒙 (Harmony OS)开发学习手册

一、入门必看

  1. 应用开发导读(ArkTS)
  2. .……

在这里插入图片描述


二、HarmonyOS 概念

  1. 系统定义
  2. 技术架构
  3. 技术特性
  4. 系统安全

在这里插入图片描述

三、如何快速入门?《鸿蒙基础入门学习指南》

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. .……

在这里插入图片描述


四、开发基础知识

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. .……

在这里插入图片描述


五、基于ArkTS 开发

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 7.网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. .……

在这里插入图片描述


更多了解更多鸿蒙开发的相关知识可以参考:《鸿蒙 (Harmony OS)开发学习手册

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

3. WiFi基本原理

1. WiFi简介 WiFi的全称是Wireless Fidelity。它是一种无线网络通信技术&#xff0c;由Wi-Fi联盟拥有&#xff0c;目的是改善基于IEEE 802.11标准的无线网络产品之间的互通性&#xff0c;允许电子设备在没有物理连接的情况下进行高速数据传输。此外&#xff0c;WiFi也被视为IE…

vue中v-model与:model以及v-bind区别

一、v-model &#xff08;常用于表单&#xff09; v-model 是 v-model:value 的缩写&#xff0c;通常用于表单上的双向数据绑定&#xff08;表单接受值 value&#xff0c;故v-model默认收集的就是 value &#xff0c;所以缩写直接省略 value&#xff09;&#xff0c;可以实现子…

Holiday Notice

Holiday Notice 放假通知 要是每个公司都能放假放的多&#xff0c;把加班折算放假落实到位&#xff0c;还怕我们不努力干活&#xff0c;巴不得把全年都干完了&#xff0c;然后休息。

STP保护机制

Switch#show spanning-tree summary totals---查看生成树汇总信息 1.BPDU guard BPDU防护&#xff0c;避免开启了portfast特性的端口错误的接入进交换机。如果发现&#xff0c;则逻辑的将接口关闭掉。 思科&#xff1a; Switch(config)#spanning-tree portfast edge bpdugu…

python爬取B站视频

参考&#xff1a;https://cloud.tencent.com/developer/article/1768680 参考的代码有点问题&#xff0c;请求头需要修改&#xff0c;上代码&#xff1a; import requests import re # 正则表达式 import pprint import json from moviepy.editor import AudioFileClip, Vid…

区间预测 | Matlab实现带有置信区间的GRNN广义回归神经网络时间序列未来趋势预测

文章目录 效果一览文章概述源码设计参考资料效果一览 文章概述 Matlab实现带有置信区间的GRNN广义回归神经网络时间序列未来趋势预测 带有置信区间的GRNN(广义回归神经网络)时间序列未来趋势预测结合了广义回归神经网络(GRNN)的预测能力和置信区间的统计度量,以提供对未来…

day14-二叉树part01(递归法/迭代法)

递归三部曲(时刻牢记) 1.确认递归函数需要的参数与返回值 一般为传入一个根节点 传入一个数组用来存放结果数组 2.确定终止条件 3.确定单层递归逻辑 递归的实现就是&#xff1a;每一次递归调用都会把函数的局部变量、参数值和返回地址等压入调用栈中&#xff0c;然后递归返回的…

云备份项目认识、环境搭建以及所使用的库的介绍

一、云备份认识 将本地计算机一个受监管的文件夹的文件上传到服务器中&#xff0c;有服务器组织&#xff0c;客户端可以通过网页将文件查看并且下载下来&#xff0c;下载过程支持断点续传功能&#xff0c;并且服务器会对上传的文件进行热点管理&#xff0c;长时间没人访问的文…

内网穿透时报错【Bad Request This combination of host and port requires TLS.】的原因

目录 前言&#xff1a;介绍一下内网穿透 1.内网直接https访问&#xff08;可以正常访问&#xff09; 程序配置的证书 2.内网穿透后,通过外网访问 3.原因 4.内网非https的Web应用&#xff0c;使用https后&#xff0c;也变成了https访问 5.题外话 感觉自己的web应用配置了…

使用 Seq2Seq 模型进行文本摘要

目录 引言 1 导入数据集 2 清洗数据集 3 确定允许的最大序列长度 4 选择合理的文本和摘要 5 对文本进行标记 6 删除空文本和摘要 7 构建模型 7.1 编码器 7.2 解码器 8 训练模型 9 测试模型 10 注意 11 整体代码 引言 文本摘要是指在捕捉其本质的同时缩短长文本的…

PHP性能提升方案

一、背景与介绍 PHP语言开发效率高&#xff0c;特别应用于适合中小型项目&#xff0c;对于创业初期敏捷开发验证项目可行性或者Demo演示绝对占据优势。 但是随着现在Web应用的复杂性&#xff0c;针对项目要适应高并发、高流量的访问特性&#xff0c;PHP确实在性能方面相对Go、J…

LeetCode-2202 K次操作后最大的顶端元素(JAVA)

题目要求&#xff1a; 给你一个下标从 0 开始的整数数组 nums &#xff0c;它表示一个 栈 &#xff0c;其中 nums[0] 是栈顶的元素。 每一次操作中&#xff0c;你可以执行以下操作 之一 &#xff1a; 如果栈非空&#xff0c;那么 删除 栈顶端的元素。如果存在 1 个或者多个被…

分布式之分布式事务详解

分布式事务与实战运用 什么是分布式事务&#xff1f; 业务场景&#xff1a;用户A转账100元给用户B&#xff0c;这个业务比较简单&#xff0c;具体的步骤&#xff1a; 1、用户A的账户先扣除100元 2、再把用户B的账户加100元 如果在同一个数据库中进行&#xff0c;事务可以保证…

209基于matlab的无人机路径规划

基于matlab的无人机路径规划&#xff0c;包括2D路径和3D路径&#xff0c;三种优化算法&#xff0c;分别是蝙蝠算法&#xff08;BA&#xff09;、蝙蝠算法融合差分进化算法(DEBA)、结合人工势场方法的改进混沌蝙蝠算法(CPFIBA)。输出距离迭代曲线和规划的路径。程序已调通&#…

云计算探索-如何在服务器上配置RAID(附模拟器)

一&#xff0c;引言 RAID&#xff08;Redundant Array of Independent Disks&#xff09;是一种将多个物理硬盘组合成一个逻辑单元的技术&#xff0c;旨在提升数据存取速度、增大存储容量以及提高数据可靠性。在服务器环境中配置RAID尤其重要&#xff0c;它不仅能够应对高并发访…

【跟小嘉学 Linux 系统架构与开发】二、Linux发型版介绍与基础常用命令介绍

系列文章目录 【跟小嘉学 Linux 系统架构与开发】一、学习环境的准备与Linux系统介绍 【跟小嘉学 Linux 系统架构与开发】二、Linux发型版介绍与基础常用命令介绍 文章目录 系列文章目录[TOC](文章目录) 前言一、 Linux 发行版(Linux distribution)介绍二、Centos 虚拟机初始化…

Yarn的安装和使用(2):使用及问题解决

Yarn是JavaScript的依赖管理工具&#xff0c;它与npm类似&#xff0c;但提供了一些额外的性能优化和一致性保证。 Yarn的使用&#xff1a; 初始化项目&#xff1a; yarn init 此命令会引导您创建一个新的package.json文件&#xff0c;用于记录项目的元信息和依赖。 添加依赖&…

java 接口

接口 既然接口中的所有方法都需要重写&#xff0c;那么我不干脆直接写一个类&#xff0c;不写接口就完事了呢 接口定义的是一种特征&#xff0c;告诉使用者和程序&#xff0c;这个实现了这个类型的接口拥有哪些功能 如果一个类实现了runnable&#xff0c;那么这个类就可以用来定…

【Linux在程序运行时打印调用栈信息(函数名,文件行号等)】

在程序运行时打印相关调用栈信息&#xff08;函数名&#xff0c;文件行号等&#xff09;,便于梳理调用逻辑等 //stack.c #include <stdio.h> #include <execinfo.h> #include <stdlib.h> #include <string.h> #include <stdbool.h>#define MAX_…

Flutter与iOS和Android原生页面交互

一、Flutter 与原生页面交互的重要性和应用场景 Flutter 是一个由 Google 开发的开源框架&#xff0c;用于创建跨平台的移动、Web 和桌面应用程序。Flutter 允许开发者使用一套代码库为 Android 和 iOS 等平台构建美观、高性能的应用程序。然而&#xff0c;尽管 Flutter 提供了…