📢 重磅福利！参与活动赢好礼，马克杯、鼠标垫、贴纸，8月1日-12月31日等你来！

点击链接： 华为开发者学堂

场景介绍

周期数据图表绘制是运动健康类应用中的典型场景之一，如向用户展示某一周期（年、月、周、日）心率、血压、血糖、体重、体温、热量消耗（卡路里）等数据的变化趋势。

本示例使用@ohos/mpchart实现绘制折线图（走势图）、切换查看周期等功能，同时也适用于温度、湿度等数据可视化。

效果预览

实现思路

1. 使用resourceManager读取模拟数据文件。
2. 根据当前周期时间，处理需要展示的数据。
3. 将需要展示的数据传入LineChartComponent组件，来绘制折线图。
4. 使用@Watch监听当前日期与展示周期，如有变化，则调用对应函数更新数据。
   1. // 1. 读取模拟数据
   2. this.statistics = FileReaderUtils.readChartDataFromRawfile(getContext(this).resourceManager);
   4. // 2. 处理需要展示的数据，并存入chartData和periodData
   5. this.updateStats();
   7. // 3. 数据传入封装好的折线图组件
   8. LineChartComponent({
   9. data: this.chartData,
   10. period: this.periodData,
   11. label: $r('app.string.heart_rate')
   12. });
   14. // 4. 通过@Watch来监听周期变化并更新数据
   15. @State @Watch('updateTimePeriod') periodSelectedIndexes: number[];
   16. @State @Watch('updateStats') timePeriod: IndicatorTimePeriod;

约束与限制

• 本示例支持API Version 17 Release及以上版本。
• 本示例支持HarmonyOS 5.0.5 Release SDK及以上版本。
• 本示例需要使用DevEco Studio 5.0.5 Release及以上版本进行编译运行。

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──common
3. │ │ └──CommonConstants.ets // 通用常量类
4. │ ├──components
5. │ │ ├──DateToolBar.ets // 日期切换组件
6. │ │ ├──HeaderBar.ets // 头部工具栏组件
7. │ │ ├──LineChartComponent.ets // 折线图表组件
8. │ │ └──PeriodSelection.ets // 周期切换组件
9. │ ├──entryability
10. │ │ └──EntryAbility.ets
11. │ ├──model
12. │ │ ├──ChartDataFormat.ets // 图表数据格式类
13. │ │ ├──LabelValueFormat.ets // 标签数据格式类
14. │ │ └──XAxisValueFormat.ets // 横轴数据格式类
15. │ ├──pages
16. │ │ └──ChartPage.ets // 图表展示页
17. │ └──utils
18. │ ├──DateUtils.ets // 日期工具类
19. │ ├──FileReaderUtils.ets // 文件读取工具类
20. │ └──StatisticsUtils.ets // 统计数据工具类
21. └──entry/src/main/resources // 应用资源目录

参考文档

@ohos/mpchart

@ohos.resourceManager（资源管理）

@Watch装饰器：状态变量更改通知

代码下载

周期数据图表绘制示例代码