3步打造专属数据仪表盘：Umami自定义报表完全指南

3步打造专属数据仪表盘：Umami自定义报表完全指南

【免费下载链接】umami Umami is a simple, fast, privacy-focused alternative to Google Analytics. 项目地址: https://gitcode.com/GitHub_Trending/um/umami

你是否还在为通用分析工具无法满足业务需求而烦恼？Umami作为一款注重隐私的轻量级分析工具，提供了强大的自定义报表功能，让你无需复杂代码即可构建专属数据分析仪表盘。本文将通过三个核心步骤，带你掌握从数据筛选到可视化呈现的完整流程，最终创建出贴合业务需求的专业报表。

准备工作：了解Umami报表架构

在开始制作报表前，先了解Umami的报表系统架构。报表功能主要通过以下模块实现：

• 报表页面入口：src/app/(main)/reports/page.tsx/reports/page.tsx)
• 报表创建组件：src/app/(main)/reports/create/page.tsx/reports/create/page.tsx)
• 数据表格组件：src/components/metrics/MetricsTable.tsx
• 可视化图表组件：src/components/charts/Chart.tsx

Umami支持多种数据维度分析，包括设备类型、浏览器分布、地域来源等。系统已内置丰富的图标资源，可直接用于报表展示：

第一步：创建基础报表框架

1.1 进入报表创建界面

登录Umami后台后，通过左侧导航栏进入报表页面。符合权限要求的用户会看到"创建报表"按钮，该功能由src/app/(main)/reports/ReportsHeader.tsx/reports/ReportsHeader.tsx)组件控制，代码逻辑如下：

<LinkButton href={renderTeamUrl('/reports/create')} variant="primary">
  <Icon><Icons.Plus /></Icon>
  <Text>{formatMessage(labels.createReport)}</Text>
</LinkButton>

1.2 配置报表基本信息

在创建页面，需要设置以下基础信息：

• 报表名称（建议使用业务相关命名，如"2025Q1产品页转化分析"）
• 描述信息（简要说明报表用途）
• 数据来源（选择需要分析的网站项目）

第二步：数据筛选与指标配置

2.1 选择数据维度

Umami提供多维度数据筛选功能，核心实现位于src/components/metrics/MetricsTable.tsx。支持的主要筛选维度包括：

维度类型	说明	对应图标资源
设备类型	区分移动设备、桌面设备等	public/images/device
浏览器类型	分析访客使用的浏览器分布	public/images/browsers
操作系统	查看访客设备的操作系统	public/images/os
地域分布	按国家/地区分析流量来源	public/images/flags

2.2 设置关键指标

根据业务目标选择需要监控的指标，常用指标包括：

• 页面浏览量（PV）
• 独立访客数（UV）
• 平均停留时间
• 跳出率
• 转化路径完成率

指标数据处理逻辑可参考src/components/metrics/MetricsTable.tsx中的数据过滤实现：

const filteredData = useMemo(() => {
  if (data) {
    let items = data as any[];
    if (dataFilter) items = dataFilter(data);
    items = percentFilter(items);
    return items;
  }
  return [];
}, [data, dataFilter, search, limit]);

第三步：可视化配置与报表发布

3.1 选择图表类型

Umami内置多种图表类型，通过src/components/charts/Chart.tsx组件实现，支持的图表类型包括：

• 柱状图（bar）- 适合对比不同类别数据
• 折线图（line）- 适合展示趋势变化
• 饼图（pie）- 适合展示占比关系
• 雷达图（radar）- 适合多维度对比分析

图表初始化代码示例：

<Chart 
  type="bar" 
  data={chartData} 
  chartOptions={{
    responsive: true,
    maintainAspectRatio: false
  }}
/>

3.2 配置数据刷新频率

根据业务需求设置报表数据的自动刷新频率，支持：

• 实时刷新（适合监控活动期间流量）
• hourly（每小时更新）
• daily（每日更新）
• 手动刷新

3.3 保存与分享报表

完成配置后，点击"保存"按钮将报表添加到报表列表。报表列表由src/app/(main)/reports/ReportsTable.tsx/reports/ReportsTable.tsx)组件渲染，支持查看、编辑和删除操作：

<GridColumn name="action" label="" alignment="end">
  {row => (
    <>
      <ReportDeleteButton reportId={id} reportName={name} />
      <LinkButton href={renderTeamUrl(`/reports/${id}`)}>
        <Icon><Icons.ArrowRight /></Icon>
        <Text>{formatMessage(labels.view)}</Text>
      </LinkButton>
    </>
  )}
</GridColumn>

高级技巧：自定义报表样式

对于有开发能力的用户，可以通过修改以下文件自定义报表样式：

• 表格样式：src/components/metrics/MetricsTable.module.css
• 图表样式：src/components/charts/Chart.module.css
• 布局样式：src/components/layout/Page.module.css

例如调整表格行高和字体大小：

.tableRow {
  height: 48px;
  font-size: 14px;
}

总结与后续优化方向

通过本文介绍的三个步骤，你已掌握Umami自定义报表的核心制作流程。建议从以下方向继续优化报表效果：

1. 数据联动：配置多报表间的数据联动，实现钻取分析
2. 定时导出：设置报表自动导出为CSV/PDF格式
3. 异常预警：配置关键指标的阈值预警

更多高级功能可参考官方文档和源码实现，Umami项目结构清晰，扩展性强，适合根据业务需求进行二次开发。

报表功能相关源码目录：src/app/(main)/reports//reports/)

【免费下载链接】umami Umami is a simple, fast, privacy-focused alternative to Google Analytics. 项目地址: https://gitcode.com/GitHub_Trending/um/umami