# 织信仪表盘 生成 UI 预设方案

本文件是 生成仪表盘卡片时**必须遵循**的视觉与布局规范。

---

## §0 使用规则（必读）

1. **默认模式**：用户未明确指定卡片样式（颜色 / 主题 / 字号 / 圆角 / 布局 / 图表外观）时，**必须**按本文件第 §1 选定的"默认主题 + 默认布局模板"生成所有卡片字段。
2. **覆盖模式**：用户明确指定某项时（如"用紫色主题"、"标题居中"、"柱状图不要圆角"），仅替换被指定的字段，其余字段仍按预设。
3. **主题一致性**：**同一仪表盘下所有卡片必须使用同一套主题色板**。不得混用主题。
4. **布局规划先于创建**：创建多张卡片前，**必须先根据卡片数量和性质选定 §3 的某个布局模板**，按模板分配每张卡片的 `width` / `height` / 排列顺序，再逐张创建。**严禁直接平铺为 12 或随意尺寸**。
5. **网格基准 = 24 列**：织信仪表盘网格一行 **24 格**（系统硬约束，见 `DesignerEngine.saveDashboardCardDefine`：`width + widthSum > 24` 才换行）。整行 = 24，半行 = 12，1/3 行 = 8，1/4 行 = 6。AI 生成卡片时**每一行的 width 之和必须 = 24**（精确不溢出，也不留空），否则系统会把下一张卡片塞到当前行尾部或右侧出现大片空白。
6. **颜色硬约束**（继承自工具描述）：HEX 6 位、不允许 rgba/rgb/hsl/函数/动态表达式（但 ECharts LinearGradient 对象在 areaStyle/itemStyle/color 上**允许**，cardStyle.bgGradientColor 字段允许 CSS `linear-gradient(...)` 字符串，详见 §2.1 / §4）；不允许纯黑 `#000000`、纯白 `#FFFFFF`、灰色系作为主色（白色仅作背景/描边/渐变终点用）。
7. **避开织信系统保留字段**：业务编号字段不得叫 `id`/`seq`。
8. **视觉丰富度铁律**：默认必须开启数据标签 / 渐变 / 圆角 / 阴影，**严禁生成"裸 ECharts 默认样式"的图表**（纯单色实心柱、没标签的折线、没描边的饼图、灰底框图都属于反面教材）。
9. **副标题与卡片名不重复**：`DashboardCardDefine.subTitle`（顶层副标题字段）**严禁**与 `name` 文本相同或语义重复。若 numberSetting.title / ProChart series.name 已经表达了同义信息，**直接不设置 subTitle**（留空字符串或不传）。视觉上不要让用户在同一张卡片上看到两遍同样的描述。
10. **图表内容居中铁律**：Number 卡片必须 `xPosition: "center"` + `yPosition: "center"`（让数字与 title 整体居中显示），**禁止默认 left/center**。ProChart 卡片靠 `proChartSetting.grid` 调中心，pie/radar/gauge 靠 series setting 的 `center: ["50%", "55%"]`。

---

## §1 七套主题色板

每套主题给出：①调色盘（series.itemStyle.color 循环值，6-9 色） ②卡片背景默认色 ③渐变基色对（用于 ECharts LinearGradient 的 from/to） ④主色文本辅助色 ⑤适用场景。

### 主题 1 · 清新蓝（Default / Aqua Sky）
- **调色盘**：`#5B8FF9` `#5AD8A6` `#5D7092` `#F6BD16` `#E8684A` `#6DC8EC` `#945FB9` `#FF9845` `#1E9493`
- **主色**：`#5B8FF9`
- **渐变对（亮→暗）**：`#85B4FF` → `#3366E5`
- **辅助文本色**：`#5D7092`
- **卡片背景**：`#FFFFFF`
- **KPI 卡片可选背景（每色一张 KPI 的淡彩底，最多 6 张轮换）**：`#EEF4FF` / `#EAFBF3` / `#EEF0F5` / `#FEF7DF` / `#F0EEFF` / `#FFF1EC`
- **KPI 淡渐变对（每张 KPI 一对，bgGradientColor 用，从淡彩底斜 135° 渐变到白）**：
  - `linear-gradient(135deg, #DCE8FF 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #D8F5E8 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #DCE2EF 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FCEEC5 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #DCD7FF 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FFDBCC 0%, #FFFFFF 100%)`
- **适用**：通用业务看板（默认选这个）

### 主题 2 · 商务紫（Enterprise Violet）
- **调色盘**：`#7262FD` `#8861E4` `#5B8FF9` `#6DC8EC` `#945FB9` `#5AD8A6` `#FAAD14` `#F6BD16`
- **主色**：`#7262FD`
- **渐变对**：`#A593FF` → `#4D3CCC`
- **辅助文本色**：`#5D7092`
- **卡片背景**：`#FFFFFF`
- **KPI 淡彩底**：`#F1EEFF` / `#F3EFFE` / `#EEF4FF` / `#FFF8E1` / `#E8F8EF` / `#FFEDF2`
- **KPI 淡渐变对**：
  - `linear-gradient(135deg, #E1DAFF 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #E5DCF8 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #DCE8FF 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FCEEC5 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #D8F5E8 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FFD6E0 0%, #FFFFFF 100%)`
- **适用**：企业 IT、SaaS 控制台、金融场景

### 主题 3 · 活力多彩（Vivid Multi）
- **调色盘**：`#FF6B6B` `#4ECDC4` `#FFD93D` `#6BCB77` `#4D96FF` `#FF9F40` `#9D4EDD` `#FF8FA3`
- **主色**：`#FF6B6B`
- **渐变对**：`#FF9B9B` → `#E54B4B`
- **辅助文本色**：`#4A4A4A`
- **卡片背景**：`#FFFFFF`
- **KPI 淡彩底**：`#FFEDED` / `#E0F8F6` / `#FFF7D6` / `#E9F6E3` / `#FFE6D0` / `#F2E0FF`
- **KPI 淡渐变对**：
  - `linear-gradient(135deg, #FFD6D6 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #C5F0EB 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FFEDB0 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #D6EFC9 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FFD2AC 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #E4C5FF 0%, #FFFFFF 100%)`
- **适用**：内容运营、用户增长、营销看板

### 主题 4 · 自然绿（Forest）
- **调色盘**：`#27AE60` `#6FCF97` `#219653` `#F2C94C` `#56CCF2` `#2D9CDB` `#9B51E0` `#EB5757`
- **主色**：`#27AE60`
- **渐变对**：`#5DD995` → `#1B7E45`
- **辅助文本色**：`#3D5849`
- **卡片背景**：`#FFFFFF`
- **KPI 淡彩底**：`#E8F8EF` / `#EBF8F3` / `#E6F1FB` / `#FEF7DF` / `#FFEDED` / `#F0E8FF`
- **KPI 淡渐变对**：
  - `linear-gradient(135deg, #CFEEDB 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #D5F0E5 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #CFE3F5 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FCEEC5 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FFD6D6 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #DCD0FF 0%, #FFFFFF 100%)`
- **适用**：环保、农业、健康、ESG 报表

### 主题 5 · 暖阳橙（Sunset）
- **调色盘**：`#F2994A` `#F2C94C` `#EB5757` `#FF7A45` `#FFA940` `#FFC53D` `#73D13D` `#36CFC9`
- **主色**：`#F2994A`
- **渐变对**：`#FFB873` → `#D9711B`
- **辅助文本色**：`#664423`
- **卡片背景**：`#FFFFFF`
- **KPI 淡彩底**：`#FFF1E0` / `#FFF7DF` / `#FCE6E6` / `#FFE9DF` / `#E6F8F8` / `#EDF5E0`
- **KPI 淡渐变对**：
  - `linear-gradient(135deg, #FFE2BF 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FFEDB0 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FACCCC 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #FFD2BF 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #C5EFEF 0%, #FFFFFF 100%)`
  - `linear-gradient(135deg, #DCE9C0 0%, #FFFFFF 100%)`
- **适用**：餐饮、零售、客服、宠物服务

### 主题 6 · 深空黑（Dark Cyber）
- **调色盘**：`#00D9FF` `#7C3AED` `#F472B6` `#FBBF24` `#34D399` `#60A5FA` `#F87171` `#A78BFA`
- **主色**：`#00D9FF`
- **渐变对**：`#5BEAFF` → `#0095B3`
- **辅助文本色**：`#C8D3E5`
- **卡片背景**：`#1F2937`（深色背景，**唯一允许的深色背景预设**）
- **KPI 淡彩底**：`#243144` / `#2B2A4A` / `#1F3331` / `#33293A` / `#1F2A38` / `#2A2438`
- **KPI 淡渐变对（深色场景从更深色到主背景）**：
  - `linear-gradient(135deg, #2A3B52 0%, #1F2937 100%)`
  - `linear-gradient(135deg, #322F58 0%, #1F2937 100%)`
  - `linear-gradient(135deg, #234039 0%, #1F2937 100%)`
  - `linear-gradient(135deg, #3D2F46 0%, #1F2937 100%)`
  - `linear-gradient(135deg, #243648 0%, #1F2937 100%)`
  - `linear-gradient(135deg, #322B45 0%, #1F2937 100%)`
- **适用**：大屏可视化、监控中心、设备物联

