---
description: "后台的门面：一行 KPI 瓦片（值 + 相对上一期的涨跌）压阵，下面趋势图、对比图从真实资源数据推导。经营总览、数据分析页用它 —— 也是「首页绝不留脚手架欢迎页」的答案"
---

# 图表页（总览）

后台的门面：一行 **KPI 瓦片**（值 + 相对上一期的涨跌）压阵，下面趋势图、对比图从真实资源数据推导。经营总览、数据分析页用它 —— 也是「首页绝不留脚手架欢迎页」的答案。

<iframe src="/skills/dashboard/assets/demo-charts.html"
        style="width:100%;height:880px;border:1px solid #8884;border-radius:10px"
        loading="lazy" title="形状 demo：图表页"></iframe>

试这几下：

- 右上角切**近 7 天 / 近 30 天** —— 四块 KPI 和两张图**一起**重算（过滤器圈住它下面的一切）
- 在折线上滑动 —— 十字线吸附到最近的日期，一个 tooltip 报当日值；条形图逐柱悬停提亮 + 报数
- 每张图右上角切**「表」** —— 图表的表格孪生，数值不靠悬浮也读得到

## 规矩

形状契约（蓝本）+ 本 wiki 的 dataviz 口径，demo 都照做了：

- **过滤器一行、在所有图之上**，圈住下面全部内容 —— 绝不一图一个过滤器
- **KPI 用 stat 瓦片，不用「一根柱子的柱状图」**；delta 的颜色 = 方向 ×「涨是不是好事」（退款率下降是绿的）
- **单系列不放图例**（标题即图例）；趋势用 2px 折线 + 10% 面积水洗；分类对比的名义类目**一律同一个系列色**（不按大小上色阶）
- **tooltip 只锦上添花，不垄断数值**：十字线找 X、逐柱有命中区，同时每张图都有表格孪生
- 图表色用**经校验的色板**（series-1 蓝亮暗两档，`validate_palette.js` 双模式 PASS）；文字一律用文字色，不穿系列色；网格是实线发丝线
- 双 y 轴禁用；饼图不用于比大小
- 真实版数据从资源的 list 查询推导（注意 `pageSize` 上限 —— 全量聚合应该做成服务端统计接口，不要硬拉所有行）

> 蓝本：`add-chart-page.md`[^add-chart-page]（open-dashboard @ `aa9815f`，MIT，Invariants 已消化进上面「规矩」）

??? abstract "demo 源码：`assets/demo-charts.html`（自包含、未压缩）"

    ```html
    --8<-- "skills/dashboard/assets/demo-charts.html"
    ```

[^add-chart-page]: [`add-chart-page.md`](https://github.com/ahpxex/open-dashboard/blob/aa9815f426e9520841c4aa15a341bfd9f866091f/.claude/skills/add-component/references/add-chart-page.md)，2026-07-28 读。