shield_lock
JinDaGe
← Back to skills
extension
Category: Data & AnalyticsNo API key required

数据可视化报告生成

数据可视化报告生成器。将 Excel 统计数据 / Markdown 分析报告 / Word 文档转化为单文件 HTML 可视化报告。 支持独立触发或被其他技能作为下游收口调用。 触发词：可视化报告、数据可视化、生成 HTML 报告、数据看板、可视化看板。

personAuthor: user_01168feehubcommunity
downloadDownload package

数据可视化报告 SKILL

本 SKILL 将任意结构化数据（Excel 统计结果）和/或文本报告（MD/Word）转化为单文件 HTML 可视化报告。

执行架构

输入文件（Excel / MD / DOCX 任意组合）
    │
    ▼
[步骤1] 自动检测文件类型 → 确认输入
    │
    ▼
[步骤2] Python extract.py 提取数据 → _data_extract.json
    │
    ▼
[步骤3] AI 分析 JSON → 决定板块结构与图表类型
    │
    ▼
[步骤4] AI 手写完整 HTML → {输入基名}_可视化报告.html

执行步骤

步骤1：检测与确认输入

  1. 读取用户指定的所有输入文件路径
  2. 根据扩展名自动判断类型：.xlsx/.xls → Excel、.md → Markdown、.docx → Word
  3. 向用户确认检测结果（一句话，如"检测到 1 个 Excel（3 个 Sheet，共 1200 行）+ 1 个 MD 报告，开始生成可视化报告"）
  4. 读取设计规范 references/design_spec.md，确保后续输出符合标准

步骤2：提取数据

执行数据提取脚本：

python {skill_dir}/scripts/extract.py "<文件1>" "<文件2>" ...

脚本自动识别类型并提取，输出 _data_extract.json 到第一个输入文件所在目录。JSON 结构：

  • Excel 输入：每个 Sheet 的列名、行数、前 20 行样本、数值列统计摘要（min/max/mean/median）、分类列预览
  • Markdown 输入：章节结构、关键数字、关键段落（概述/发现/总结/建议）、全文前 5000 字符
  • Word 输入：段落结构、关键数字、全文前 5000 字符

步骤3：AI 决策板块结构

AI 读取 _data_extract.json，自主决定：

必须包含的固定板块（不可省略）：

  • 页头 Hero：报告标题、数据时间范围、数据总量、生成时间
  • 概览 KPI：4-5 个关键数字卡片
  • 页脚：数据来源 + 免责声明

可变板块（AI 视数据情况自主决定是否包含及如何呈现）：

  • 总结与建议：当输入含 MD/Word 报告且其中有「总结」「建议」章节时，提取呈现；仅 Excel 时可跳过
  • 其他数据图表板块：见下方决策逻辑

可变板块的决策逻辑：

单文件场景：

  • 如果输入只有 Excel：从 Sheet 结构推断板块 —— 每个有意义的 Sheet 对应一个板块，频数统计用柱状图/饼图，交叉统计用分组柱状图/堆叠图，趋势统计用折线图，数值聚合用柱状图+均值线
  • 如果输入只有文本报告：从 MD/Word 的章节结构生成板块 —— 每个二级标题对应一个板块，关键数字用 KPI 卡片突出，有对比数据时用图表呈现
  • 如果 Excel + 报告都有：以文本报告的结构为主干，Excel 数据作为图表的量化支撑

多文件场景（如 2-3 个 Excel）：

  • 首先区分文件角色：根据 Sheet 名称和数据结构判断每个 Excel 的用途 ——
    • 统计结果型：Sheet 名含「频数」「交叉」「趋势」「聚合」「分布」「占比」等词，行数较少、结构规整 → 这是图表的主要数据来源
    • 原始数据型：Sheet 名多为数据内容描述（如「2024年端午」），列多行多，有文本列 → 不作为直接图表来源，但可用于 KPI 计算（如总数据量、时间范围）
  • 合并策略：以统计结果型 Excel 为主生成图表板块；原始数据型 Excel 仅贡献 Hero 中的数据总量、时间范围等元信息
  • 多个统计结果型：全部纳入，每个统计 Excel 的 Sheet 各自对应板块。如果 Sheet 名重复或语义相近，合并为同一个图表的多系列
  • KPI 数据提取优先级：文本报告的 key_numbers > 统计 Excel 的 numeric_summary > 原始 Excel 的 numeric_summary
  • 输出文件名：以第一个统计结果型文件为基名；如果无法区分，以用户传入的第一个文件为基名