### 主题 7 · 莫兰迪灰粉（Morandi Pastel）
- **调色盘**：`#C8A2C8` `#A8C5DA` `#B8C5A6` `#E8B4B8` `#D4A5A5` `#F4C2C2` `#9FB8C8` `#C9C5BA`
- **主色**：`#C8A2C8`
- **渐变对**：`#E0C3E0` → `#9B73A6`
- **辅助文本色**：`#7A6B73`
- **卡片背景**：`#FAFAFA`
- **KPI 淡彩底**：`#F5EBF5` / `#ECF1F6` / `#F0F3E9` / `#FCEFF0` / `#F0E6E8` / `#EFEBE0`
- **KPI 淡渐变对**：
  - `linear-gradient(135deg, #E8D5E8 0%, #FAFAFA 100%)`
  - `linear-gradient(135deg, #DCE5ED 0%, #FAFAFA 100%)`
  - `linear-gradient(135deg, #E0E8D2 0%, #FAFAFA 100%)`
  - `linear-gradient(135deg, #F2D5D6 0%, #FAFAFA 100%)`
  - `linear-gradient(135deg, #E5CFD3 0%, #FAFAFA 100%)`
  - `linear-gradient(135deg, #E2DBC8 0%, #FAFAFA 100%)`
- **适用**：高端品牌、设计类应用、艺术文创

### 主题选择规则
- 用户未指定 → 主题 1（清新蓝）
- 应用名/仪表盘名含「运营 / 营销 / 增长 / 内容」→ 主题 3
- 应用名/仪表盘名含「企业 / 财务 / IT / 金融 / 项目」→ 主题 2 或 1
- 应用名/仪表盘名含「绿色 / 环保 / 农业 / 健康」→ 主题 4
- 应用名/仪表盘名含「零售 / 餐饮 / 宠物 / 服务」→ 主题 5
- 应用名/仪表盘名含「监控 / 大屏 / 设备 / 物联」→ 主题 6
- 应用名/仪表盘名含「品牌 / 设计 / 艺术」→ 主题 7

---

## §2 卡片样式预设

### §2.1 通用 cardStyle（所有 ProChart / Number 卡片共用）

```json
{
  "bgType": "image",
  "bgColor": "#FFFFFF",
  "padding": 16,
  "paddingTop": 12,
  "paddingRight": 16,
  "paddingBottom": 12,
  "paddingLeft": 16,
  "paddingControl": true,
  "borderWidth": 0,
  "borderRadius": 12,
  "titleFontSize": "16px",
  "titleFontWeight": "600",
  "titleColor": "<主题辅助文本色>",
  "titlePosition": "left",
  "subTitleFontSize": "12px",
  "subTitleColor": "<主题辅助文本色>",
  "subTitlePosition": "titleRight",
  "enableBorderImage": false
}
```

**KPI 卡片专属覆盖项**（让并排的 Number 卡更有质感，每张卡用主题 KPI 淡渐变对的一种）：
```json
{
  "bgType": "gradient",
  "bgColor": "<§1 主题 KPI 淡彩底 第 N 色>",
  "bgGradientColor": "<§1 主题 KPI 淡渐变对 第 N 个>",
  "borderRadius": 16,
  "padding": 20,
  "paddingControl": false,
  "borderWidth": 0,
  "titleFontSize": "13px",
  "titleFontWeight": "500",
  "titleColor": "<§1 主题辅助文本色>",
  "titlePosition": "left"
}
```

> **KPI 渐变规则**：
> - `bgType="gradient"` + `bgGradientColor` 同时填，前端按渐变字符串渲染背景；**严禁**把 `bgType` 写成 `"image"`/`"color"`/`"transparent"`，否则 `bgGradientColor` 不生效（前端只在 `bgType=="gradient"` 时才解析 CSS `linear-gradient(...)`）；
> - `bgColor` 保留淡彩底对应色作为 fallback（渐变未解析时的降级），保持视觉一致；
> - 4 张或 6 张 KPI 卡片按 §1 主题的"KPI 淡渐变对"**按下标循环**取（第 1 张取[0]、第 2 张取[1]……到 6 即重新循环）；
> - **KPI 卡片严禁设置 DashboardCardDefine.subTitle**（顶层 subTitle 字段不要传，避免与卡片 name 重复显示）。

**主题 6（深空黑）覆盖项**：`bgColor: "#1F2937"`、`titleColor: "#C8D3E5"`；`bgGradientColor` 用 §1 主题 6 提供的深色渐变对；ProChart 卡片背景同 `#1F2937`，不加渐变（深色场景图表自身有渐变就够）。

### §2.2 卡片字段开关（顶层）

```
enableCardStyle: true       // 必须 true，否则上面的 cardStyle 不生效
enableRefresh: false        // 默认不开自动刷新；明确说"实时"才开
refreshTime: 30             // 开启时默认 30 秒
disableToolbar: false       // 默认显示工具栏
enableButton: false         // 默认不开扩展按钮
filterLabelPosition: "top"  // 默认筛选标签在顶部
disableFilterCache: false   // 默认开缓存
```

### §2.3 Number 卡片预设（统计数字）

按"展示密度"分 4 档，**每档对应 24 列网格不同的占位**：

| 档位 | 用途 | width | height | numberSetting.fontSize | xPosition | yPosition |
|---|---|---|---|---|---|---|
| **紧凑·4 个** | 顶部 KPI 行 4 个并排 | 6 | 4 | 36 | "center" | "center" |
| **紧凑·6 个** | 顶部 KPI 行 6 个并排 | 4 | 4 | 30 | "center" | "center" |
| **标准** | 单独展示一个关键数字 | 8 | 6 | 56 | "center" | "center" |
| **大字** | 仅 1-2 个超重点指标 | 12 或 24 | 8 | 80 | "center" | "center" |

> **居中铁律**：所有 Number 卡片 **xPosition 与 yPosition 必须都是 "center"**。让数字和 numberSetting.title 整体在卡片中部垂直水平居中，视觉就像例图 2 那样"5"在中间、"项目总数"在数字下方紧贴居中。**禁止用 "left"/"center" 这种偏左布局**——会和卡片左上自带的 name 标题挤在一起、显得重复且杂乱。

**numberSetting 默认值**（所有档位共用）：

```json
{
  "aggregation": true,
  "aggregationSplitMultiValue": false,
  "groupByFieldList": [],
  "orderByList": [],
  "xPosition": "center",
  "yPosition": "center",
  "title": "<根据指标命名 - 与卡片 name 可以相同也可以不同>",
  "titleFontSize": 13,
  "color": "<当前主题调色盘 按 KPI 顺序循环的第 N 色>",
  "titleColor": "<§1 主题辅助文本色>",
  "placeholderColor": "<§1 主题辅助文本色>",
  "fontSize": 36,
  "fontWeight": "bold",
  "format": "comma",
  "precision": 0,
  "unit": "",
  "count": 1000
}
```

**配色规则**：
- 4 个并排 KPI：`color` 字段按当前主题调色盘**前 4 色循环**（如主题 1：蓝/绿/灰蓝/金）
- 6 个并排：前 6 色循环
- 单独 1 张：用主题主色

`unit` 没单位就传空串，**严禁**主动填"个"。

**与 cardStyle 配合**：KPI 卡片创建时 `DashboardCardDefine.subTitle` 留空（不传）；`name` 与 `numberSetting.title` 可以相同（前端会显示卡片左上小标题 + 卡片中部居中的数字 + 数字下方 title），整体视觉是"小标 → 中部大字 → 标签"三段同义但层级分明，**不**会出现图 1 中"重复同样描述"的混乱。

---

## §3 六套布局模板（24 列网格）

> **网格约定**：织信仪表盘 **24 列网格**（一行 24 格）。`width=24` 占满整行，`width=12` 半行，`width=8` 1/3 行，`width=6` 1/4 行。height 没有上限，1 单位约 32px。

> **重要**：下面每个模板的每一行 width 加总必须 = 24，否则会被系统按 `widthSum + 下一张width > 24` 才换行的规则塞乱。

### 模板 A · KPI 数据看板（默认，最通用）

> 适用：4 个 KPI + 4 个图表

```
┌──────────────────────────────────────────────────────────────────┐
│ KPI1 (6×4) │ KPI2 (6×4) │ KPI3 (6×4) │ KPI4 (6×4)                │  ← 顶部 4 KPI（6+6+6+6=24）
├──────────────────────────────────────────────────────────────────┤
│ 主趋势图 ProChart (16×10)            │ 副趋势 ProChart (8×10)    │  ← 中部双图（16+8=24）
├──────────────────────────────────────────────────────────────────┤
│ 分布图 ProChart (12×10)              │ 分布图 ProChart (12×10)   │  ← 底部双图（12+12=24）
└──────────────────────────────────────────────────────────────────┘
```

| 卡片角色 | type | width | height | 推荐图表 |
|---|---|---|---|---|
| KPI 1-4 | Number | 6 | 4 | — |
| 主趋势 | ProChart | 16 | 10 | line（渐变面积折线） |
| 副趋势 | ProChart | 8 | 10 | bar（横向圆角柱状） |
| 分布左 | ProChart | 12 | 10 | pie（普通扇形 + 外标签） |
| 分布右 | ProChart | 12 | 10 | radar 或 bar |

### 模板 B · 趋势监控（运营 / 增长）

> 适用：1 个核心趋势 + 多个细分对比

```
┌──────────────────────────────────────────────────────────────────┐
│ KPI1 (6×4) │ KPI2 (6×4) │ KPI3 (6×4) │ KPI4 (6×4)                │
├──────────────────────────────────────────────────────────────────┤
│ 核心趋势图 ProChart (24×10)                                       │  ← 整行折线/面积图
├──────────────────────────────────────────────────────────────────┤
│ 对比柱状 (8×10)    │ 对比饼图 (8×10)    │ 对比雷达 (8×10)         │
└──────────────────────────────────────────────────────────────────┘
```

### 模板 C · 数据分析（深度报表）

> 适用：1 个主分析图 + 侧边多个 KPI

