【鸿蒙实战开发】HarmonyOS实现静态与动态数据可视化图表

一. 样例介绍

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

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

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

相关概念

● ​switch组件：开关选择器，通过开关，开启或关闭某个功能。

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

二.环境搭建

我们首先需要完成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组件依次实现线形图、占比图、柱状图。