欢迎大家加入开源鸿蒙跨平台开发者社区，一起共建开源鸿蒙跨平台生态。

📌 概述

数据统计模块提供了全面的福报数据分析功能。用户可以查看不同时间维度的统计数据、分类统计、趋势分析等。通过数据可视化，用户可以更直观地了解自己的福报积累情况。

🔗 完整流程

第一部分：数据聚合

系统从数据库查询指定时间范围内的所有福报记录，按照不同维度（日、周、月、年）进行聚合。计算总福报值、平均值、最高值等统计指标。

第二部分：分类统计

系统按照福报分类统计每个分类的福报值、记录数量等。计算每个分类占总福报的比例。

第三部分：数据可视化

系统使用图表展示统计数据。包括柱状图、饼图、折线图等多种图表类型。

🔧 Web 代码实现

<div class="statistics-container">
  <div class="stats-header">
    <h1>数据统计</h1>
    <div class="stats-filters">
      <select id="timeRange" onchange="loadStatistics()">
        <option value="week">本周</option>
        <option value="month">本月</option>
        <option value="year">本年</option>
      </select>
    </div>
  </div>

  <div class="stats-overview">
    <div class="stat-card">
      <div class="stat-label">总福报</div>
      <div class="stat-value" id="totalBlessings">0</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">平均值</div>
      <div class="stat-value" id="avgBlessings">0</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">最高值</div>
      <div class="stat-value" id="maxBlessings">0</div>
    </div>
    <div class="stat-card">
      <div class="stat-label">记录数</div>
      <div class="stat-value" id="recordCount">0</div>
    </div>
  </div>

  <div class="charts-container">
    <div class="chart-box">
      <h3>分类分布</h3>
      <canvas id="categoryChart"></canvas>
    </div>
    <div class="chart-box">
      <h3>趋势走势</h3>
      <canvas id="trendChart"></canvas>
    </div>
  </div>

  <div class="category-stats">
    <h3>分类详情</h3>
    <table class="stats-table" id="categoryTable">
      <thead>
        <tr>
          <th>分类</th>
          <th>福报值</th>
          <th>占比</th>
          <th>记录数</th>
        </tr>
      </thead>
      <tbody id="categoryTableBody"></tbody>
    </table>
  </div>
</div>

JavaScript 逻辑

class StatisticsModule {
  constructor() {
    this.timeRange = 'month';
    this.init();
  }

  init() {
    this.loadStatistics();
  }

  loadStatistics() {
    this.timeRange = document.getElementById('timeRange').value;

    cordova.exec(
      (result) => {
        this.updateOverview(result.overview);
        this.renderCategoryStats(result.categoryStats);
        this.renderCharts(result.chartData);
      },
      (error) => console.error('加载统计数据失败:', error),
      'StatisticsPlugin',
      'getStatistics',
      [{ timeRange: this.timeRange }]
    );
  }

  updateOverview(overview) {
    document.getElementById('totalBlessings').textContent = overview.total;
    document.getElementById('avgBlessings').textContent = overview.average;
    document.getElementById('maxBlessings').textContent = overview.max;
    document.getElementById('recordCount').textContent = overview.count;
  }

  renderCategoryStats(stats) {
    const tbody = document.getElementById('categoryTableBody');
    tbody.innerHTML = '';

    stats.forEach(item => {
      const tr = document.createElement('tr');
      tr.innerHTML = `
        <td>${item.category}</td>
        <td>${item.value}</td>
        <td>${item.percentage}%</td>
        <td>${item.count}</td>
      `;
      tbody.appendChild(tr);
    });
  }

  renderCharts(data) {
    // 使用 Chart.js 绘制图表
    // 实现细节省略
  }
}

const statisticsModule = new StatisticsModule();

原生代码

export class StatisticsPlugin {
  getStatistics(params: any, callback: (data: any) => void): void {
    try {
      const db = this.getDatabase();
      const userId = this.getUserId();
      const timeRange = params.timeRange;

      const overview = this.calculateOverview(db, userId, timeRange);
      const categoryStats = this.calculateCategoryStats(db, userId, timeRange);
      const chartData = this.prepareChartData(db, userId, timeRange);

      callback({ overview, categoryStats, chartData });
    } catch (error) {
      callback({ overview: {}, categoryStats: [], chartData: {} });
    }
  }

  private calculateOverview(db: any, userId: string, timeRange: string): any {
    const dateRange = this.getDateRange(timeRange);
    const result = db.query(`
      SELECT 
        SUM(amount) as total,
        AVG(amount) as average,
        MAX(amount) as max,
        COUNT(*) as count
      FROM blessings
      WHERE user_id = ? AND created_at >= ? AND created_at <= ?
    `, [userId, dateRange.start, dateRange.end]);

    return result[0] || { total: 0, average: 0, max: 0, count: 0 };
  }

  private calculateCategoryStats(db: any, userId: string, timeRange: string): any[] {
    const dateRange = this.getDateRange(timeRange);
    const result = db.query(`
      SELECT 
        category,
        SUM(amount) as value,
        COUNT(*) as count
      FROM blessings
      WHERE user_id = ? AND created_at >= ? AND created_at <= ?
      GROUP BY category
      ORDER BY value DESC
    `, [userId, dateRange.start, dateRange.end]);

    const total = result.reduce((sum, item) => sum + item.value, 0);
    return result.map(item => ({
      ...item,
      percentage: Math.round((item.value / total) * 100)
    }));
  }

  private getDateRange(timeRange: string): any {
    const now = new Date();
    let start = new Date();

    if (timeRange === 'week') {
      start.setDate(now.getDate() - 7);
    } else if (timeRange === 'month') {
      start.setMonth(now.getMonth() - 1);
    } else if (timeRange === 'year') {
      start.setFullYear(now.getFullYear() - 1);
    }

    return { start: start.getTime(), end: now.getTime() };
  }

  private prepareChartData(db: any, userId: string, timeRange: string): any {
    // 准备图表数据
    return {};
  }

  private getDatabase(): any { return null; }
  private getUserId(): string { return ''; }
}

📝 总结

数据统计模块提供了强大的数据分析功能。通过多维度的统计和可视化，帮助用户深入了解自己的福报积累情况。关键技术包括：数据聚合、统计计算、图表绘制等。