```
┌──────────────────────────────────────────────────────────────────┐
│                                       │ KPI1 (8×4)                │
│  主图表 ProChart (16×20)               ├───────────────────────────┤
│  bar 多系列 / line 多线                 │ KPI2 (8×4)                │
│                                       ├───────────────────────────┤
│                                       │ KPI3 (8×4)                │
│                                       ├───────────────────────────┤
│                                       │ Mini bar (8×8)            │
└──────────────────────────────────────────────────────────────────┘
```

| 卡片角色 | type | width | height |
|---|---|---|---|
| 主图表 | ProChart | 16 | 20 |
| 侧 KPI 1-3 | Number | 8 | 4 |
| 侧 Mini bar | ProChart | 8 | 8 |

### 模板 D · 综合看板（图1 同款，丰富版）

> 适用：4 KPI + 4-5 图表组合

```
┌──────────────────────────────────────────────────────────────────┐
│ KPI1 (6×4) │ KPI2 (6×4) │ KPI3 (6×4) │ Mini bar (6×4)            │  ← 顶部 4 卡（6+6+6+6=24）
├──────────────────────────────────────────────────────────────────┤
│ 趋势1 ProChart (12×8) │ 趋势2 ProChart (12×8)                     │  ← 双折线/面积（12+12=24）
├──────────────────────────────────────────────────────────────────┤
│ 多饼图 ProChart (16×10)              │ 雷达 ProChart (8×10)       │  ← 底部分布（16+8=24）
└──────────────────────────────────────────────────────────────────┘
```

### 模板 E · 简洁信息流（图2 同款）

> 适用：欢迎语 + 4 KPI + 1 主图 + 1 分类

```
┌──────────────────────────────────────────────────────────────────┐
│ 欢迎/标题 Flexbox 容器 (24×4)                                      │  ← AI 暂不创建 Flexbox
├──────────────────────────────────────────────────────────────────┤
│ 主数据 ProChart (24×10) 渐变面积折线                                │
├──────────────────────────────────────────────────────────────────┤
│ 类别占比 pie (12×10)  │ 热门列表 Table (12×10)（AI 暂不创建）        │
└──────────────────────────────────────────────────────────────────┘
```

> **当前限制**：AI 只能创建 Number 与 ProChart 卡片。模板 E 中的 Flexbox 和 Table 由用户手动添加，AI 先把能做的部分按尺寸填进去。

### 模板 F · 单一聚焦（最简）

> 适用：用户只要看 1-2 个图表

```
┌──────────────────────────────────────────────────────────────────┐
│ 主图表 ProChart (24×16)                                            │
└──────────────────────────────────────────────────────────────────┘
```

或：

```
┌──────────────────────────────────────────────────────────────────┐
│ KPI 大字 Number (12×8) │ 趋势 ProChart (12×8)                      │
└──────────────────────────────────────────────────────────────────┘
```

### 模板 G · 6 KPI 顶部看板（数据点多）

> 适用：6 个核心 KPI + 多图表

```
┌──────────────────────────────────────────────────────────────────┐
│ KPI1 (4×4) │ KPI2 (4×4) │ KPI3 (4×4) │ KPI4 (4×4) │ KPI5 (4×4) │ KPI6 (4×4) │  ← 顶 6 KPI（4×6=24）
├──────────────────────────────────────────────────────────────────┤
│ 主趋势 ProChart (16×10)              │ 副趋势 ProChart (8×10)     │  ← 中部（16+8=24）
├──────────────────────────────────────────────────────────────────┤
│ 分布饼 (8×10)        │ 雷达 (8×10)        │ 漏斗 (8×10)            │  ← 底部 3 图（8+8+8=24）
└──────────────────────────────────────────────────────────────────┘
```

| 卡片角色 | type | width | height |
|---|---|---|---|
| KPI 1-6 | Number | 4 | 4 |
| 主趋势 | ProChart | 16 | 10 |
| 副趋势 | ProChart | 8 | 10 |
| 底部 3 图 | ProChart | 8 | 10 |

### 模板 H · 4 列图表看板（小图密集型）

> 适用：6 KPI + 4 个中等图 + 2 个大图

```
┌──────────────────────────────────────────────────────────────────┐
│ KPI1 (4×4) │ KPI2 (4×4) │ KPI3 (4×4) │ KPI4 (4×4) │ KPI5 (4×4) │ KPI6 (4×4) │  ← 顶 6 KPI（4×6=24）
├──────────────────────────────────────────────────────────────────┤
│ 小图 (6×8)  │ 小图 (6×8)  │ 小图 (6×8)  │ 小图 (6×8)             │  ← 4 列小图（6×4=24）
├──────────────────────────────────────────────────────────────────┤
│ 主图表 ProChart (12×10)              │ 主图表 ProChart (12×10)    │  ← 底部 2 大图（12+12=24）
└──────────────────────────────────────────────────────────────────┘
```

| 卡片角色 | type | width | height | 推荐图表 |
|---|---|---|---|---|
| KPI 1-6 | Number | 4 | 4 | — |
| 中部 4 小图 | ProChart | 6 | 8 | 单系列 bar / pie / radar / gauge |
| 底部 2 大图 | ProChart | 12 | 10 | line / 多系列 bar / treemap |

### 模板 I · 复杂分屏（大屏综合）

> 适用：4 KPI + 1 大型主图（占左半边）+ 多张右侧分屏小图（占右半边）

```
┌──────────────────────────────────────────────────────────────────┐
│ KPI1 (6×4) │ KPI2 (6×4) │ KPI3 (6×4) │ KPI4 (6×4)                │  ← 顶 4 KPI（6×4=24）
├──────────────────────────────────────────────────────────────────┤
│                                       │ 小图1 (12×6)              │
│                                       ├───────────────────────────┤
│  主图表 ProChart (12×18)               │ 小图2 (12×6)              │  ← 左大图（12）+ 右 3 小图（12 各占 6 高）
│  多系列 line / 堆叠 bar / sunburst      ├───────────────────────────┤
│                                       │ 小图3 (12×6)              │
└──────────────────────────────────────────────────────────────────┘
```

| 卡片角色 | type | width | height |
|---|---|---|---|
| KPI 1-4 | Number | 6 | 4 |
| 主图表 | ProChart | 12 | 18 |
| 右侧小图 1-3 | ProChart | 12 | 6 |

### 模板 J · 3 行 KPI 看板（密集数据）

> 适用：大量 KPI（10+ 项）无大图表的简洁数字看板

```
┌──────────────────────────────────────────────────────────────────┐
│ KPI1 (4×4) │ KPI2 (4×4) │ KPI3 (4×4) │ KPI4 (4×4) │ KPI5 (4×4) │ KPI6 (4×4) │  ← 行 1：6 KPI
├──────────────────────────────────────────────────────────────────┤
│ Mini chart (8×8)     │ Mini chart (8×8)    │ Mini chart (8×8)     │  ← 行 2：3 个 Mini 图（8+8+8=24）
├──────────────────────────────────────────────────────────────────┤
│ KPI7 (4×4) │ KPI8 (4×4) │ KPI9 (4×4) │ KPI10(4×4) │ KPI11(4×4) │ KPI12(4×4) │  ← 行 3：6 KPI
└──────────────────────────────────────────────────────────────────┘
```

> KPI 卡片底色按 §1 主题"KPI 淡渐变对"的 6 个**循环取**，行 1 和行 3 颜色一致即可（不必区别）；Mini chart 用纯白底卡片避免视觉过重。

### 布局模板选择规则

| 用户场景 | 推荐模板 |
|---|---|
| 用户说"运营看板 / 数据看板 / KPI 概览" | A |
| 用户说"增长 / 趋势 / 监控" | B |
| 用户说"分析 / 报表 / 详细" | C |
| 用户说"综合 / 全面 / 完整" | D |
| 用户说"简单 / 概览 / 首页" | E |
| 用户只要 1-2 个图 | F |
| 用户说"指标多 / 多 KPI / 关键数据多" | G |
| 用户说"小图多 / 信息密 / 多维对比" | H |
| 用户说"大屏 / 综合监控 / 分屏" | I |
| 用户说"数字看板 / 报表汇总" | J |
| 都没说且卡片数量 ≤ 4 | F |
| 都没说且卡片数量 5-8 | A |
| 都没说且卡片数量 9-12 | D 或 G |
| 都没说且卡片数量 13-15 | H |
| 都没说且卡片数量 ≥ 16 | I 或 J |

---

## §4 ProChart 各 series 类型预设（含美化默认）

### §4.0 「数据 → 图表」选型决策树（必看，先选对图再配样式）

**第一步：判断数据的"形状"**

| 数据形状 | 典型字段结构 | 推荐图表 | 不推荐 |
|---|---|---|---|
| **单值聚合**（count / sum / avg 单数字） | 一个聚合值 | Number 卡片（统计数字） | 任何 ProChart |
| **时间序列**（日期 → 1 个或多个度量） | x: 日期, y: 数值 | line（单线/多线/堆叠面积） | pie / funnel |
| **类目对比**（类目 → 1 个度量） | x: 类目, y: 数值 | bar 纵向；类目多时 bar 横向 | line（除非有"趋势"语义） |
| **类目对比·多系列**（类目 → N 个度量） | x: 类目, y1/y2/y3 | bar 分组 / bar 堆叠 / line 多线 | radar（除非维度数 ≤ 8） |
| **占比 / 构成**（类目 → 占总量百分比） | label, value | pie 普通扇形（默认 radius "70%"，中心放总数时改环形 ["55%","78%"]）/ funnel（流程递减时） | bar |
| **层级占比**（多层级 → 占比） | parent/child/value | treemap（层级浅，类目多） / sunburst（层级深） | pie（只能 1 层） |
| **多维评估**（一个实体 → 多个维度评分） | dim, value（3-10 维） | radar | bar（除非比较时） |
| **进度 / 完成率**（单值 → 上限百分比） | value, max | gauge | Number（数字弱化"进度"语义） |
| **相关性 / 分布**（每条记录 2 个度量） | x, y | scatter | line / bar |
| **二维密度**（x 类目 × y 类目 → 强度） | xCat, yCat, value | heatmap | bar / pie |
| **转化漏斗 / 流程递减** | step, value | funnel | pie（漏斗有顺序，饼图无序） |
| **金融 K 线**（4 元统计） | open/close/high/low | candlestick（§4.13） | — |
| **多组分布**（5 元统计） | min/q1/q2/q3/max | boxplot（§4.14） | — |
| **时间日历密度**（每日活跃度） | date, value | calendarHeatmap（**待用户提供配置**，临时改用 §4.10 笛卡尔 heatmap） | — |

