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

数据报告页生成器（生成即用·数据报告HTML）

当用户需要数据报告页时，本技能用于把结构化数据生成带图表的可视化数据报告 HTML 单页，零外链、可直接演示或分发。

personAuthor: user_af163eaahubcommunity
downloadDownload package

概述

把结构化数据（指标、对比、趋势）生成带图表的可视化数据报告 HTML 单页，零外链、可直接演示或分发。

触发词

数据报告页、数据报告、可视化报告、图表报告、报告页、数据看板页

工作流

  1. 确定报告主题与核心结论，整理指标数据（可用表格录入）。
  2. 用内联 SVG/Canvas 绘制柱状/折线/饼图（不引外部库）。
  3. 组装报告页：标题、关键结论、图表区、明细表、附注。
  4. 输出单文件 HTML，本地打开即看，可投影或转发。

产出物（生成即用·数据报告HTML）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>数据报告</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:-apple-system,"PingFang SC",sans-serif;background:#f0f2f5;color:#222;padding:24px}
  .card{max-width:860px;margin:0 auto;background:#fff;border-radius:14px;padding:28px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
  h1{font-size:24px;margin-bottom:6px}
  .kpis{display:flex;gap:14px;margin:20px 0}
  .kpi{flex:1;background:#f6f8ff;border-radius:10px;padding:16px;text-align:center}
  .kpi b{display:block;font-size:26px;color:#3b5bff}
  .chart{display:flex;align-items:flex-end;gap:14px;height:200px;padding:10px 0}
  .bar{flex:1;background:linear-gradient(180deg,#6a5cff,#9b8cff);border-radius:6px 6px 0 0}
  table{width:100%;border-collapse:collapse;margin-top:18px}
  td{padding:9px 12px;border-bottom:1px solid #eee;font-size:14px}
</style>
</head>
<body>
<div class="card">
  <h1>季度数据报告</h1>
  <p style="color:#888">核心结论：整体增长，渠道 B 表现最佳。</p>
  <div class="kpis">
    <div class="kpi"><b>128</b>总销量(万)</div>
    <div class="kpi"><b>+18%</b>环比</div>
    <div class="kpi"><b>92</b>满意度</div>
  </div>
  <div class="chart">
    <div class="bar" style="height:60%"></div><div class="bar" style="height:80%"></div>
    <div class="bar" style="height:45%"></div><div class="bar" style="height:95%"></div>
  </div>
  <table><tr><td>渠道 A</td><td>38 万</td></tr><tr><td>渠道 B</td><td>52 万</td></tr><tr><td>渠道 C</td><td>38 万</td></tr></table>
</div>
</body>
</html>

使用示例

输入：3 个 KPI + 4 根柱状数据 + 结论 → 生成带图表的数据报告单页，可用于周会演示。

红线（必须遵守）

  • 图表用内联 SVG/Canvas，禁止引外部图表库（保持零外链）。
  • 示例数据用中性占位，不写真实个人/业务机密。
  • 结论须与数据对应，禁止编造未提供的数据。

大白话说明

你把数字和结论给我，我做成一页带图表的报告，开会直接投屏，谁都能看懂。