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. 系统安全
  5. …

在这里插入图片描述

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

  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)开发学习手册》

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

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

相关文章

浅谈WPF之路由事件

浅谈WPF之路由事件

为了降低由事件订阅带来的耦合度&#xff0c;和代码量&#xff0c;WPF推出了路由事件机制。路由事件与直接事件的区别在于&#xff0c;直接事件激发时&#xff0c;发送者直接将消息通过事件订阅者交给事件响应者&#xff0c;事件响应者对事件的发生做出响应。路由事件的订阅者和…
阅读更多...
pnpm比npm、yarn好在哪里？

pnpm比npm、yarn好在哪里？

前言 pnpm对比npm/yarn的优点&#xff1a; 更快速的依赖下载更高效的利用磁盘空间更优秀的依赖管理 我们按照包管理工具的发展历史&#xff0c;从 npm2 开始讲起&#xff1a; npm2 使用早期的npm1/2安装依赖&#xff0c;node_modules文件会以递归的形式呈现&#xff0c;严格…
阅读更多...
简单了解波 Mono-repo Multi-repo（Poly-repo）

简单了解波 Mono-repo Multi-repo（Poly-repo）

Mono-repo 和 Multi-repo 是软件开发中代码管理的两个不同策略。Mono-repo & Multi-repo 孰优孰劣是个老生常谈得话题了&#xff0c;这里就不 PK 了&#xff0c;“略微”看下两者区别。 当我们使用 Git 作为版本控制系统管理项目的代码时&#xff0c;那么 monorepo 与 mul…
阅读更多...
模拟游戏《幸福工厂》好玩吗？《幸福工厂》怎么在mac电脑上打开？

模拟游戏《幸福工厂》好玩吗？《幸福工厂》怎么在mac电脑上打开？

关于《幸福工厂》这款游戏是否好玩&#xff0c;普遍的玩家反馈和评价表明&#xff0c;《幸福工厂》&#xff08;Satisfactory&#xff09;因其深度的工厂建造模拟、自由度极高的探索以及精美的图形表现而受到许多玩家的喜爱。它允许玩家在一个开放的世界中规划并建立复杂的生产…
阅读更多...
02-JDK新特性-Lambda表达式

02-JDK新特性-Lambda表达式

JDK新特性 Lambda表达式 什么是Lambda表达式 Lambda表达式是一个匿名代码块&#xff0c;用于简单的传递一段代码片段。 Lambda表达式标准格式 格式&#xff1a;(形式参数) -> {代码块} 形式参数 如果有多个参数&#xff0c;参数只见用逗号隔开&#xff1b;如果没有&…
阅读更多...
leetcode90. 子集 II

leetcode90. 子集 II

去重逻辑&#xff1a; 关键是画出递归树&#xff01;当我们即将进入第二个2的递归的时候&#xff0c;发现isVisit数组是100&#xff0c;也就是说这俩重复的数是False&#xff0c;并且这俩在nums值相同&#xff0c;所以写出去重逻辑&#xff01; class Solution { public:vector…
阅读更多...
Mock.js的基本使用

Mock.js的基本使用

mock顾名思义&#xff0c;就是模拟的意思&#xff0c;它模拟什么呢&#xff1f;假设我们在开发的过程中&#xff0c;我们需要使用到接口&#xff0c;但是后端接口并没有完善&#xff0c;那么我们就可以使用到mock.js&#xff0c;它可以随机生成数据&#xff0c;拦截AJAX请求&am…
阅读更多...
mysql执行脚本导入表和数据后中文注释乱码解决

mysql执行脚本导入表和数据后中文注释乱码解决

本人在使用不同版本下进行操作时&#xff0c;就会出现中文乱码的问题。例如我本地安装mysql8&#xff0c;服务器安装的是mysql5&#xff0c;然后本地连接服务器的mysql后&#xff0c;执行SQL脚本之后发现中文全部乱码 使用工具查看&#xff0c;注释也都是乱码 解决方案 本地…
阅读更多...
vue 视频添加水印

vue 视频添加水印

1.需求背景 其实腾讯云点播的api也支持视频水印&#xff0c;但是只有单个水印&#xff0c;大概效果是这样子的&#xff0c;不满足我们的需求&#xff0c;我们的需求是需要视频中都是水印。 腾讯云点播水印 项目需求的水印&#xff08;主要是防录屏,最后的实现效果是这样&…
阅读更多...
AcWing 4405. 统计子矩阵：做题笔记

AcWing 4405. 统计子矩阵：做题笔记