**第二步：根据数据量决定细节**

| 数据量 | 折线图细节 | 柱状图细节 | 饼图细节 |
|---|---|---|---|
| ≤ 7 点 | `showSymbol: true`、`symbolSize: 8`（点要明显） | `barMaxWidth: 60`、加 label.show | 普通扇形 `radius: "70%"` + `padAngle:1` |
| 8-30 点 | `showSymbol: false`、`smooth: true` | `barMaxWidth: 60`、保留 label | 普通扇形 `radius: "70%"`（中心需放总数时才换环形 `["55%","78%"]`） |
| > 30 点 | 关 label、加 dataZoom | 改横向柱（避免类目挤压） | **改用 treemap / bar**（pie 段太多无意义） |

**第三步：场景关键词反查图表（AI 看到下面关键词时直接采用对应图表）**

| 关键词 | 强映射图表 |
|---|---|
| 趋势 / 增长 / 走势 / 同比 / 环比 / 月度变化 | line（渐变面积折线） |
| 排行 / 排名 / Top N / 高低对比 | bar 横向 + label.position=insideRight |
| 占比 / 构成 / 比例 / 份额 / 分布 | pie 普通扇形（明确说"环形 / 中心放总数"才用环形） |
| 转化 / 漏斗 / 流失 / 留存层级 | funnel |
| 评分 / 评估 / 多维能力 / 画像 | radar |
| 完成度 / KPI 进度 / 健康度 / 满意度 | gauge |
| 热度 / 活跃度 / 分布密度 / 时段热力 | heatmap |
| 层级占比 / 树状结构 / 组织贡献 | treemap / sunburst |
| 散布 / 相关性 / 异常点检测 | scatter |
| 累计 / 增减变化 / 瀑布分析 | bar 堆叠（瀑布图实现） |

**反面教材**：
- ❌ 用 pie 展示 20+ 段（眼花、无法阅读） → 用 treemap 或 bar 横向
- ❌ 用 line 展示无序类目（类目轴不是时间） → 用 bar
- ❌ 用 bar 展示占比（占比天然是 pie/funnel 语义） → 除非 N ≥ 10 且要排序，否则用 pie
- ❌ 用 radar 展示超过 12 维（雷达图维度多了会变成圆） → 改 bar 横向
- ❌ 用 funnel 展示无顺序的类目（漏斗有"递减"语义） → 改 pie

### §4.1 全 series 通用字段

```json
{
  "name": "<图表名，按业务命名>",
  "type": "<bar/line/pie/...>",
  "colorBy": "data",
  "emphasis": {
    "focus": "series",
    "disabled": false,
    "blurScope": "coordinateSystem",
    "itemStyle": { "shadowBlur": 12, "shadowColor": "rgba(0,0,0,0.18)" }
  },
  "itemStyle": {
    "opacity": 1,
    "borderType": "solid",
    "borderWidth": 0,
    "borderRadius": 0
  }
}
```

> emphasis 提供 hover 高亮（鼠标移上去其余变虚），是图表"活"起来的关键。

### §4.2 proChartSetting 顶层通用预设

```json
{
  "title": {
    "show": false,
    "left": "left",
    "text": "",
    "textStyle": { "color": "<§1 主题辅助文本色>", "fontSize": 14, "fontWeight": "600" }
  },
  "legend": {
    "show": true,
    "top": "0",
    "left": "center",
    "orient": "horizontal",
    "type": "plain",
    "icon": "roundRect",
    "itemGap": 16,
    "itemWidth": 12,
    "itemHeight": 8,
    "textStyle": { "color": "<§1 主题辅助文本色>", "fontSize": 12 }
  },
  "tooltip": {
    "show": true,
    "trigger": "axis",
    "backgroundColor": "rgba(255,255,255,0.96)",
    "borderColor": "<§1 主题主色>",
    "borderWidth": 1,
    "padding": [8, 12, 8, 12],
    "textStyle": { "color": "<§1 主题辅助文本色>", "fontSize": 12, "fontWeight": "500" },
    "axisPointer": { "type": "shadow", "shadowStyle": { "color": "rgba(150,150,150,0.08)" } }
  },
  "grid": [{
    "top": "40px",
    "left": "16px",
    "right": "24px",
    "bottom": "16px",
    "containLabel": true,
    "show": false
  }],
  "dataZoom": [],
  "polar": [],
  "radar": [],
  "angleAxis": [],
  "radiusAxis": [],
  "visualMap": []
}
```

**规则**：
- `title.show`：默认 false（卡片本身有标题，不重复显示）
- `legend.show`：单 series 时 false，多 series 时 true
- `tooltip.trigger`：bar/line/scatter 用 `"axis"`，pie/radar/gauge 用 `"item"`
- 主题 6（深色）：`tooltip.backgroundColor` 改 `rgba(31,41,55,0.96)`，`tooltip.textStyle.color` 改 `#FFFFFF`

### §4.2b 坐标轴（xAxis / yAxis）通用美化

**xAxis（类目轴）**：
```json
{
  "type": "category",
  "boundaryGap": true,
  "axisLine": { "show": true, "lineStyle": { "color": "#E5E7EB", "width": 1 } },
  "axisTick": { "show": false },
  "axisLabel": { "color": "<§1 主题辅助文本色>", "fontSize": 11, "margin": 12, "interval": "auto" },
  "splitLine": { "show": false }
}
```

**yAxis（数值轴）**：
```json
{
  "type": "value",
  "axisLine": { "show": false },
  "axisTick": { "show": false },
  "axisLabel": { "color": "<§1 主题辅助文本色>", "fontSize": 11 },
  "splitLine": { "show": true, "lineStyle": { "color": "#F0F1F5", "type": "dashed", "width": 1 } }
}
```

> 主题 6（深色）：`axisLine.lineStyle.color: "#374151"`、`splitLine.lineStyle.color: "#2A3441"`、`axisLabel.color: "#C8D3E5"`。

### §4.3 line（折线 / 面积图）默认配置 — 渐变面积

```json
{
  "id": "<生成的id>",
  "name": "<系列名>",
  "type": "line",
  "lineSetting": {
    "datasetIndex": 0,
    "encode": { "x": ["<dimension.id>"], "y": ["<dimension.id>"] },
    "smooth": true,
    "symbol": "emptyCircle",
    "symbolSize": 6,
    "showSymbol": false,
    "step": false,
    "lineStyle": {
      "type": "solid",
      "width": 3,
      "shadowColor": "<§1 主题渐变对.from>",
      "shadowBlur": 10,
      "shadowOffsetY": 6
    },
    "areaStyle": {
      "color": {
        "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1,
        "colorStops": [
          { "offset": 0, "color": "<§1 主题渐变对.from>" },
          { "offset": 1, "color": "<§1 主题渐变对.from>00" }
        ]
      },
      "origin": "auto"
    },
    "label": { "show": false }
  },
  "itemStyle": { "color": "<§1 主题调色盘第 N 色>", "borderColor": "#FFFFFF", "borderWidth": 2 }
}
```

**重要**：
- 默认开 `smooth: true`、`lineStyle.width: 3`、`lineStyle.shadow*` → 折线变得粗壮且有柔和投影（视觉重量提升）
- `areaStyle.color` 用 ECharts **LinearGradient**（`type: "linear"` 对象），从主题渐变基色到 8 位 HEX 末尾 `00`（完全透明），形成顺滑渐变面积。**这是图表"高级感"的关键**
- 末尾 `00` = 0% 透明度（HEX 8 位最后 2 位是 alpha）。完整示例：`"#5B8FF9"` → `"#5B8FF900"`
- 多 line 系列堆叠：每个 series 加 `"stack": "totalA"`（相同 stack 值堆叠）
- 数据点突出时（数据稀疏，<20 个点）：`showSymbol: true`、`symbol: "circle"`、`symbolSize: 8`

