with one click
report-generation
生成数据分析报告:探索表结构 → 多维度查询 → 智能深度分析归因 → 动态风格 HTML 可视化报告(ECharts)
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Menu
生成数据分析报告:探索表结构 → 多维度查询 → 智能深度分析归因 → 动态风格 HTML 可视化报告(ECharts)
Install with Codex or Claude Copy this prompt, paste it into Codex, Claude, or another assistant, and let it review the skill page and install it for you.
Based on SOC occupation classification
Comprehensive PDF manipulation toolkit for extracting text and tables, creating new PDFs, merging/splitting documents, and handling forms. When Claude needs to fill in a PDF form or programmatically process, generate, or analyze PDF documents at scale.
所有联网操作必须通过此 skill 处理,包括:搜索、网页抓取、登录后操作、网络交互等。 触发场景:用户要求搜索信息、查看网页内容、访问需要登录的网站、操作网页界面、抓取社交媒体内容(小红书、微博、推特等)、读取动态渲染页面、以及任何需要真实浏览器环境的网络任务。
用于编写和执行 SQL 查询 - 支持多维度分析、多条 SQL 协同、智能图表推荐
用于发现和理解数据库结构、表、列和关系,支持 M-Schema 格式输出,智能表过滤
| name | report-generation |
| description | 生成数据分析报告:探索表结构 → 多维度查询 → 智能深度分析归因 → 动态风格 HTML 可视化报告(ECharts) |
当用户要求生成报告、分析报告、可视化报告、趋势分析、统计报告等任何报告时。
upload_html_report_to_minio 等)从用户诉求中提取:
sql_db_list_tables → 获取所有表列表sql_db_schema → 获取筛选后表的列名和类型(一次传入多表)sql_db_table_relationship → 获取表关系根据报告需求,生成多条 SQL 获取不同维度的数据:
| 报告需要 | 查询策略 |
|---|---|
| KPI 汇总 | 聚合查询(SUM/COUNT/AVG) |
| 时间趋势 | DATE_TRUNC/DATE_FORMAT + GROUP BY 时间 + ORDER BY ASC |
| 分类对比 | GROUP BY 类别 + ORDER BY DESC |
| Top N 排名 | ORDER BY DESC LIMIT N |
| 占比分析 | GROUP BY + 百分比计算 |
| 增长率 | 窗口函数 LAG() 或自连接 |
| 归因分解 | 多维度 GROUP BY + 增量贡献 |
查询原则:
SELECT *使用 sql_db_query 逐条执行 SQL,收集所有结果数据。
执行失败时:
查询到数据后,必须先深度分析再生成报告。
根据数据特征自动判断适用的分析维度:
| 数据特征 | 触发的分析维度 | 说明 |
|---|---|---|
| 包含时间字段 + 数值指标 | 趋势分析 | 计算同比/环比、识别拐点、判断趋势方向和加速度 |
| 包含分类字段 + 数值指标 | 结构分析 | 各分类占比、帕累托分析(80/20)、集中度分析 |
| 包含多个分类维度 | 归因分析 | 维度下钻、贡献度量化、交叉分析 |
| 存在可对比的分组 | 对比分析 | Top N / Bottom N 排名、组间差异 |
| 数值分布范围大 | 异常检测 | 均值±2σ、离群值识别 |
| 包含率/比值指标 | 效率分析 | 转化率、完成率的横向和纵向对比 |
| 多指标同时存在 | 相关性分析 | 指标间关联关系、协同/对冲效应 |
| 用户问"为什么" | 因果探索 | 可能的驱动因素假设、影响链路推测 |
至少完成 3 个分析维度。
A. 趋势分析 — How is it changing
B. 结构分析 — What's the composition
C. 归因分析 — Why did it happen(核心,当数据支持时必须执行)
D. 对比分析 — How does it compare
E. 异常检测 — What's unusual
每个被选中的分析维度必须输出:
核心发现(3-5 条,必须带具体数字):
风险提示(如果存在):
可执行建议(分短期/中期/长期):
第 5 步的所有分析结果必须写入 HTML 报告中。
必须参考 frontend-design 技能的设计原则,为每份报告创造独特的视觉风格,避免千篇一律。
风格设计流程:
确定报告基调:根据数据场景选择基础方向
应用 frontend-design 设计原则(参考该技能文档):
每份报告的风格必须不同:在暗色/亮色主题、不同字体、不同美学之间变化,避免多次生成趋同于同一种风格
报告 HTML 的 <body> 必须按顺序包含以下 6 个区块(缺一不可):
| # | 区块 | HTML 结构 | 内容要求 |
|---|---|---|---|
| 1 | 报告标题 | <header class="report-header"> | 报告名称 + 时间范围 + 数据库信息 |
| 2 | KPI 统计卡片 | <section class="kpi-cards"> | 3-6 个关键指标卡片,每个包含:指标名、数值、同比/环比变化(↑绿↓红),悬停有微动效 |
| 3 | 可视化图表 | <section class="charts"> | 至少 2 个 ECharts 图表,根据数据特征动态选择类型 |
| 4 | 详细数据表格 | <section class="data-table"> | 完整数据列表,斑马纹+悬停高亮,关键行高亮,超 20 行时表格内滚动 |
| 5 | 深度分析与归因 | <section class="deep-analysis"> | 必须包含,内容来自第 5 步的动态分析结果 |
| 6 | 结论与建议 | <section class="conclusions"> | 核心发现 + 风险提示 + 可操作建议(短/中/长期) |
| 数据特征 | 推荐图表 | ECharts 配置要点 |
|---|---|---|
| 时间序列 | 面积折线图 | areaStyle + smooth: true + 渐变填充 |
| 分类排名 | 水平柱状图 | yAxis 做类别轴 + 渐变色条 + 数据标签 |
| 占比结构 | 环形图 | radius: ['40%', '70%'] + 中心统计文字 |
| 多维对比 | 分组柱状图 | 多 series + barGap 调整间距 |
| 变化归因 | 瀑布图 | 堆叠柱状图模拟,正值绿色负值红色 |
| 趋势+量 | 双轴图 | yAxis 数组 + 柱线组合 |
| 综合评估 | 雷达图 | 多维度能力画像 |
| 帕累托 | 组合图 | 柱状 + 累积线 |
<section class="deep-analysis">
<h2>深度分析与归因</h2>
<!-- 动态生成的分析区块 —— 每个被选中的分析维度一个 -->
<div class="analysis-block">
<h3>{分析维度标题}</h3>
<div class="analysis-content">
<p>{核心发现描述,必须带具体数字}</p>
<!-- 该维度对应的 ECharts 图表 -->
<div class="analysis-chart" id="analysis-chart-{n}" style="height:350px"></div>
<!-- 如有归因数据,展示贡献度表格 -->
<table class="attribution-table">
<thead><tr><th>维度</th><th>贡献值</th><th>贡献占比</th><th>变化方向</th></tr></thead>
<tbody>
<tr>
<td>{维度名}</td>
<td>{+/-数值}</td>
<td>
<div class="progress-bar">
<div class="progress-fill positive" style="width: {百分比}%"></div>
<span>{百分比}%</span>
</div>
</td>
<td class="trend-up">↑</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- 风险提示(如果存在异常数据) -->
<div class="risk-alert">
<h3>风险提示</h3>
<ul>
<li><strong>{异常类型}:</strong>{具体数字 + 影响说明 + 建议关注点}</li>
</ul>
</div>
</section>
<section class="conclusions">
<h2>结论与建议</h2>
<div class="findings">
<h3>核心发现</h3>
<ol>
<li>
<div class="finding-item">
<span class="finding-badge">发现 1</span>
<p>{发现内容,必须带具体数字和百分比}</p>
</div>
</li>
<!-- 3-5 条核心发现 -->
</ol>
</div>
<div class="recommendations">
<h3>行动建议</h3>
<div class="rec-timeline">
<div class="rec-item rec-short">
<div class="rec-label">短期 (1-2周)</div>
<ul><li>{具体可操作建议,包含预期效果}</li></ul>
</div>
<div class="rec-item rec-mid">
<div class="rec-label">中期 (1-3月)</div>
<ul><li>{具体可操作建议,包含预期效果}</li></ul>
</div>
<div class="rec-item rec-long">
<div class="rec-label">长期 (3-12月)</div>
<ul><li>{具体可操作建议,包含预期效果}</li></ul>
</div>
</div>
</div>
</section>
必须使用的技术栈:
https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js)backdrop-filter 玻璃效果 + CSS Grid/Flexbox 响应式布局ECharts 主题配色方案:
// 动态主题色板 - 根据场景选择
const PALETTES = {
business: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4'],
tech: ['#00d4ff', '#7c4dff', '#00e676', '#ff6d00', '#2979ff', '#651fff', '#00b0ff', '#d500f9'],
warm: ['#ff6b6b', '#ffa06b', '#ffd93d', '#6bcb77', '#4d96ff', '#9b59b6', '#1abc9c', '#e74c3c'],
cool: ['#667eea', '#764ba2', '#36d1dc', '#5b86e5', '#06beb6', '#48b1bf', '#4568dc', '#b06ab3']
};
CSS 核心变量系统(每份报告根据风格动态定制,以下仅为参考结构):
:root {
/* 主色调 — 每次根据报告场景和 frontend-design 原则选择不同配色 */
--primary: /* 动态选择 */;
--primary-light: /* 主色浅色变体 */;
--primary-dark: /* 主色深色变体 */;
--accent: /* 强调色,与主色形成对比 */;
/* 背景系统 — 暗色/亮色/渐变均可 */
--bg-main: /* 动态选择 */;
--bg-card: /* 卡片背景 */;
--bg-card-hover: /* 卡片悬停 */;
/* 文字层次 */
--text-primary: /* 主文字 */;
--text-secondary: /* 次要文字 */;
--text-muted: /* 辅助文字 */;
/* 状态色 */
--success: #10b981;
--warning: #f59e0b;
--danger: #ef4444;
--info: #3b82f6;
/* 玻璃效果(可选,适合暗色主题) */
--glass-bg: rgba(255, 255, 255, 0.05);
--glass-border: rgba(255, 255, 255, 0.1);
--glass-blur: 12px;
/* 布局 */
--radius: 16px;
--radius-sm: 8px;
--shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}
关键 CSS 组件样式:
/* 玻璃拟态卡片 */
.glass-card {
background: var(--glass-bg);
backdrop-filter: blur(var(--glass-blur));
border: 1px solid var(--glass-border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
/* KPI 卡片悬停效果 */
.kpi-card {
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.kpi-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: linear-gradient(90deg, var(--primary), var(--accent));
}
.kpi-card:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(102, 126, 234, 0.15);
}
/* 归因贡献度进度条 */
.progress-bar {
position: relative;
background: rgba(255,255,255,0.1);
border-radius: 12px;
height: 24px;
overflow: hidden;
}
.progress-fill.positive {
background: linear-gradient(90deg, #10b981, #34d399);
}
.progress-fill.negative {
background: linear-gradient(90deg, #ef4444, #f87171);
}
/* 归因分析区块高亮边框 */
.analysis-block.attribution {
border-left: 4px solid var(--accent);
}
/* 建议时间线 */
.rec-timeline {
position: relative;
padding-left: 24px;
border-left: 2px solid var(--glass-border);
}
.rec-item::before {
content: '';
position: absolute;
left: -29px; top: 22px;
width: 12px; height: 12px;
border-radius: 50%;
border: 2px solid;
}
.rec-short::before { border-color: var(--success); background: rgba(16,185,129,0.2); }
.rec-mid::before { border-color: var(--info); background: rgba(59,130,246,0.2); }
.rec-long::before { border-color: var(--accent); background: rgba(124,77,255,0.2); }
/* 核心发现徽章 */
.finding-badge {
display: inline-block;
padding: 2px 10px;
border-radius: 12px;
font-size: 12px;
font-weight: 600;
background: var(--primary);
color: white;
}
/* 表格 */
.data-table table {
width: 100%;
border-collapse: collapse;
}
.data-table tr:nth-child(even) {
background: var(--table-stripe);
}
.data-table tr:hover {
background: var(--bg-card-hover);
}
用分隔符包裹 HTML 直接输出:
根据查询结果,为您生成数据分析报告:
<!-- REPORT_HTML_START -->
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{报告标题}</title>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<style>...完整CSS...</style>
</head>
<body>
<div class="report-container">
<!-- 6 个必需区块 -->
</div>
<script>...ECharts 初始化代码...</script>
</body>
</html>
<!-- REPORT_HTML_END -->
**报告已生成完毕**,包含:
- [图表1说明]
- [图表2说明]
- 详细数据表格
- 深度分析与归因
- 结论与建议
关键:
<!-- REPORT_HTML_START --> 和 <!-- REPORT_HTML_END --> 必须独占一行</body> 之前的 <script> 中| 模式 | 查询策略 | 推荐图表 |
|---|---|---|
| 时间趋势 | DATE_TRUNC + GROUP BY 月份 | 面积折线图 |
| 类别对比 | GROUP BY 类别 + ORDER BY | 柱状图 |
| Top N 排名 | ORDER BY DESC LIMIT N | 水平柱状图 |
| 占比分析 | GROUP BY + 百分比计算 | 环形图 |
| 增长率分析 | 窗口函数 LAG() | 折线图 + 数据标签 |
| 归因分解 | 多维度 GROUP BY + 增量贡献 | 瀑布图/堆叠柱状图 |
| 异常检测 | 均值 ± 2σ 标记异常 | 折线图 + 红色标注 |
| 帕累托分析 | 累积占比计算 | 组合图(柱状 + 累积线) |
执行流程:
sql_db_list_tables → 智能过滤出 orders, products, customerssql_db_schema("orders, products, customers") → 获取 schemasql_db_table_relationship("orders, products, customers") → 获取关系GROUP BY month ORDER BY month)GROUP BY category ORDER BY sales DESC)sql_db_query 逐条执行# 错误:工作流中途停顿
用户: 生成一个销售报告
Claude: "我找到了相关表,要继续吗?" ← 禁止
Claude: "数据查询完毕,要生成报告吗?" ← 禁止
Claude: "用什么风格的报告?" ← 禁止
# 正确:一次性完成全部流程,自动决策所有选项。