212 lines
11 KiB
Markdown
212 lines
11 KiB
Markdown
|
# Content Mapping Reference
|
|||
|
|
|
|||
|
|
信息类型到视觉形式的映射。这是本技能的核心知识 -- 给定任意内容，选择最佳的 slide 形态。
|
|||
|
|
|
|||
|
|
生成演示文稿时，按以下流程使用本表：
|
|||
|
|
1. 识别用户提供的每块内容属于哪种信息类型
|
|||
|
|
2. 查表确定对应的视觉形式
|
|||
|
|
3. 按内容密度限制拆分 slide
|
|||
|
|
4. 选择匹配的 CSS 布局和组件
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 核心映射表
|
|||
|
|
|
|||
|
|
### 数值与指标类
|
|||
|
|
|
|||
|
|
| 信息类型 | 典型内容 | 推荐视觉形式 | 最大密度 | 何时拆分 |
|
|||
|
|
|----------|---------|-------------|---------|---------|
|
|||
|
|
| 少量关键指标 (3-6 个) | 营收、利润率、用户数、ROE | **KPI 卡片网格** -- 大数字 + 标签 + 趋势标记 | 6 张卡片 | >6 个指标时分页 |
|
|||
|
|
| 单个核心数字 + 解释 | "市占率 35%" + 为什么重要 | **Hero 数字** -- 超大数字居中，下方 2-3 行解释 | 1 个数字 + 3 行文字 | 不拆分 |
|
|||
|
|
| 指标 + 同比/环比变化 | 本季收入 vs 上季 | **KPI 卡片 + CSS 三角趋势箭头** | 同 KPI 网格 | 同上 |
|
|||
|
|
| 评分/打分 (多维度) | 五维能力评分、护城河评级 | **评分条 (progress bar)** -- 名称 + 分数 + 填充条 | 6 个维度 | >6 时分页 |
|
|||
|
|
|
|||
|
|
### 时序与趋势类
|
|||
|
|
|
|||
|
|
| 信息类型 | 典型内容 | 推荐视觉形式 | 备注 |
|
|||
|
|
|----------|---------|-------------|------|
|
|||
|
|
| 单指标时间序列 (3-8 期) | 年度营收 2019-2024 | **柱状图** (ECharts/SVG) | 直观看绝对值和趋势 |
|
|||
|
|
| 多指标时间序列 (2-3 条线) | 收入 + 利润 + 毛利率 | **柱线混合图** -- 柱状(绝对值) + 折线(比率) | 双 Y 轴，左绝对值右百分比 |
|
|||
|
|
| 增长率/变化率序列 | YoY 增速变化 | **折线图** 或 **面积图** | 强调趋势方向 |
|
|||
|
|
| 长期趋势 (>8 期) | 10 年股价、月度数据 | **面积折线图** | 数据点密集时隐藏标签 |
|
|||
|
|
|
|||
|
|
### 结构与构成类
|
|||
|
|
|
|||
|
|
| 信息类型 | 典型内容 | 推荐视觉形式 | 备注 |
|
|||
|
|
|----------|---------|-------------|------|
|
|||
|
|
| 整体拆分为部分 (3-6 项) | 收入结构、成本构成 | **环形饼图** (donut) | >6 项时合并长尾为"其他" |
|
|||
|
|
| 部分之间有层级 | 业务线 > 子业务 > 产品 | **矩形树图** (treemap) | 层级不超过 2 层 |
|
|||
|
|
| 加减关系 (从 A 到 B 的拆解) | 营收 - 成本 - 费用 = 利润 | **瀑布图** (waterfall) | 正负值用不同颜色 |
|
|||
|
|
| 占比对比 (多主体同一维度) | 各公司市占率 | **堆叠柱状图** 或 **分组柱状图** | 主体 <=5 个 |
|
|||
|
|
|
|||
|
|
### 对比与关系类
|
|||
|
|
|
|||
|
|
| 信息类型 | 典型内容 | 推荐视觉形式 | 最大密度 |
|
|||
|
|
|----------|---------|-------------|---------|
|
|||
|
|
| 多主体同维度对比 (3-5 项) | 可比公司估值、产品对比 | **对比卡片网格** -- 每卡片 4-5 行指标 | 4 张卡片 x 5 行 |
|
|||
|
|
| 两个主体深度对比 | A 方案 vs B 方案 | **双列对照** -- 左右分栏，逐行对比 | 5-6 行对比项 |
|
|||
|
|
| 优劣势分析 | 优势/劣势/机会/威胁 | **2x2 网格卡片** -- 每格 3-4 条 | 4 格 x 4 条 |
|
|||
|
|
| 多维度矩阵 (>5 行 x 4 列) | 财务报表、详细数据 | **数据表格** -- 表头 + 交替行 + 高亮列 | 8 行 x 6 列 |
|
|||
|
|
|
|||
|
|
### 叙事与论点类
|
|||
|
|
|
|||
|
|
| 信息类型 | 典型内容 | 推荐视觉形式 | 最大密度 |
|
|||
|
|
|----------|---------|-------------|---------|
|
|||
|
|
| 核心论点 + 支撑要点 | "我们认为 X，因为 A/B/C" | **标题 + 要点列表** -- 每条 1-2 行 | 1 标题 + 5 条 |
|
|||
|
|
| 论点 + 数据佐证 | "增速领先" + 图表 | **图文分栏** -- 左文字右图表（或反过来） | 3-4 条文字 + 1 图表 |
|
|||
|
|
| 因果链/推导过程 | A 导致 B，B 导致 C | **步骤流程** -- 水平箭头连接的卡片 | 3-5 步 |
|
|||
|
|
| 单条核心引用/结论 | "护城河评级: 宽" | **引用页** -- 大字居中 + 出处 | 1 句 (3 行内) |
|
|||
|
|
| 多条并列结论 | 投资建议的 3-5 个关注点 | **结论列表** -- 左边框线 + 加粗主句 + 说明 | 4-5 条 |
|
|||
|
|
|
|||
|
|
### 时间与过程类
|
|||
|
|
|
|||
|
|
| 信息类型 | 典型内容 | 推荐视觉形式 | 最大密度 |
|
|||
|
|
|----------|---------|-------------|---------|
|
|||
|
|
| 历史事件序列 | 公司发展史、政策演变 | **纵向时间线** -- 年份 + 节点 + 描述 | 4-5 个节点 |
|
|||
|
|
| 未来规划/路线图 | Q1 做 A, Q2 做 B | **横向时间线** -- 阶段 + 里程碑 | 4-6 个阶段 |
|
|||
|
|
| 流程步骤 | 投资决策流程、审批流程 | **编号步骤** -- 序号圆 + 标题 + 描述 | 4-5 步 |
|
|||
|
|
|
|||
|
|
### 风险与评估类
|
|||
|
|
|
|||
|
|
| 信息类型 | 典型内容 | 推荐视觉形式 | 备注 |
|
|||
|
|
|----------|---------|-------------|------|
|
|||
|
|
| 风险清单 (含严重性) | 5 个风险 + 影响 + 概率 | **风险表格** -- 3-4 列，含严重性标签 | 5-6 行 |
|
|||
|
|
| 评级/评分总结 | 总分 + 分项 | **评分仪表盘** -- 总分居中 + 分项条 | 总分 + 5-6 分项 |
|
|||
|
|
| 正面/负面因素对比 | 利好 vs 利空 | **双列对照** -- 绿色左列/红色右列 | 每列 3-4 条 |
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 视觉形式速查
|
|||
|
|
|
|||
|
|
按使用频率排序。每种形式对应的完整 HTML/CSS 实现在 [references/financial-layouts.md](references/financial-layouts.md) 和 [references/html-template.md](references/html-template.md) 中。
|
|||
|
|
|
|||
|
|
### CSS 布局类
|
|||
|
|
|
|||
|
|
| 视觉形式 | CSS class / 组件 | 适用场景 | 参考文件 |
|
|||
|
|
|----------|-----------------|---------|---------|
|
|||
|
|
| KPI 卡片网格 | `.kpi-grid > .kpi-card` | 指标概览 | financial-layouts.md #1 |
|
|||
|
|
| 标题 + 要点列表 | `h2 + .insight-list` | 论点阐述 | html-template.md |
|
|||
|
|
| 数据表格 | `.data-table` | 多维数据 | financial-layouts.md #2 |
|
|||
|
|
| 图文分栏 | `.split-layout` | 数据 + 解读 | financial-layouts.md #5 |
|
|||
|
|
| 对比卡片 | `.comparison-grid > .comp-card` | 多主体对比 | financial-layouts.md #4 |
|
|||
|
|
| 时间线 | `.timeline > .timeline-item` | 事件序列 | financial-layouts.md #3 |
|
|||
|
|
| 评分条 | `.moat-item > .moat-bar` | 多维评分 | (inline) |
|
|||
|
|
| Hero 数字 | 自定义大字 + 说明 | 单核心指标强调 | (inline) |
|
|||
|
|
| 引用页 | `blockquote` 居中 | 核心结论/引用 | html-template.md |
|
|||
|
|
| 双列对照 | 2-col grid | A vs B | (inline) |
|
|||
|
|
| 步骤流程 | numbered steps | 过程/流程 | (inline) |
|
|||
|
|
|
|||
|
|
### ECharts 图表类
|
|||
|
|
|
|||
|
|
| 图表类型 | 适用信息 | 备注 |
|
|||
|
|
|----------|---------|------|
|
|||
|
|
| 面积图 | 单指标趋势，强调规模感 | 渐变填充增加视觉重量 |
|
|||
|
|
| 堆叠面积图 | 多组分构成随时间的变化 | 同时看总量和各部分 |
|
|||
|
|
| 柱线混合 + 双Y轴 | 绝对值 + 增长率/比率 | 左轴绝对值，右轴百分比 |
|
|||
|
|
| 柱状图 | 离散值对比 | 分组/堆叠/横向三种变体 |
|
|||
|
|
| 堆叠柱状图 | 构成 + 趋势 | 看总量变化和结构变化 |
|
|||
|
|
| 分组柱状图 | 多主体同维度对比 | 2-4 个主体 |
|
|||
|
|
| 横向条形图 | 排名 / Top N | 长标签更易阅读 |
|
|||
|
|
| 折线图 | 连续趋势 | 多条线 <=3 条 |
|
|||
|
|
| 环形饼图 | 3-6 项占比 | padAngle + borderRadius 更精致 |
|
|||
|
|
| 玫瑰图 | 差异大的占比 | 面积缩放强调差距 |
|
|||
|
|
| 嵌套环形图 | 两级分类构成 | 内环大类，外环细分 |
|
|||
|
|
| 半环仪表盘 | 单一完成度/占比 | 直观展示达标率 |
|
|||
|
|
| Treemap | 面积=数值的层级构成 | 支持 2 层，面积直觉强 |
|
|||
|
|
| 旭日图 | 3 层以上层级 | 从内到外逐层细化 |
|
|||
|
|
| 热力图 | NxM 矩阵数值 | 颜色深浅表示强度 |
|
|||
|
|
| 相关性热力图 | 相关系数方阵 | 对称矩阵，-1 到 +1 色阶 |
|
|||
|
|
| 雷达图 | 多维综合评分 | 2 个主体对比最佳 |
|
|||
|
|
| 散点图 | 两变量相关性 | 气泡大小可编码第三维 |
|
|||
|
|
| 瀑布图 | 加减拆解 | 正/负值不同颜色 |
|
|||
|
|
| K 线图 | 股价走势 | A 股红涨绿跌 |
|
|||
|
|
| 漏斗图 | 逐步递减/转化 | 筛选、转化流程 |
|
|||
|
|
| 桑基图 | 流向/流转关系 | 来源到去向的价值流 |
|
|||
|
|
| Inline SVG | 简单趋势 (零依赖) | 无需 ECharts CDN |
|
|||
|
|
|
|||
|
|
所有 ECharts 图表的完整配置样例见 [references/charts-base.md](references/charts-base.md)。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 组合策略
|
|||
|
|
|
|||
|
|
一页 slide 可以组合多种视觉元素，但必须遵守密度限制：
|
|||
|
|
|
|||
|
|
**允许的组合：**
|
|||
|
|
- KPI 网格 (3-4 卡片) + 1 行小字注释
|
|||
|
|
- 图表 + 标题 + 数据来源注释
|
|||
|
|
- 图文分栏: 左侧 3-4 条要点 + 右侧 1 个图表
|
|||
|
|
- 表格 + 标题 + 1 行脚注
|
|||
|
|
- 标题 + 2 个并排小图表 (高度减半)
|
|||
|
|
|
|||
|
|
**禁止的组合：**
|
|||
|
|
- 图表 + 表格 (两者都需要大量空间)
|
|||
|
|
- KPI 网格 (6 卡片) + 要点列表 (空间不够)
|
|||
|
|
- 两个全尺寸图表并排
|
|||
|
|
- 表格 + 要点列表
|
|||
|
|
|
|||
|
|
**遇到复杂内容时：** 拆分为多张 slide，用一致的标题前缀保持连贯性（如"收入分析 (1/2)"、"收入分析 (2/2)"）。
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## Slide 生成检查清单（逐项强制执行）
|
|||
|
|
|
|||
|
|
对每块用户内容，按顺序完成以下 4 步。每步必须有明确结论，不得跳过。
|
|||
|
|
|
|||
|
|
### Step 1: 分类（单选，必须命中一个）
|
|||
|
|
|
|||
|
|
| IF 内容是... | THEN 类型 = |
|
|||
|
|
|-------------|------------|
|
|||
|
|
| 3-6 个数值指标（营收、利润率、用户数等） | `数值指标` |
|
|||
|
|
| 带年份/季度的数值序列 | `时序趋势` |
|
|||
|
|
| 整体拆分为部分（收入结构、成本构成） | `结构构成` |
|
|||
|
|
| 多个主体的同维度对比 | `对比关系` |
|
|||
|
|
| 观点/论点/结论 + 文字支撑 | `叙事论点` |
|
|||
|
|
| 按时间排列的事件/里程碑 | `时间过程` |
|
|||
|
|
| 风险清单/评分/评级 | `风险评估` |
|
|||
|
|
|
|||
|
|
### Step 2: 密度检查（必须回答 Yes/No）
|
|||
|
|
|
|||
|
|
对照上方映射表的"最大密度"列：
|
|||
|
|
- IF 内容量 <= 密度限制 THEN 继续
|
|||
|
|
- IF 内容量 > 密度限制 THEN **必须拆分为多张 slide**，每张只保留一个聚焦点
|
|||
|
|
|
|||
|
|
**禁止行为：** 不得通过缩小字号、减少间距来容纳超限内容。
|
|||
|
|
|
|||
|
|
### Step 3: 选择视觉形式（直接查表）
|
|||
|
|
|
|||
|
|
| IF 类型 = | THEN 视觉形式 = |
|
|||
|
|
|-----------|----------------|
|
|||
|
|
| `数值指标` 且 <=6 个 | `.kpi-grid` KPI 卡片网格 |
|
|||
|
|
| `数值指标` 且 =1 个核心数字 | Hero 数字（超大居中） |
|
|||
|
|
| `时序趋势` 且单指标 | 面积图 或 柱状图 |
|
|||
|
|
| `时序趋势` 且多指标 | 柱线混合图（双 Y 轴） |
|
|||
|
|
| `结构构成` 且 3-6 项 | 环形饼图 |
|
|||
|
|
| `结构构成` 且有层级 | Treemap 或 旭日图 |
|
|||
|
|
| `结构构成` 且加减拆解 | 瀑布图 |
|
|||
|
|
| `对比关系` 且 3-4 个主体 | `.comparison-grid` 对比卡片 |
|
|||
|
|
| `对比关系` 且 >5 行数据 | `.data-table` 数据表格 |
|
|||
|
|
| `叙事论点` 且纯文字 | 标题 + `.insight-list` 要点列表 |
|
|||
|
|
| `叙事论点` 且有数据佐证 | `.split-layout` 图文分栏 |
|
|||
|
|
| `时间过程` | `.timeline` 时间线 |
|
|||
|
|
| `风险评估` 且清单型 | `.data-table` 风险表格 |
|
|||
|
|
| `风险评估` 且多维打分 | 评分条 (progress bar) |
|
|||
|
|
|
|||
|
|
### Step 4: 位置排序
|
|||
|
|
|
|||
|
|
- 开头 1-2 页: 标题页 + 概览/KPI
|
|||
|
|
- 中间: 核心论证（图表、表格、分栏）
|
|||
|
|
- 结尾 1-2 页: 结论/建议
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 禁止行为清单（看到即纠正）
|
|||
|
|
|
|||
|
|
- 超过 6 个 KPI 卡片不分页
|
|||
|
|
- 图表 + 表格放在同一页
|
|||
|
|
- 两个全尺寸图表并排
|
|||
|
|
- 使用固定 px/rem 字号（必须 clamp()）
|
|||
|
|
- 使用 emoji 代替 CSS 趋势箭头
|
|||
|
|
- 内容溢出时缩小字号而非拆分 slide
|
|||
|
|
- 遗漏中文字体回退链
|