### §4.4 bar（柱状图）默认配置 — 渐变 + 圆角顶 + 柱体宽度上限

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "bar",
  "barSetting": {
    "datasetIndex": 0,
    "encode": { "x": ["<x.id>"], "y": ["<y.id>"] },
    "barMaxWidth": 60,
    "barGap": "20%",
    "barCategoryGap": "30%",
    "itemStyle": {
      "color": {
        "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1,
        "colorStops": [
          { "offset": 0, "color": "<§1 主题渐变对.from>" },
          { "offset": 1, "color": "<§1 主题渐变对.to>" }
        ]
      },
      "borderRadius": [8, 8, 0, 0],
      "opacity": 1,
      "shadowColor": "<§1 主题渐变对.to>33",
      "shadowBlur": 8,
      "shadowOffsetY": 4
    },
    "label": {
      "show": true,
      "position": "top",
      "color": "<§1 主题辅助文本色>",
      "fontSize": 12,
      "fontWeight": "600",
      "distance": 6
    }
  }
}
```

**柱体宽度铁律**：
- **统一使用 `barMaxWidth: 60`，禁止使用 `barWidth: "50%"` 这种百分比形式**。理由：百分比基于"类目格"宽度计算，当类目只有 2-3 列时，每格变宽，柱体就被拉成超粗的方砖（图 1 中的柱状图问题）。
- 绝对像素上限 60px 保证少列时不发胖；多列时 ECharts 会按 `barCategoryGap` 自动收窄柱体。
- 横向柱状图同样用 `barMaxWidth: 60`（横向时它控制柱"高度"，单位仍是像素）。
- 多系列同图：可以加 `"barMinWidth": 8` 防止柱体被挤成 1px 线。

**横向柱状图**（图1 右上「转评赞」效果 / 模板 A 副趋势）：
- xAxis 配 `type: "value"`，yAxis 配 `type: "category"`
- `barSetting.itemStyle.color` LinearGradient 改为水平方向：`"x":0,"y":0,"x2":1,"y2":0`
- `borderRadius: [0, 30, 30, 0]`（右侧大圆角，像药丸）
- `label.show: true`、`label.position: "insideRight"`、`label.color: "#FFFFFF"`、`label.fontWeight: "bold"`
- `barMaxWidth: 60`（同上）

**堆叠柱状**：每个 series 加 `"stack": "totalA"`；堆叠时只有最顶层 series 用 `borderRadius: [8,8,0,0]`，中间和底部都用 `0`。

**瀑布图（用堆叠柱实现）**：series 1 透明占位（`itemStyle.color: "transparent"`，label.show=false）+ series 2 真实数值（渐变），两者用 `stack: "wf"` 堆叠。透明占位的高度由上一项累计 - 当前项目计算（通常需要 dataset 预处理）。

### §4.5 pie（饼图 / 环形 / 玫瑰图）默认配置 — 普通扇形 + 标签

**优先级铁律**：**默认使用普通扇形图（实心饼）**；环形图作为**次选**（仅在中心需要放总数文本、或用户明确要求"环形/donut"时使用）；玫瑰图仅在用户明确要求"玫瑰图"时使用。**严禁所有 pie 卡片都默认输出环形**（之前版本默认环形导致视觉雷同，已纠正）。

#### 标准普通扇形图（**推荐，所有 pie 默认走这个**）

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "pie",
  "pieSetting": {
    "datasetIndex": 0,
    "encode": { "itemName": "<itemName.id>", "value": ["<value.id>"] },
    "radius": "70%",
    "center": ["50%", "55%"],
    "clockwise": true,
    "avoidLabelOverlap": true,
    "padAngle": 1,
    "label": {
      "show": true,
      "position": "outside",
      "color": "<§1 主题辅助文本色>",
      "fontSize": 12,
      "fontWeight": "500",
      "formatter": "{b}\n{d}%"
    },
    "labelLine": { "show": true, "length": 12, "length2": 12, "smooth": true },
    "itemStyle": {
      "borderColor": "<§1 卡片背景色，默认 #FFFFFF>",
      "borderWidth": 2,
      "borderRadius": 4,
      "shadowColor": "rgba(0,0,0,0.12)",
      "shadowBlur": 10
    },
    "emphasis": {
      "label": { "show": true, "fontSize": 14, "fontWeight": "bold" },
      "scaleSize": 6
    }
  },
  "itemStyle": { "color": "<不指定时由 colorBy:data + 调色盘自动循环>" }
}
```

**重要美化点**：
- `radius: "70%"` —— 单值（实心扇形），**不要写成 `["55%","78%"]` 这种双值环形**
- `padAngle: 1` —— 段间 1 度细白缝（ECharts 5.4+ 特性），保留分段感但比环形更紧凑
- `itemStyle.borderWidth: 2` + 白色描边 —— 段落分明
- `itemStyle.borderRadius: 4` —— 段角微圆，柔和
- 阴影 —— 整体浮起感
- `label.formatter: "{b}\n{d}%"` —— 名称换行 + 百分比，**默认就显示**（不要让 AI 输出无标签饼图）

#### 环形图（**次选**，仅在以下场景用）

触发条件（满足任一即用环形）：
- 用户明确要求"环形 / 环状 / donut / 中空"
- 卡片中心需要放总数 / 主指标文本（用 graphic 或 series 中心 label）
- 同一仪表盘内已有普通扇形，需要视觉区分

在标准普通扇形基础上修改：
```json
"radius": ["55%", "78%"],
"padAngle": 2,
"itemStyle": { "borderColor": "#FFFFFF", "borderWidth": 3, "borderRadius": 6 }
```

#### 玫瑰图（**仅在用户明确说"玫瑰图 / Nightingale Rose"时用**）

```json
"roseType": "radius",
"radius": ["20%", "85%"],
"padAngle": 0
```

### §4.6 scatter（散点图）默认配置

```json
{
  "type": "scatter",
  "scatterSetting": {
    "datasetIndex": 0,
    "encode": { "x": ["<x.id>"], "y": ["<y.id>"] },
    "symbol": "circle",
    "symbolSize": 14
  },
  "itemStyle": {
    "color": "<§1 主题调色>",
    "opacity": 0.85,
    "shadowColor": "<§1 主题渐变对.from>",
    "shadowBlur": 8
  }
}
```

### §4.7 radar（雷达图）默认配置 — 加底纹 + 渐变填充

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "radar",
  "radarSetting": {
    "datasetIndex": 0,
    "encode": { "value": ["<value.id>"] },
    "areaStyle": {
      "color": {
        "type": "radial", "x": 0.5, "y": 0.5, "r": 0.5,
        "colorStops": [
          { "offset": 0, "color": "<§1 主题渐变对.from>" },
          { "offset": 1, "color": "<§1 主题渐变对.from>20" }
        ]
      }
    },
    "lineStyle": { "width": 2 },
    "symbol": "circle",
    "symbolSize": 6,
    "label": { "show": false }
  },
  "itemStyle": { "color": "<§1 主题调色第 N 色>" }
}
```

`proChartSetting.radar` 同步：

```json
"radar": [{
  "id": "radar1",
  "shape": "polygon",
  "radius": "68%",
  "splitNumber": 5,
  "axisName": { "color": "<§1 主题辅助文本色>", "fontSize": 12 },
  "splitLine": { "lineStyle": { "color": "#F0F1F5", "type": "dashed" } },
  "splitArea": { "show": true, "areaStyle": { "color": ["rgba(255,255,255,0)", "rgba(245,247,250,0.45)"] } },
  "axisLine": { "lineStyle": { "color": "#E5E7EB" } },
  "indicator": [
    { "name": "<维度1>", "max": 100 },
    { "name": "<维度2>", "max": 100 }
  ]
}]
```

**注意**：多个 radar series 时，每个 series 的 `radarSetting` 需要在 `proChartSetting.radar` 数组里有对应坐标系（通过 series 的 `radarIndex` 引用）。

### §4.8 gauge（仪表盘）默认配置 — 双圈渐进

```json
{
  "type": "gauge",
  "gaugeSetting": {
    "datasetIndex": 0,
    "encode": { "value": ["<value.id>"] },
    "min": 0,
    "max": 100,
    "splitNumber": 10,
    "radius": "82%",
    "center": ["50%", "58%"],
    "startAngle": 220,
    "endAngle": -40,
    "axisLine": {
      "lineStyle": {
        "width": 22,
        "color": [["1", "#E8ECF2"]]
      }
    },
    "progress": {
      "show": true,
      "width": 22,
      "roundCap": true,
      "itemStyle": {
        "color": {
          "type": "linear", "x": 0, "y": 0, "x2": 1, "y2": 0,
          "colorStops": [
            { "offset": 0, "color": "<§1 主题渐变对.from>" },
            { "offset": 1, "color": "<§1 主题渐变对.to>" }
          ]
        }
      }
    },
    "pointer": { "show": false },
    "axisTick": { "show": false },
    "splitLine": { "show": false },
    "axisLabel": { "show": false },
    "title": {
      "show": true,
      "offsetCenter": [0, "65%"],
      "color": "<§1 主题辅助文本色>",
      "fontSize": 13
    },
    "detail": {
      "formatter": "{value}%",
      "offsetCenter": [0, 0],
      "fontSize": 36,
      "fontWeight": "bold",
      "color": "<§1 主题主色>"
    }
  }
}
```

### §4.9 funnel（漏斗图）默认配置 — 渐变填充 + 白缝分段

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "funnel",
  "funnelSetting": {
    "datasetIndex": 0,
    "encode": { "itemName": "<itemName.id>", "value": ["<value.id>"] },
    "sort": "descending",
    "gap": 2,
    "left": "10%",
    "top": "10%",
    "right": "10%",
    "bottom": "10%",
    "width": "80%",
    "min": 0,
    "minSize": "20%",
    "maxSize": "100%",
    "funnelAlign": "center",
    "label": {
      "show": true,
      "position": "inside",
      "color": "#FFFFFF",
      "fontSize": 13,
      "fontWeight": "600",
      "formatter": "{b}\n{c}"
    },
    "labelLine": { "show": false },
    "itemStyle": {
      "borderColor": "#FFFFFF",
      "borderWidth": 2,
      "borderRadius": 4,
      "shadowColor": "rgba(0,0,0,0.10)",
      "shadowBlur": 8
    },
    "emphasis": {
      "label": { "fontSize": 16, "fontWeight": "bold" }
    }
  },
  "colorBy": "data"
}
```

**适用**：转化漏斗（注册→下单→付款→复购）、销售管道、流程递减、用户分层占比。
**关键**：用 `colorBy: "data"` + 调色盘自动给每段不同色（从主题前几色取）；label 内嵌于色块、白字加粗；段间 `gap: 2` 保留分隔感。

