一、引言

二、技术背景

• 鸿蒙框架：采用Stage模型，通过@Entry、@Component构建UI，Ability管理生命周期。
• 图表绘制：使用鸿蒙官方hi3861_chart（或第三方MPAndroidChart鸿蒙适配版）实现折线图/柱状图。
• 数据存储：轻量数据用Preferences，结构化历史数据用关系型数据库（RelationalStore）。
• 数据处理：基于ArkTS的数组操作与日期API（@ohos.util.Date）实现周/月聚合。

三、应用场景

1. 个人日常监测：用户查看每日步数、睡眠质量的周/月趋势。
2. 家庭健康管理：家长汇总孩子运动数据，生成月度成长报告。
3. 医疗辅助：医生调取患者周血压波动图表，辅助诊断。

四、核心特性

• 多周期汇总：支持按周（自然周）、月（自然月）自动聚合数据。
• 动态图表渲染：折线图展示趋势，柱状图对比单日数值。
• 数据持久化：本地存储历史记录，离线可查。
• 低功耗设计：按需加载数据，减少资源占用。

五、原理流程图与原理解释

流程图

graph TD
    A[数据采集] --> B[本地存储]
    B --> C{用户选择周期}
    C -->|周| D[筛选近7天数据]
    C -->|月| E[筛选当月数据]
    D/E --> F[计算统计量（均值/最大值）]
    F --> G[生成图表配置]
    G --> H[渲染至UI]

原理解释

1. 数据采集：通过传感器（如加速度计）或手动输入获取步数、睡眠时长等。
2. 存储层：使用Preferences缓存近期数据（如7天），RelationalStore存储全量历史。
3. 聚合逻辑：根据所选周期（周/月），通过日期过滤数据，计算总和、平均值等指标。
4. 图表渲染：将聚合数据转换为图表库支持的格式（如LineChartData），调用Canvas绘制。

六、环境准备

• 开发工具：DevEco Studio 4.0+
• SDK版本：API 9+（支持Stage模型与图表组件）
• 依赖引入：在entry/build-profile.json5中添加图表库依赖：

  "dependencies": {
    "@ohos/chart": "1.0.0" // 假设官方图表库包名
  }

七、代码实现（完整示例）

1. 数据模型定义（Model/HealthData.ts）

// 健康数据类型
export class HealthData {
  date: string; // 格式：YYYY-MM-DD
  steps: number;
  sleepHours: number;

  constructor(date: string, steps: number, sleepHours: number) {
    this.date = date;
    this.steps = steps;
    this.sleepHours = sleepHours;
  }
}

2. 数据存储（Database/HealthDB.ts）

import relationalStore from '@ohos.data.relationalStore';
import { HealthData } from '../Model/HealthData';

const STORE_CONFIG = {
  name: 'health.db',
  securityLevel: relationalStore.SecurityLevel.S1
};

export class HealthDB {
  private rdbStore: relationalStore.RdbStore | null = null;

  async init(context: Context) {
    this.rdbStore = await relationalStore.getRdbStore(context, STORE_CONFIG);
    // 创建表
    const sql = `CREATE TABLE IF NOT EXISTS health_data (
      id INTEGER PRIMARY KEY AUTOINCREMENT,
      date TEXT UNIQUE,
      steps INTEGER,
      sleep_hours REAL
    )`;
    await this.rdbStore.executeSql(sql);
  }

  async insert(data: HealthData): Promise<boolean> {
    if (!this.rdbStore) return false;
    const valueBucket = {
      'date': data.date,
      'steps': data.steps,
      'sleep_hours': data.sleepHours
    };
    try {
      await this.rdbStore.insert('health_data', valueBucket);
      return true;
    } catch (err) {
      console.error(`Insert failed: ${JSON.stringify(err)}`);
      return false;
    }
  }

  async queryByDateRange(start: string, end: string): Promise<HealthData[]> {
    if (!this.rdbStore) return [];
    const predicates = new relationalStore.RdbPredicates('health_data');
    predicates.between('date', start, end);
    const resultSet = await this.rdbStore.query(predicates, ['date', 'steps', 'sleep_hours']);
    const list: HealthData[] = [];
    while (resultSet.goToNextRow()) {
      list.push(new HealthData(
        resultSet.getString(resultSet.getColumnIndex('date')),
        resultSet.getLong(resultSet.getColumnIndex('steps')),
        resultSet.getDouble(resultSet.getColumnIndex('sleep_hours'))
      ));
    }
    resultSet.close();
    return list;
  }
}

3. 业务逻辑（ViewModel/ReportGenerator.ts）

import { HealthData } from '../Model/HealthData';
import { HealthDB } from '../Database/HealthDB';

export class ReportGenerator {
  private db: HealthDB;

  constructor(db: HealthDB) {
    this.db = db;
  }

  // 获取周数据（近7天）
  async getWeeklyData(): Promise<{ dates: string[], steps: number[], sleeps: number[] }> {
    const endDate = new Date();
    const startDate = new Date();
    startDate.setDate(endDate.getDate() - 6); // 包含今天共7天
    const startStr = this.formatDate(startDate);
    const endStr = this.formatDate(endDate);
    const data = await this.db.queryByDateRange(startStr, endStr);
    return this.processData(data);
  }