图表类型选择： | 数据特征 | 推荐图表 | |---------|---------| | 单列分类 + 频数 | 柱状图（ECharts）或饼图（Chart.js），类别 ≤ 6 用饼图，> 6 用柱状图 | | 两列分类交叉 | 分组柱状图（ECharts） | | 日期 + 数值 | 折线图（ECharts），多系列时用不同颜色 | | 多组数值对比 | 柱状图 + 均值参照线（ECharts） | | 单值百分比 | 纯 CSS 环形进度条 |

图表库选择：多维交互用 ECharts，轻量基础用 Chart.js，简单占比用纯 CSS。详见 references/design_spec.md。

板块决策落盘：步骤3 完成后，将板块决策结果输出为 {第一个输入文件基名}_板块规划.md，保存到第一个输入文件所在目录。内容包含：

  • 选定的固定板块和可变板块清单
  • 每个图表的标题、数据来源（哪个 Excel 的哪个 Sheet）、图表类型
  • 一句话说明每个板块的决策理由

步骤4：手写 HTML

AI 手写完整单文件 HTML（不通过 Python 脚本生成 HTML 本身），文件名为 {第一个输入文件的基名}_可视化报告.html。

技术要求：

  • 单文件，CSS/JS 全部内联
  • 图表库通过 CDN 链接引入（作为占位标记，步骤5 会自动内联为本地版本）
  • 所有数据直接内嵌在 JS 中，不依赖外部数据文件
  • 图表必须适配容器大小，ECharts 图表需添加 window.addEventListener('resize', () => chart.resize())
  • 图表导出：每个图表卡片右上角带下载按钮（hover 显示），点击下载为 PNG（2x 高清，文件名 = 图表标题）。页面顶部提供「导出全部图表」按钮，使用 JSZip 打包为 {原名}-图表.zip
    • ECharts：chart.getDataURL({type:'png', pixelRatio:2, backgroundColor:'#fff'})
    • Chart.js：canvas.toDataURL('image/png')
    • 纯 CSS 图表跳过，导出逻辑外套 try/catch 容错
    • JSZip CDN：https://cdn.jsdelivr.net/npm/jszip@3.10.1/dist/jszip.min.js，点击导出全部时动态加载
  • 详见 references/design_spec.md 图表导出规范

质量检查：

  • 不出现 undefined、NaN、{{placeholder}}
  • 图表容器有明确的宽高
  • 文件可在浏览器直接打开查看

设计规范详见 references/design_spec.md，关键要点：

  • 浅色仪表盘风格：白底 + #2563eb 品牌蓝 + 完整语义色板
  • KPI 卡片顶边色条区分类型（蓝/橙/绿/紫）
  • 图表根据关联关系灵活并排：相关图 .grid-2，同级小图 .grid-3
  • 图表下方可用 .insight-box 蓝底注解框直接标出结论
  • 每个板块带 01 02 编号的三段式 header，图表板块 ≥ 3 个时自动生成右侧悬浮导航
  • 字体用系统默认中文字体栈，卡片 12px 圆角 + 轻薄阴影，板块间 40px 留白
  • 主适配 1200px+ 桌面端，支持 @media print 打印样式

步骤5：内联 JS 库（离线化）

HTML 生成后，运行后处理脚本将 CDN 引用替换为本地内联版本：

python {skill_dir}/scripts/inline_assets.py "{HTML文件路径}"

脚本自动：

  • 找到 HTML 中的 ECharts / Chart.js CDN <script src> 标签
  • 用 assets/ 目录下的本地 JS 文件内容替换
  • 输出 100% 离线可用的 HTML，双击即开，无需任何网络

降级容错：步骤4 生成 HTML 时，在图表初始化代码外套 try/catch，渲染失败时显示「图表数据异常，请参考文字说明」提示，不影响 KPI / 总结 / 建议等文字板块。

输出

  • {输入基名}_可视化报告.html（单文件，100% 离线可用，浏览器双击即开）
  • {输入基名}_板块规划.md（板块决策文档，供审查和复现）
  • 中间文件 _data_extract.json 保留在输入文件同目录（供调试，可手动删除）