### §4.10 heatmap（笛卡尔热力图）默认配置 — 渐变映射 + visualMap

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "heatmap",
  "heatmapSetting": {
    "datasetIndex": 0,
    "coordinateSystem": "cartesian2d",
    "encode": {
      "x": ["<x 类目字段 id，对应 dataset.dimensionList 中的 id>"],
      "y": ["<y 类目字段 id>"],
      "value": [],
      "lat": [], "lng": [], "angle": [], "radius": [], "single": [], "tooltip": [], "seriesName": []
    },
    "label": {
      "show": true,
      "color": "<§1 主题辅助文本色>",
      "fontSize": 11,
      "fontWeight": "500",
      "formatterVar": "${value.value>0?value.value:''}"
    },
    "itemStyle": {
      "borderColor": "#FFFFFF",
      "borderWidth": 1,
      "opacity": 1,
      "areaColor": "#ccc",
      "borderType": "dashed",
      "shadowBlur": 0,
      "borderRadius": 0
    },
    "symbol": "emptyCircle",
    "symbolSize": 4,
    "symbolRotate": 0,
    "silent": false,
    "colorBy": "data",
    "xAxisIndex": 0,
    "yAxisIndex": 0,
    "emphasis": {
      "focus": "none",
      "disabled": false,
      "blurScope": "coordinateSystem",
      "itemStyle": { "shadowBlur": 10, "shadowColor": "rgba(0,0,0,0.4)" }
    },
    "labelLayout": { "enable": false, "hideOverlap": false, "moveOverlap": "none" }
  }
}
```

**关键字段说明**（取自织信真实卡片 JSON）：
- `encode.x` / `encode.y` 填 dataset.dimensionList 里的 id（如 `["x"]` / `["y"]`），**不是 ECharts 维度索引**。
- `encode.value` 留空数组——value 维度通过 visualMap.dimension 指向（见下）。
- `label.formatterVar` 用织信脚本表达式：`${value.value>0?value.value:''}` 表示 value 大于 0 才显示标签，避免 0 值密密麻麻的"0"挤满画面。
- `coordinateSystem: "cartesian2d"` 必填（heatmap 默认走笛卡尔，区别于日历热力图的 calendar 坐标系）。

**proChartSetting 配套**（heatmap 必须配 visualMap）：

```json
"xAxis": [{ "type": "category", "axisLabel": { "color": "<§1 主题辅助文本色>", "fontSize": 11 }, "splitLine": { "show": false } }],
"yAxis": [{ "type": "category", "axisLabel": { "color": "<§1 主题辅助文本色>", "fontSize": 11 }, "splitLine": { "show": false } }],
"visualMap": [{
  "id": "<生成的 id>",
  "type": "continuous",
  "min": 0,
  "max": "<取数据中的 max，或固定上限>",
  "show": true,
  "calculable": true,
  "orient": "horizontal",
  "left": "center",
  "bottom": "0",
  "dimension": 2,
  "seriesIndex": 0,
  "datasetIndex": 0,
  "inRange": {
    "color": ["<§1 主题 KPI 淡彩底 第 1 色>", "<§1 主题渐变对.from>", "<§1 主题渐变对.to>"]
  },
  "textStyle": { "color": "<§1 主题辅助文本色>" }
}],
"grid": [{ "top": "30px", "left": "60px", "right": "30px", "bottom": "70px", "containLabel": true }]
```

**visualMap 关键**：
- `dimension: 2` —— 指向 dataset 维度的第 3 个字段（索引从 0 开始：0=x, 1=y, 2=value）。**必填**，否则 visualMap 不知道按哪列映射颜色。
- `seriesIndex: 0` + `datasetIndex: 0` —— 织信特有，绑定 visualMap 到具体 series / dataset。
- `inRange.color` 用 2-3 色梯度：可以从透明（如 `rgba(252,252,252,0)`）渐变到强色（主题渐变对.to），符合用户提供的 JSON 风格。

**xAxis / yAxis 都用 `type: "category"`**——这是 heatmap 区别于其他图最关键的一点（**两个轴都是类目**）。

**适用**：日×时段密度（如客服繁忙度）、区域×产品销量、考勤热度。

### §4.11 treemap（矩形树图）默认配置 — 主题色阶 + 圆角

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "treemap",
  "treemapSetting": {
    "datasetIndex": 0,
    "encode": { "itemName": "<itemName.id>", "value": ["<value.id>"] },
    "left": "0",
    "top": "30",
    "right": "0",
    "bottom": "0",
    "width": "100%",
    "height": "100%",
    "leafDepth": 1,
    "roam": false,
    "nodeClick": "zoomToNode",
    "breadcrumb": { "show": false },
    "label": {
      "show": true,
      "color": "#FFFFFF",
      "fontSize": 13,
      "fontWeight": "600",
      "formatter": "{b}\n{c}"
    },
    "itemStyle": {
      "borderColor": "#FFFFFF",
      "borderWidth": 2,
      "borderRadius": 6,
      "gapWidth": 4
    },
    "levels": [{
      "itemStyle": { "borderWidth": 0, "gapWidth": 4 },
      "upperLabel": { "show": false }
    }],
    "emphasis": {
      "label": { "fontSize": 15, "fontWeight": "bold" }
    }
  },
  "colorBy": "data"
}
```

**适用**：层级占比可视化（如部门→团队工时、品类→子品类销售额、文件夹→子目录大小）。
**数据要求**：dataset 的值字段必须能聚合成"大小"语义。如果织信 dataset 只能输出扁平结构，先用一层分组聚合作为叶子（leafDepth=1），不强求多层嵌套。

### §4.12 sunburst（旭日图）默认配置 — 多环层级 + 渐变色

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "sunburst",
  "sunburstSetting": {
    "datasetIndex": 0,
    "encode": { "itemName": "<itemName.id>", "value": ["<value.id>"] },
    "center": ["50%", "55%"],
    "radius": ["10%", "85%"],
    "sort": "desc",
    "label": {
      "show": true,
      "color": "#FFFFFF",
      "fontSize": 11,
      "fontWeight": "500",
      "rotate": "radial",
      "minAngle": 10
    },
    "itemStyle": {
      "borderColor": "#FFFFFF",
      "borderWidth": 2,
      "borderRadius": 3
    },
    "levels": [
      {},
      { "r0": "10%", "r": "45%", "itemStyle": { "borderRadius": 4, "borderWidth": 2 }, "label": { "rotate": "tangential" } },
      { "r0": "45%", "r": "75%", "itemStyle": { "borderRadius": 3 }, "label": { "rotate": "tangential" } },
      { "r0": "75%", "r": "85%", "itemStyle": { "borderRadius": 2 }, "label": { "show": false } }
    ],
    "emphasis": {
      "focus": "ancestor",
      "label": { "fontSize": 13, "fontWeight": "bold" }
    }
  },
  "colorBy": "data"
}
```

**适用**：双层及以上层级占比（如组织→部门→个人贡献度、品类→品牌→单品）。
**与 treemap 的区别**：sunburst 用扇形展示，更适合层级深的场景；treemap 用矩形，更适合数量多但层级浅的场景。

### §4.13 candlestick（K 线图）默认配置 — 金融场景

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "candlestick",
  "candlestickSetting": {
    "datasetIndex": 0,
    "coordinateSystem": "cartesian2d",
    "encode": {
      "x": ["<日期字段 id>"],
      "y": ["<open 字段 id>", "<close 字段 id>", "<high 字段 id>", "<low 字段 id>"],
      "itemName": "<日期字段 id>",
      "lat": [], "lng": [], "angle": [], "value": [], "radius": [], "single": [], "tooltip": [], "seriesName": []
    },
    "barWidth": 10,
    "barMaxWidth": 0,
    "barMinWidth": 1,
    "label": { "show": false },
    "silent": false,
    "colorBy": "data",
    "xAxisIndex": 0,
    "yAxisIndex": 0,
    "itemStyle": {
      "color": "<§1 主题渐变对.from>",
      "color0": "<§1 主题调色第 5 色，下跌色>",
      "borderColor": "<§1 主题渐变对.to>",
      "borderColor0": "<§1 主题调色第 5 色>",
      "opacity": 1,
      "areaColor": "#ccc",
      "borderType": "solid",
      "shadowBlur": 0,
      "borderWidth": 1,
      "borderRadius": 0
    },
    "emphasis": { "focus": "none", "disabled": false, "blurScope": "coordinateSystem" },
    "labelLayout": { "enable": false, "hideOverlap": false, "moveOverlap": "none" }
  }
}
```

**关键字段说明**：
- `encode.y` 必须是 **4 元数组**，顺序固定为 `[open, close, high, low]`（与 ECharts 一致）。
- `encode.x` 通常是日期字段；`itemName` 也填日期字段，用于 tooltip 显示。
- `barWidth: 10` —— K 线柱体宽度（像素）。**这里允许用 barWidth 数字而不是 barMaxWidth**，因为 K 线场景柱体本身就要细窄。
- `itemStyle.color` / `color0` —— ECharts K 线特有：`color` 是阳线（涨）色，`color0` 是阴线（跌）色；`borderColor` / `borderColor0` 同理。
- **不要开 label.show**：K 线图本身用 itemStyle 颜色表达涨跌，不需要数字标签。

**proChartSetting 配套**：

```json
"xAxis": [{ "type": "category", "boundaryGap": true, "splitLine": { "show": false } }],
"yAxis": [{ "type": "value", "scale": true, "splitLine": { "show": true, "lineStyle": { "color": "#F0F1F5", "type": "dashed" } } }],
"tooltip": { "show": true, "trigger": "axis", "axisPointer": { "type": "cross" } }
```

`yAxis.scale: true` 是金融图必加项，避免 y 轴从 0 起导致 K 线柱挤压。