  // 获取月数据（当月1日至今）
  async getMonthlyData(): Promise<{ dates: string[], steps: number[], sleeps: number[] }> {
    const now = new Date();
    const startStr = `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, '0')}-01`;
    const endStr = this.formatDate(now);
    const data = await this.db.queryByDateRange(startStr, endStr);
    return this.processData(data);
  }

  private formatDate(date: Date): string {
    return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
  }

  private processData(data: HealthData[]): { dates: string[], steps: number[], sleeps: number[] } {
    const dates = data.map(d => d.date.substring(5)); // 截取MM-DD
    const steps = data.map(d => d.steps);
    const sleeps = data.map(d => d.sleepHours);
    return { dates, steps, sleeps };
  }
}

4. UI界面（pages/Index.ets）

import { HealthDB } from '../Database/HealthDB';
import { ReportGenerator } from '../ViewModel/ReportGenerator';
import chart from '@ohos.chart'; // 假设图表库

@Entry
@Component
struct HealthReportPage {
  @State weeklyData: any = { dates: [], steps: [], sleeps: [] };
  @State monthlyData: any = { dates: [], steps: [], sleeps: [] };
  @State selectedTab: number = 0; // 0:周 1:月
  private db: HealthDB = new HealthDB();
  private generator: ReportGenerator = new ReportGenerator(this.db);

  aboutToAppear() {
    this.initDBAndLoadData();
  }

  async initDBAndLoadData() {
    await this.db.init(getContext());
    // 模拟插入测试数据（实际从传感器或用户输入获取）
    await this.insertTestData();
    this.weeklyData = await this.generator.getWeeklyData();
    this.monthlyData = await this.generator.getMonthlyData();
  }

  async insertTestData() {
    const today = new Date();
    for (let i = 6; i >= 0; i--) { // 插入7天数据
      const date = new Date(today);
      date.setDate(today.getDate() - i);
      const dateStr = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
      await this.db.insert(new HealthData(dateStr, 5000 + i * 500, 7 + i * 0.2));
    }
  }

  build() {
    Column({ space: 20 }) {
      Tabs({ barPosition: BarPosition.Start }) {
        TabContent() {
          this.buildChart(this.weeklyData, '周步数趋势')
        }.tabBar('周报告')

        TabContent() {
          this.buildChart(this.monthlyData, '月步数趋势')
        }.tabBar('月报告')
      }
      .width('100%')
      .height('80%')
    }
    .width('100%')
    .height('100%')
    .padding(16)
  }

  @Builder buildChart(data: any, title: string) {
    Column({ space: 10 }) {
      Text(title).fontSize(20).fontWeight(FontWeight.Bold)
      LineChart({
        xAxis: { data: data.dates },
        yAxis: { min: 0 },
        series: [{
          name: '步数',
          type: 'line',
          data: data.steps,
          color: '#007DFF'
        }]
      })
      .width('100%')
      .height(300)

      BarChart({
        xAxis: { data: data.dates },
        yAxis: { min: 0 },
        series: [{
          name: '睡眠(小时)',
          type: 'bar',
          data: data.sleeps,
          color: '#00C853'
        }]
      })
      .width('100%')
      .height(300)
    }
  }
}

八、运行结果与测试步骤

运行结果

• 启动App后，默认显示周报告页，包含近7天的步数折线图和睡眠柱状图。
• 切换至月报告页，显示当月1日至今的数据图表。

测试步骤

1. 环境搭建：安装DevEco Studio，创建Stage模型工程，添加图表库依赖。
2. 代码替换：将上述代码分别放入对应文件（注意路径）。
3. 模拟器运行：连接鸿蒙模拟器（API 9+），点击运行按钮。
4. 验证功能：检查图表是否正确渲染，数据是否与模拟插入的一致（如第1天5000步，第7天8000步）。

九、部署场景

• 真机部署：连接鸿蒙手机（如Mate 60），开启开发者模式，通过USB调试安装。
• 分布式部署：结合鸿蒙分布式能力，将数据同步至平板/智慧屏，跨设备查看报告。

十、疑难解答

• 图表不显示：检查图表库依赖是否正确引入，确认数据非空（dates/steps长度一致）。
• 数据查询失败：验证数据库初始化是否成功（aboutToAppear中initDBAndLoadData是否执行）。
• 日期格式错误：确保date字段为YYYY-MM-DD，避免字符串比较异常。

十一、未来展望与技术挑战

未来展望

• AI分析：集成机器学习模型，识别异常数据（如连续睡眠不足）并预警。
• 多端协同：通过分布式软总线，在手表、手机、车机间同步健康报告。
• 自定义周期：支持用户选择任意起止日期生成报告。

技术挑战

• 性能优化：大数据量（如1年数据）下聚合计算延迟，需引入索引或分页查询。
• 跨设备兼容：不同鸿蒙设备的屏幕尺寸差异，需动态调整图表布局。

十二、总结