一. 样例介绍

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

1.  实现静态数据可视化图表。

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

相关概念

● switch组件:开关选择器,通过开关,开启或关闭某个功能。

● chart组件:图表组件,用于呈现线形图、占比图、柱状图界面。

完整示例

gitee源码地址

二.环境搭建

我们首先需要完成HarmonyOS开发环境搭建,可参照如下步骤进行。

软件要求

● DevEco Studio版本:DevEco Studio 3.1 Release及以上版本。

● HarmonyOS SDK版本:API version 9及以上版本。

硬件要求

● 设备类型:华为手机或运行在DevEco Studio上的华为手机设备模拟器。

● HarmonyOS系统:3.1.0 Developer Release及以上版本。

环境搭建

1.  安装DevEco Studio,详情请参考下载和安装软件

2.  设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。

a.  如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境

3.  开发者可以参考以下链接,完成设备调试的相关配置:

● 使用真机进行调试

●  使用模拟器进行调试

三.代码结构解读

本篇Codelab只对核心代码进行讲解,对于完整代码,我们会在源码下载或gitee中提供。

├──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 {
...
// 更新线形图数据
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
}
];
}
}

  

实现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实现静态与动态数据可视化图表的更多相关文章

  1. ECharts-基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表

    ECharts http://ecomfe.github.com/echarts 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算 ...

  2. Webstorm+Webpack+echarts构建个性化定制的数据可视化图表&&两个echarts详细教程(柱状图,南丁格尔图)

    Webstorm+Webpack+echarts   ECharts 特性介绍 ECharts,一个纯 Javascript 的图表库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(I ...

  3. Python调用matplotlib实现交互式数据可视化图表案例

    交互式的数据可视化图表是 New IT 新技术的一个应用方向,在过去,用户要在网页上查看数据,基本的实现方式就是在页面上显示一个表格出来,的而且确,用表格的方式来展示数据,显示的数据量会比较大,但是, ...

  4. 数据可视化图表ECharts

    介绍: ECharts是一个基于ZRender(轻量级Canvas类库)的纯javascript图表库,提供可交互.个性化的数据可视化图表. ECharts提供了折线图.柱状图.散点图.饼图.K线图, ...

  5. Excel数据可视化图表设计需要注意的几个问题

    ​大数据发展迅速的时代,数据分析驱动商业决策.对于庞大.无序.复杂的数据要是没经过合适的处理,价值就无法体现. 可以想象一本没有图片的教科书.没有图表.图形或是带有箭头和标签的插图或流程图,那么这门学 ...

  6. 百度数据可视化图表套件echart实战

    最近我一直在做数据可视化的前端工作,我用的最多的绘图工具是d3.d3有点像photoshop,功能很强大,例子也很多,但是学习成本也不低,做项目是需要较大人力投入的.3月底由在亚马逊工作的同学介绍下使 ...

  7. 数据分析 | 数据可视化图表,BI工具构建逻辑

    本文源码:GitHub·点这里 || GitEE·点这里 一.数据可视化 1.基础概念 数据可视化,是关于数据视觉表现形式的科学技术研究.其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽取出 ...

  8. Flsk&pyecharts 动态数据可视化

    1:数据源 Hollywood Movie Dataset: 好莱坞2006-2011数据集  实验目的: 实现 统计2006-2011的数据综合统计情况,进行数据可视化 gitee地址: https ...

  9. 📈📈📈📈📈iOS 图表框架 AAChartKit ---强大的高颜值数据可视化图表框架,支持柱状图、条形图、折线图、曲线图、折线填充图、曲线填充图、气泡图、扇形图、环形图、散点图、雷达图、混合图

    English Document

  10. PPT绝对不能没有它!精美酷炫的可视化图表来啦!

    从我们上学到工作,PPT我们见得多了,也做得多了.上学的时候最怕老师布置的作业是以PPT形式上交,工作中项目汇报.工作总结.年终汇报等,哪哪都需要用到PPT.PPT中文字太多,被批判不够简炼:图片太多 ...

随机推荐

  1. 【Azure Redis 缓存】当使用Azure Redis 集群服务时候,发生了Moved的几点分析

    问题描述 当使用Azure Redis 集群服务时候,发生了Moved的几点分析 问题分析 1.   关于 Moved 问题,原因有可能是内存碎片整理,从而引起Redis发生failover. 2.  ...

  2. 基于 Nebula Graph 构建图学习能力

    本文首发于 Nebula Graph Community 公众号 经常看技术文章的小伙伴可能会留意到除了正在阅读的那篇文章,在文章页面的正文下方或者右侧区域会有若干同主题.同作者的文章等你阅读:经常逛 ...

  3. [Linux ] 编译 ffmpeg 使用 AV1 编码 svt_av1 编码器

    编译带 AV1 编码器的 ffmpeg 安装 aom git clone --depth 1 https://aomedia.googlesource.com/aom mk build cmake - ...

  4. C++入门编程----C++运算符(8)

    什么是运算符 运算符是让程序执行特定的数学或逻辑操作的符号,用来表示针对数据的特定操作,也称之为操作符.C++运算符分别有算术运算符.关系运算符.逻辑运算符.赋值运算符.位运算符.移位运算符.size ...

  5. 尚硅谷Java 宋红康2023版 - 学习笔记

    尚硅谷Java 宋红康2023版 - 学习笔记 观看地址 https://www.bilibili.com/video/BV1PY411e7J6 60-IDEA开发工具-HelloWorld的编写与相 ...

  6. gitee的 私人令牌 就是 Gitee Open API 的 access_token

    gitee的 私人令牌 就是 Gitee Open API 的 access_token

  7. pcm5102芯片解析之基本概念

    一 前记 1 在音频领域深耕,那就要不断的前行.最近有几个项目需要用到pcm5102这颗料,藉此机会,针对这个料进行深入的研究一下.做一一些简要的分析. 二 概念 音频芯片的指标,其实,很多年都没啥变 ...

  8. Serverless学习笔记

    Serverless 闲言碎语 前段时间看了一些Serverless的文章,恰好最近又听了一门Serverless的应用实践课程,就把笔记拿出来和大家分享一下,如表述有误还请各位斧正 大家关心的问题 ...

  9. leetcode 春季比赛3题 二叉搜索树染色

    其实和二叉搜索树一点关系都没有. 每个点的颜色只取决于最后一次包含该点的操作.用 set 维护所有颜色待确定的点,倒序处理询问,每次利用 lower_bound 方法从 set 中取出所有在询问范围内 ...

  10. (1)Python基础的一些教学资料和视频

    Python相关的一些书籍 链接: https://pan.baidu.com/s/1uVT_xQRShxsw2gRhjJhikA 密码: 5fgi Python的相关进阶课程 链接: https:/ ...