**适用**：股价 / 期货 / 加密货币行情；非金融场景慎用。

### §4.14 boxplot（箱型图）默认配置 — 多维分布统计

```json
{
  "id": "<id>",
  "name": "<系列名>",
  "type": "boxplot",
  "boxplotSetting": {
    "datasetIndex": 0,
    "coordinateSystem": "cartesian2d",
    "encode": {
      "x": ["<类目字段 id，如 name>"],
      "y": ["<min 字段 id>", "<q1 字段 id>", "<q2 字段 id>", "<q3 字段 id>", "<max 字段 id>"],
      "lat": [], "lng": [], "angle": [], "value": [], "radius": [], "single": [], "tooltip": [], "seriesName": []
    },
    "boxWidth": [10, 30],
    "label": { "show": false },
    "silent": false,
    "colorBy": "data",
    "xAxisIndex": 0,
    "yAxisIndex": 0,
    "itemStyle": {
      "color": "<§1 主题渐变对.from>",
      "borderColor": "<§1 主题渐变对.to>",
      "opacity": 1,
      "areaColor": "#ccc",
      "borderType": "solid",
      "shadowBlur": 0,
      "borderWidth": 1,
      "borderRadius": 0
    },
    "emphasis": {
      "focus": "none",
      "disabled": false,
      "blurScope": "coordinateSystem",
      "itemStyle": { "shadowBlur": 12, "shadowColor": "<§1 主题渐变对.to>33" }
    },
    "labelLayout": { "enable": false, "hideOverlap": false, "moveOverlap": "none" }
  }
}
```

**关键字段说明**：
- `encode.y` 必须是 **5 元数组**，顺序固定为 `[min, Q1, median(Q2), Q3, max]`（最小值、下四分位、中位、上四分位、最大值）。dataset 维度字段也按这个顺序定义。
- `boxWidth: [10, 30]` —— 箱体宽度范围 `[min, max]` 像素：类目少时取上限 30，类目多时压缩到下限 10。
- `xAxis` 用 category（类目轴：每个箱代表一个类目），`yAxis` 用 value（数值轴）。
- `itemStyle.color` 填充色用主题色，`borderColor` 用更深色——形成"色块 + 描边"的清晰箱体。
- **不要开 label**：箱型图靠几何形状表达 5 个统计量，加标签反而混乱。

**dataset 数据形态**：每条记录是一个类目的 5 元组，例如：
```json
[
  { "name": "A001", "min": 10, "q1": 20, "q2": 30, "q3": 40, "max": 50 },
  { "name": "A002", "min": 15, "q1": 25, "q2": 35, "q3": 45, "max": 55 }
]
```
织信扁平 aggregation 通常输出不了这个结构，**实践中 dataset 用 `type: "expression"`** 写表达式预聚合（如先按 name 分组、再用 SQL/脚本算分位数），或者由后端先准备好这种结构的虚拟表。

**适用**：多组样本的分布对比（如 A 班 vs B 班各科成绩分布、各产品线响应时间分布）；非统计场景慎用。

### §4.15 calendarHeatmap（日历热力图）— 暂不主动生成

> 这个图表需要 `coordinateSystem: "calendar"` + `proChartSetting.calendar: [{range, cellSize, dayLabel, monthLabel}]` 配套，**用户尚未提供织信侧真实卡片 JSON 参考**。
>
> 如果用户明确要求"日历热力图 / GitHub 贡献度图 / 每日活跃热度"，回复："这个图表需要参考配置，请把 designer 里已有同类卡片的 JSON 发给我；或者改用 §4.10 笛卡尔 heatmap（x=日期周一到周日、y=月份）作为替代"。

---

## §5 完整示例（直接可复制 / 已用 24 列网格 + 美化预设）

### 示例 1 · 模板 A 主趋势 渐变面积折线（清新蓝主题，width=16）

```json
{
  "name": "近 7 日访问量",
  "type": "ProChart",
  "scope": "<dashboardId>",
  "width": 16,
  "height": 10,
  "enableCardStyle": true,
  "cardStyle": {
    "bgType": "image", "bgColor": "#FFFFFF",
    "padding": 16, "paddingTop": 12, "paddingRight": 16, "paddingBottom": 12, "paddingLeft": 16,
    "borderRadius": 12, "borderWidth": 0,
    "titleFontSize": "16px", "titleFontWeight": "600", "titleColor": "#5D7092",
    "titlePosition": "left"
  },
  "proChartSetting": {
    "title": { "show": false },
    "legend": { "show": false },
    "tooltip": {
      "show": true, "trigger": "axis",
      "backgroundColor": "rgba(255,255,255,0.96)",
      "borderColor": "#5B8FF9", "borderWidth": 1,
      "padding": [8, 12, 8, 12],
      "textStyle": { "color": "#5D7092", "fontSize": 12 },
      "axisPointer": { "type": "shadow", "shadowStyle": { "color": "rgba(91,143,249,0.08)" } }
    },
    "grid": [{ "top": "30px", "left": "16px", "right": "24px", "bottom": "16px", "containLabel": true, "show": false }],
    "xAxis": [{
      "type": "category", "boundaryGap": false,
      "axisLine": { "show": true, "lineStyle": { "color": "#E5E7EB", "width": 1 } },
      "axisTick": { "show": false },
      "axisLabel": { "color": "#5D7092", "fontSize": 11, "margin": 12 }
    }],
    "yAxis": [{
      "type": "value",
      "axisLine": { "show": false },
      "axisTick": { "show": false },
      "axisLabel": { "color": "#5D7092", "fontSize": 11 },
      "splitLine": { "show": true, "lineStyle": { "color": "#F0F1F5", "type": "dashed" } }
    }],
    "dataset": [{
      "id": "ds1", "name": "数据源1", "type": "table",
      "tableId": "<真实表ID>",
      "aggregation": true,
      "groupByFieldList": ["createDate"],
      "aggregationQueryList": [{ "func": "count" }],
      "dimensionList": [
        { "id": "createDate", "name": "日期" },
        { "id": "count", "name": "数量" }
      ],
      "orderByList": [{ "field": "createDate", "type": "asc" }]
    }],
    "series": [{
      "id": "s1", "name": "访问量", "type": "line",
      "lineSetting": {
        "datasetIndex": 0,
        "encode": { "x": ["createDate"], "y": ["count"] },
        "smooth": true,
        "symbol": "emptyCircle", "symbolSize": 6, "showSymbol": false,
        "lineStyle": { "width": 3, "shadowColor": "#85B4FF", "shadowBlur": 10, "shadowOffsetY": 6 },
        "areaStyle": {
          "color": {
            "type": "linear", "x": 0, "y": 0, "x2": 0, "y2": 1,
            "colorStops": [
              { "offset": 0, "color": "#85B4FF" },
              { "offset": 1, "color": "#85B4FF00" }
            ]
          }
        }
      },
      "itemStyle": { "color": "#5B8FF9", "borderColor": "#FFFFFF", "borderWidth": 2 },
      "emphasis": { "focus": "series" }
    }]
  }
}
```

### 示例 2 · 模板 A 分布饼图 普通扇形 + 外标签（清新蓝，width=12）

```json
{
  "name": "内容来源占比",
  "type": "ProChart",
  "scope": "<dashboardId>",
  "width": 12,
  "height": 10,
  "enableCardStyle": true,
  "cardStyle": {
    "bgType": "image", "bgColor": "#FFFFFF",
    "padding": 16, "borderRadius": 12,
    "titleFontSize": "16px", "titleFontWeight": "600", "titleColor": "#5D7092",
    "titlePosition": "left"
  },
  "proChartSetting": {
    "title": { "show": false },
    "legend": {
      "show": true, "top": "0", "left": "center", "orient": "horizontal",
      "icon": "roundRect", "itemGap": 16, "itemWidth": 12, "itemHeight": 8,
      "textStyle": { "color": "#5D7092", "fontSize": 12 }
    },
    "tooltip": {
      "show": true, "trigger": "item",
      "backgroundColor": "rgba(255,255,255,0.96)",
      "borderColor": "#5B8FF9", "borderWidth": 1,
      "padding": [8, 12, 8, 12],
      "textStyle": { "color": "#5D7092", "fontSize": 12 }
    },
    "dataset": [{
      "id": "ds1", "name": "数据源1", "type": "table",
      "tableId": "<真实表ID>",
      "aggregation": true,
      "groupByFieldList": ["sourceType"],
      "aggregationQueryList": [{ "func": "count" }],
      "dimensionList": [
        { "id": "sourceType", "name": "来源" },
        { "id": "count", "name": "数量" }
      ]
    }],
    "series": [{
      "id": "s1", "name": "来源分布", "type": "pie",
      "pieSetting": {
        "datasetIndex": 0,
        "encode": { "itemName": "sourceType", "value": ["count"] },
        "radius": "70%",
        "center": ["50%", "55%"],
        "clockwise": true,
        "avoidLabelOverlap": true,
        "padAngle": 1,
        "label": {
          "show": true, "position": "outside",
          "color": "#5D7092", "fontSize": 12, "fontWeight": "500",
          "formatter": "{b}\n{d}%"
        },
        "labelLine": { "show": true, "length": 12, "length2": 12, "smooth": true },
        "itemStyle": {
          "borderColor": "#FFFFFF", "borderWidth": 2, "borderRadius": 4,
          "shadowColor": "rgba(0,0,0,0.12)", "shadowBlur": 10
        },
        "emphasis": { "label": { "fontSize": 14, "fontWeight": "bold" }, "scaleSize": 6 }
      },
      "colorBy": "data"
    }]
  }
}
```

### 示例 3 · 模板 A KPI 数字（清新蓝，4 个并排取第 1 个，width=6）

