【2.0 教程】第 7 章：仪表盘，一眼看全局

🎉NocoBase V2 系列教程已在官网-教程专栏发布，点击链接前往查看。

https://docs.nocobase.com/cn/tutorials/v2/

已发布教程速览：

NocoBase 2.0 入门教程 ------ IT 工单系统

第一章：认识 NocoBase --- 5 分钟跑起来

第二章：数据建模 --- 给工单系统搭骨架

第三章：搭建页面 --- 让数据看得见

第四章：表单与详情 --- 让数据填得进

第五章：用户与权限 --- 谁能看什么

第六章：工作流 --- 让系统自己动起来

第七章：仪表盘 --- 一眼看全局

本文为NocoBase V2 系列教程第 7 章：仪表盘 --- 一眼看全局

在这个系列里，我们会从零开始，用 NocoBase 搭建一个极简的工单系统（HelpDesk）。整个系统只需要 2 张数据表，不写一行代码，即可实现工单提交、分类管理、变更追踪、权限控制和数据仪表盘。

上一章我们用工作流让系统自动通知、自动记录时间。系统越来越智能了，但还缺一样东西------全局视角。

工单有多少？处理了多少？哪类问题最多？每天新增几条？这些问题靠翻列表是回答不了的。这一章，我们用图表区块（饼图、折线图、柱状图）和 Markdown 区块搭建一个数据看板，把数据变成一眼就能看懂的画面。

7.1 添加仪表盘页面

首先，我们在顶部导航栏添加一个新菜单项。

进入配置模式，在顶部菜单栏点击 「添加菜单项」 （+ 图标），选择 「新版页面（v2）」，命名为「数据看板」。

这个页面专门用来放图表，就是我们的仪表盘主场。

7.2 饼图：工单状态分布

第一个图表，我们用饼图来展示"待处理、处理中、已完成"各有多少。

在数据看板页面，点击 创建区块（Add block） → 图表。

添加后，点击区块右上角的配置按钮，右侧会打开图表配置面板。

配置数据查询

数据表：选择「工单」
度量（Measures） ：选择任意不重复的字段（比如 ID ），聚合方式选 计数（Count）
维度（Dimensions）：选择「状态」字段

点击 执行查询，可以在下方预览返回的数据。

配置图表选项

图表类型 ：选择饼图
字段映射：Category 选「状态」，Value 选计数值
标签：打开开关

左侧页面中应该已经出现了一个漂亮的饼图。每个扇区代表一种状态，默认展示出来具体数量和占比。

点击保存，第一个图表就完成了。

7.3 折线图：每日新建工单趋势

饼图看的是"现在的分布"，折线图看的是"变化的趋势"。

在页面中再添加一个图表区块，配置如下：

数据查询

数据表：选择「工单」
度量：ID，计数
维度：选择「创建时间」字段，格式设置为 YYYY-MM-DD（按天分组）

小提示 ：日期维度的格式很重要。选 YYYY-MM-DD 是按天统计，选 YYYY-MM 就变成按月统计了。根据你的数据量选择合适的粒度。

图表选项

图表类型 ：选择 折线图
字段映射：xField 选「创建时间」，yField 选计数值

保存后，你就能看到工单量随时间的变化曲线了。如果某天突然飙高，说明那天出了什么问题，值得关注。

7.4 条形图：各分类工单数量

第三个图表，我们看看哪个分类的工单最多。这里用横向条形图而不是纵向柱状图------当分类较多时，纵向柱状图的 X 轴标签容易重叠被隐藏，横向展示更清晰。

添加第三个图表区块：

数据查询

数据表：选择「工单」
度量：ID 计数
维度：选择「分类」关联字段（选择分类的名称字段）

图表选项

图表类型 ：选择 条形图（Bar）
字段映射：xField 选计数值（ID 计数），yField 选「分类名称」

保存后，哪类问题最多一目了然。如果"网络故障"的条形远远长过其他分类，也许该考虑升级一下网络设备了。

7.5 表格区块：未完成工单

图表给出的是汇总视角，但管理员通常还需要看到具体明细。我们加一个 未完成工单 的表格，直接展示所有还没处理完的工单。

在页面中添加一个 表格区块，数据表选择「工单」。

配置筛选条件

点击表格区块右上角的配置项，找到 设置数据范围 ，添加一条筛选条件：

状态不等于 已完成

这样表格只展示还没完成的工单，一条完成了就自动从列表中消失。

配置字段

选择要展示的列：标题、状态、优先级、处理人、创建时间。

小提示 ：可以再加上 默认排序（按创建时间倒序），让最新的工单排在最前面。

7.6 Markdown 区块：系统公告

图表之外，我们还可以在仪表盘上放一些文字信息。

添加一个 Markdown 区块，写入系统公告或使用说明：

markdown 复制代码

## IT 工单系统

欢迎使用！遇到问题请提交工单，技术团队会尽快处理。

**紧急问题**请直接拨打 IT 热线：8888

Markdown 区块放在仪表盘顶部，既是欢迎信息，也能当公告栏用。内容随时可以修改，非常灵活。

7.7 JS 区块：个性化欢迎横幅

Markdown 格式比较固定，如果想要更丰富的效果怎么办？NocoBase 提供了 JS 区块（JavaScript Block），可以用代码自由定制展示内容。

我们用它做一个商务风格的欢迎横幅------根据当前登录用户和时间，显示个性化的问候语。

在页面中添加一个 JS 区块（创建区块 → 其他区块 → JS 区块）。

JS 区块中可以通过 ctx.getVar("ctx.user.username") 获取当前登录用户的用户名，下面是一个商务简约风格的欢迎横幅：

js 复制代码

const uname = await ctx.getVar("ctx.user.username")
const name = uname || '用户';
const hour = new Date().getHours();
const hi = hour < 12 ? '上午好' : hour < 18 ? '下午好' : '晚上好';

const d = new Date();
const date = `${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
const week = ['日','一','二','三','四','五','六'][d.getDay()];

ctx.render(`
<div style="padding: 24px 32px; background: #f7f8fa; border-radius: 8px;">
  <div style="display: flex; justify-content: space-between; align-items: flex-end;">
    <div>
      <div style="font-size: 22px; font-weight: 600; color: #1d2129;">${hi}，${name}</div>
      <div style="font-size: 14px; color: #86909c; margin-top: 4px;">欢迎回到 IT 工单系统</div>
    </div>
    <div style="font-size: 14px; color: #86909c;">${date}　星期${week}</div>
  </div>
</div>`);