跳转到正文

构建实时 KPI 仪表盘框架

入门~12 分钟0/4 步骤

构建实时 KPI 仪表盘框架

每一个出色的数据仪表盘都始于同样的骨架:一个干净的 KPI 卡片网格,让最重要的数字一目了然。在本课中,你将构建这个框架——正是 API 会向其中推送实时指标的那种布局。

你将排布一个响应式卡片网格,每张卡片显示一个指标名称、一个醒目的大数值和一个趋势指示。我们会把它设计成仿佛有一个实时数据源每隔几秒就推送新数字的样子。

像分析师一样思考:目标是即时可读。决策者应该在两秒内看清业务状况。让我们来搭建实现这一点的框架。

操作说明

1

添加一个页头,其中包含标题为“实时指标”的 h1,让用户知道这个仪表盘是由 API 驱动的。

提示: 使用:`<h1 class="text-3xl font-bold">实时指标</h1>`,放在一个 `<header>` 里。

这段代码写在哪里?

<!-- 在这里构建你的 KPI 仪表盘框架 -->

写在第 11 行——在那条注释下方,接在你已经写好的代码后面。

2

使用 grid class 创建一个用于放置 KPI 卡片的响应式网格容器。

3

以带样式的盒子形式添加 KPI 卡片,其中一张是“总收入”(Total Revenue)卡片。

4

使用 bg-gray-800 class 给每张卡片添加卡片式背景。

你的代码

html
13
1
2
3
4
5
6
7
8
9
10
11
12
13

实时预览

实时预览