```json
{
  "name": "总访问量",
  "type": "Number",
  "scope": "<dashboardId>",
  "width": 6,
  "height": 4,
  "enableCardStyle": true,
  "cardStyle": {
    "bgType": "gradient", "bgColor": "#EEF4FF",
    "bgGradientColor": "linear-gradient(135deg, #DCE8FF 0%, #FFFFFF 100%)",
    "padding": 20, "borderRadius": 16, "borderWidth": 0,
    "titleFontSize": "14px", "titleFontWeight": "500", "titleColor": "#5D7092",
    "titlePosition": "left"
  },
  "numberSetting": {
    "tableId": "<真实表ID>",
    "aggregation": true,
    "aggregationQueryList": [{ "func": "count" }],
    "groupByFieldList": [],
    "orderByList": [],
    "xPosition": "center", "yPosition": "center",
    "title": "总访问量",
    "titleFontSize": 14,
    "color": "#5B8FF9",
    "titleColor": "#5D7092",
    "placeholderColor": "#5D7092",
    "fontSize": 32, "fontWeight": "bold",
    "format": "comma", "precision": 0, "unit": ""
  }
}
```

> 4 个 KPI 卡片按 §1 主题 1 的"KPI 淡彩底"循环：第 1 张 `#EEF4FF`、第 2 张 `#EAFBF3`、第 3 张 `#EEF0F5`、第 4 张 `#FEF7DF`；`numberSetting.color` 对应取主题调色盘前 4 色 `#5B8FF9` / `#5AD8A6` / `#5D7092` / `#F6BD16`。

### 示例 4 · 模板 A 副趋势 横向药丸柱状图（清新蓝，width=8）

```json
{
  "name": "今日转评赞统计",
  "type": "ProChart",
  "scope": "<dashboardId>",
  "width": 8,
  "height": 10,
  "enableCardStyle": true,
  "cardStyle": {
    "bgType": "image", "bgColor": "#FFFFFF",
    "padding": 16, "borderRadius": 12,
    "titleFontSize": "16px", "titleFontWeight": "600", "titleColor": "#5D7092",
    "titlePosition": "left"
  },
  "proChartSetting": {
    "title": { "show": false },
    "legend": { "show": false },
    "tooltip": {
      "show": true, "trigger": "axis",
      "backgroundColor": "rgba(255,255,255,0.96)",
      "borderColor": "#5B8FF9", "borderWidth": 1,
      "padding": [8, 12, 8, 12],
      "textStyle": { "color": "#5D7092", "fontSize": 12 }
    },
    "grid": [{ "top": "30px", "left": "16px", "right": "24px", "bottom": "16px", "containLabel": true, "show": false }],
    "xAxis": [{ "type": "value", "show": false }],
    "yAxis": [{
      "type": "category",
      "axisLine": { "show": false }, "axisTick": { "show": false },
      "axisLabel": { "color": "#5D7092", "fontSize": 12, "fontWeight": "500" }
    }],
    "dataset": [{
      "id": "ds1", "name": "数据源1", "type": "table",
      "tableId": "<真实表ID>",
      "aggregation": true,
      "groupByFieldList": ["actionType"],
      "aggregationQueryList": [{ "func": "count" }],
      "dimensionList": [
        { "id": "actionType", "name": "行为" },
        { "id": "count", "name": "数量" }
      ]
    }],
    "series": [{
      "id": "s1", "name": "转评赞", "type": "bar",
      "barSetting": {
        "datasetIndex": 0,
        "encode": { "x": ["count"], "y": ["actionType"] },
        "barMaxWidth": 60,
        "itemStyle": {
          "color": {
            "type": "linear", "x": 0, "y": 0, "x2": 1, "y2": 0,
            "colorStops": [
              { "offset": 0, "color": "#85B4FF" },
              { "offset": 1, "color": "#3366E5" }
            ]
          },
          "borderRadius": [0, 30, 30, 0],
          "shadowColor": "rgba(51,102,229,0.2)", "shadowBlur": 8, "shadowOffsetX": 4
        },
        "label": {
          "show": true, "position": "insideRight", "formatter": "{c}",
          "color": "#FFFFFF", "fontWeight": "bold", "fontSize": 13
        }
      },
      "colorBy": "data"
    }]
  }
}
```

---

## §6 生成流程（AI 必须按此顺序执行）

创建仪表盘并填充卡片时：

1. **判断业务场景** → 选 §1 的主题（默认主题 1）
2. **判断卡片数量与性质** → 选 §3 的模板（卡片 ≤4 用 F，5-8 用 A，9-12 用 D/G，13-15 用 H，16+ 用 I/J）
3. **为每张图表选图表类型** → 按 §4.0 数据形状决策树挑（趋势用 line、占比用 pie、对比用 bar、漏斗用 funnel、层级占比用 treemap/sunburst、热度用 heatmap）。**严禁所有图都用 bar 或 pie，必须有 line / radar / gauge / funnel 等其它类型来丰富层次**。
4. **规划网格布局**：列出"卡片名 + type + width + height + 数据源 + 图表系列"，**在思考里逐行验算 width 和 = 24**。如果某一行加不到 24，回到模板表重新选尺寸，**不要让某一行只有 12 或 18 这种半残行**。
5. **调 `_create_dashboard_module`** 创建仪表盘
6. **按模板顺序逐张调** `_save_dashboard_number_card` 或 `_save_dashboard_prochart_card`：
   - cardStyle 用 §2.1 通用预设（KPI 必须用 §2.1 的 KPI 覆盖版：**`bgType="gradient"` + `bgGradientColor` 渐变字符串**；写成 `image`/`color` 都会让渐变失效）
   - numberSetting 必须 xPosition/yPosition 全 center；不要传 subTitle 字段（DashboardCardDefine 顶层）
   - proChartSetting 用 §4 的对应预设；柱状图必须 `barMaxWidth: 60` 不要 barWidth 百分比
   - 颜色严格用 §1 主题调色盘**按 series 索引循环**；折线 areaStyle / 柱状 itemStyle / 仪表盘 progress 必须用 LinearGradient
7. **不要随意调整 width/height**：模板已经规划好的尺寸不要改

---

## §7 反面教材（AI 不要这样做）

- ❌ 一行 width 加起来 = 12（**应 = 24**），导致右半边空白或下一张卡塞过来
- ❌ 把模板 A 的 KPI 写成 width=3（旧 12 列基准）—— 4 张并排只占半行
- ❌ 4 个 KPI 数字卡片每个用了不同主题色（应共用调色盘前 4 色）
- ❌ 折线图没开 `smooth`、没填 `areaStyle` 渐变（应默认开 + 用 LinearGradient）
- ❌ 折线 areaStyle 用纯色 + opacity 0.4（**应用 LinearGradient 从主题色到末尾 `00`**）
- ❌ 柱状图 `borderRadius: 0` 或纯单色（应默认 `[8,8,0,0]` + LinearGradient）
- ❌ 柱状图没数据标签（`label.show:false`）—— 应默认开顶部标签
- ❌ 饼图所有卡片都默认环形 `radius: ["55%","78%"]`（**默认应为普通扇形 `radius: "70%"`**；仅在用户明确说"环形"或卡片中心要放总数时才用环形）
- ❌ 饼图实心 + 没 borderColor/borderWidth/padAngle（**应** `padAngle: 1` + `borderColor:"#FFFFFF"` + `borderWidth: 2` + `borderRadius: 4` 保留段间白缝和段角圆滑）
- ❌ 饼图 `label.show:false`（应默认开 `formatter: "{b}\n{d}%"`）
- ❌ 多个卡片宽度都填 12 或 24（应按模板分配 6/8/12/16）
- ❌ Number 卡片用纯白底（标准 KPI 应使用 §1 KPI 淡彩底，让卡片有视觉重量）
- ❌ Number 卡片的 unit 填了"个"但实际是访问数（应留空或贴合业务）
- ❌ 在同一仪表盘里混用主题1 和主题2 的颜色
- ❌ tooltip 用 ECharts 默认黑底（应改为 `rgba(255,255,255,0.96)` 白底 + 主题色边框）
- ❌ yAxis splitLine 用实线（应改为 `type: "dashed"` 虚线 + `color: "#F0F1F5"`）
- ❌ 设置 DashboardCardDefine.subTitle = name 文本（重复显示，应直接不传 subTitle）
- ❌ Number 卡片 xPosition="left" yPosition="center"（数字偏左和卡片左上 name 挤一起；**应 center/center 让数字+title 居中**）
- ❌ KPI 卡片用 bgType="color"/"image" + bgGradientColor（**bgType 必须是 "gradient"** 才会渲染渐变；写其它值时 bgGradientColor 完全不生效，背景退化为纯色）
- ❌ 柱状图用 `barWidth: "50%"`（应改 `barMaxWidth: 60` 防止少列时柱体过粗）
- ❌ 所有图都选 bar 或 pie，没有 line / radar / gauge / funnel 等其它图（应按 §4.0 数据形状决策树多样化）
- ❌ pie 段数 ≥ 20（应改 treemap 或 bar 横向）
- ❌ AI 主动生成 calendarHeatmap（**日历热力配置未明确，必须先让用户提供参考 JSON**；candlestick / boxplot 已支持，见 §4.13 / §4.14）
- ❌ candlestick 用 barWidth 字符串百分比（应是数字像素，如 `barWidth: 10`，K 线柱体本身就要细窄）
- ❌ boxplot 的 `encode.y` 不是 5 元组（必须严格 `[min, q1, q2, q3, max]` 五字段）
- ❌ heatmap 没配 visualMap 或 dimension 不指向 value 列（必须 `dimension: 2`、`seriesIndex`/`datasetIndex` 都填，否则映射不生效）