目录 暴力思路 代码 前缀和双指针 代码 解释 推荐博客 这道题的主要思路就是枚举所有的子矩阵&#xff0c;判断符合条件的子矩阵的个数。 暴力思路 我服了&#xff0c;其实我最开始没有想到 &#xff1a;枚举所有的子矩阵 这样一个很有总结性的要点。 我是想着哦我先…
阅读更多...
重读Java设计模式: 深入探讨建造者模式，构建复杂对象的优雅解决方案

重读Java设计模式: 深入探讨建造者模式，构建复杂对象的优雅解决方案

引言 在软件开发中&#xff0c;有时需要构建具有复杂结构的对象&#xff0c;如果直接使用构造函数或者 setter 方法逐个设置对象的属性&#xff0c;会导致代码变得冗长、难以维护&#xff0c;并且容易出错。为了解决这个问题&#xff0c;我们可以使用建造者模式。 一、建造者…
阅读更多...
Jamba LLM模型：破解大型上下文窗口挑战的AI新星

Jamba LLM模型：破解大型上下文窗口挑战的AI新星

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…
阅读更多...
使用Postman进行websocket接口测试

使用Postman进行websocket接口测试

因为最近要搞关于基于AI的文本接口测试.需要用到websocket协议,于是看了一下发现postman也可以测而且很方便 位置 File->New->WebSocket 可以看到不止WebSocket还支持其他的各种协议 使用 首先先点击connect进行连接 连接成功之后可以选择多种文本格式添加请求参数 每…
阅读更多...
打开DICOM文件需要注意到的点

打开DICOM文件需要注意到的点

DICOM图片用来存储医学信息 我一般处理的是图像信息&#xff0c;总结一下踩过的坑 打开DICOM文件需要注意到的点 DICOM图片使用python进行打开一定要注意窗口问题&#xff0c;dicom文件里面存储了很多其他的附加信息&#xff0c;不仅仅是图片&#xff0c;其中最重要的一个条就…
阅读更多...
力扣刷题Days29-128.最长连续数列(js)

力扣刷题Days29-128.最长连续数列(js)

目录 1&#xff0c;题目 2&#xff0c;代码 2.1自己实现 2.2哈希表 3&#xff0c;学习与收获 枚举思想&#xff1a; 遍历的核心逻辑 碎碎念 本题 先是想到利用数组排序&#xff0c;从而简化遍历处理逻辑&#xff0c;再在提交错误提醒的情况下&#xff0c;考虑到数组中存…
阅读更多...
Tab切换(Html+JavaScript+Css)

Tab切换(Html+JavaScript+Css)

1.CSS样式 <style>* {margin: 0;padding: 0;}.tab {width: 590px;height: 340px;margin: 20px;border: 1px solid #e4e4e4;margin-left: 300px;}.tab-nav {width: 100%;height: 60px;line-height: 60px;display: flex;justify-content: space-between;}.tab-nav h3 {font…
阅读更多...
Zeppelin安装

Zeppelin安装

Zeppelin是一个基于Web的开源数据分析可视化工具&#xff0c;它提供了一个交互式的笔记本界面&#xff0c;用于在大数据环境中进行数据探索、数据分析、数据可视化和协作。Zeppelin的主要特点包括多语言支持、可视化功能、数据共享和协作&#xff0c;以及扩展性。它支持多种编程…
阅读更多...
C++ 数组 结构编程题

C++ 数组 结构编程题

一 求100以内的所有素数 /* * 需要标记2~100 之间的数是否处理 * 用数组&#xff0c;初始为0 表示都是素数&#xff0c;如果 判断为合数则置为1过用 */ #include<stdio.h> #include<math.h> int main() {const int n 100;int isPrim[n 1] { 0 };int i, j;for (…
阅读更多...
C++ MFC

C++ MFC

C是一种静态数据类型检查的、支持多重编程范式的程序设计语言&#xff0c;支持过程化程序设计、数据抽象、面向对象程序设计、制作图标等泛型程序设计的多种程序设计风格。 MFC(Microsoft Foundation Classes)&#xff0c;是一个微软公司提供的类库&#xff0c;以C类的形式封装…
阅读更多...
JAVAEE之CSS

JAVAEE之CSS

1.CSS 是什么&#xff1f; 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离. 1.1 CSS和HTML的区别 CSS&#xff0c;全称为层叠样式表(Cascading Style Sheets)&#xff0c;是…
阅读更多...
最新文章

Copyright @ 2022~2023