想系统学习HarmonyOS开发？

加入班级，这里有成体系的学习资源，一站式成长通道已为你打开！

场景介绍

阅读时长看板是新闻阅读类应用中的典型场景之一，如用户需要查看不同周期内的阅读时长。

本示例基于CanvasRenderingContext2D绘制阅读时长统计直方图，通过@Watch装饰器刷新图表实现周、月、年等视图切换。

效果预览

实现思路

1. 通过按钮（周、月、年、总）切换不同时间维度的视图，在周、月、年视图内点击左右翻页键可选择具体时间。
   1. // ReadingStatsPage.ets
   2. Row() {
   3. if (this.currentView !== this.viewMap.get('all')) {
   4. Image($r('app.media.ic_left_one'))
   5. .onClick(() => {
   6. if (this.currentView === this.viewMap.get('week')) {
   7. this.weekOffset--;
   8. this.curWeekData = getReadingDataStatic(this.getCurrentWeekData())
   9. } else if (this.currentView === this.viewMap.get('month')) {...
   10. } else if (this.currentView === this.viewMap.get('year')) {...
   11. } else {...
   12. }
   13. })
   14. } else {...
   15. }
   16. }
   17. Column() { // 统计卡片，根据当前视图显示不同的图表
   18. Column() {
   19. if (this.currentView === this.viewMap.get('week') || this.currentView === this.viewMap.get('day')) {
   20. BarChart({label: 'week', xAxisData: weekAxis, curData: this.curWeekData});
   21. } else if (this.currentView === this.viewMap.get('month')) {...
   22. } else if (this.currentView === this.viewMap.get('year')) {...
   23. } else if (this.currentView === this.viewMap.get('all')) {...
   24. }
   25. }
   26. }
2. 点击左右翻页键后，通过@Watch装饰器通知数据变更，更新阅读数据，重新生成直方图。
   1. // Chart.ets
   2. @Prop @Watch('onDataChange') curData: ReadingDataStatic = new ReadingDataStatic() // 当前的阅读数据
   4. onDataChange() {
   5. this.curDataHour = this.curData.dailyMinutes.map(item => Math.floor(item / this.threshold));
   6. this.defOption = this.createOption()
   7. }
3. 通过CanvasRenderingContext2D绘制直方图，绘制过程中根据需要计算边距、单元间隔，并按比例换算直方的y轴数值，依次绘制分隔线、坐标轴、直方图。
   1. // HistogramChart.ets
   2. aboutToAppear() {
   3. this.applyOptions()
   4. }
   5. onDataChange() { // 使用更新后的配置绘制图形
   6. this.applyOptions()
   7. this.drawChart();
   8. }
   9. private drawChart() { // 绘制图表
   10. CTX.clearRect(0, 0, width, height) // 清空画布
   11. const CHART_AREA: chartArea = {...}; // 计算实际绘图区域（考虑所有边距），先绘制网格线，绘制完网格线后调整比例尺
   12. if (this.config.gridLineStyle.show) { // 绘制网格线
   13. yScale = this.drawGridLines(CTX, chartArea.x, chartArea.y, chartArea.width, chartArea.height, maxDataValue, yScale);
   14. }
   15. this.drawYAxis(CTX, chartArea.x, chartArea.y, chartArea.width, chartArea.height, maxDataValue, yScale); // 绘制Y轴
   16. this.drawXAxis(CTX, chartArea.x, chartArea.y, chartArea.width, chartArea.height); // 绘制X轴
   17. this.drawBars(CTX, chartArea.x, chartArea.y, chartArea.width, chartArea.height, yScale); // 绘制柱状图
   18. }

约束与限制

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

工程目录

1. ├──entry/src/main/ets // 代码区
2. │ ├──component
3. │ │ ├──Chart.ets // 阅读数据、直方图绘制
4. │ │ └──HistogramChart.ets // 直方图组件
5. │ ├──entryability
6. │ │ └──EntryAbility.ets // 程序入口
7. │ ├──entrybackupability
8. │ │ └──EntryBackupAbility.ets
9. │ ├──model
10. │ │ ├──DailyReadingData.ets // 阅读相关接口、类定义
11. │ │ ├──MockData.ets // 阅读数据打桩
12. │ │ └──PersonalReadingStats.ets // 商品实例定义
13. │ └──pages
14. │ └──ReadingStatsPage.ets // 主页面-阅读数据看板
15. └──entry/src/main/resources // 应用资源目录

参考文档

CanvasRenderingContext2D

Drawing自绘制性能提升

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

代码下载

阅读时长看板示例代码

（文章转载至华为开发者联盟官网）