概述
把结构化数据（指标、对比、趋势）生成带图表的可视化数据报告 HTML 单页，零外链、可直接演示或分发。
触发词
数据报告页、数据报告、可视化报告、图表报告、报告页、数据看板页
工作流
- 确定报告主题与核心结论，整理指标数据（可用表格录入）。
- 用内联 SVG/Canvas 绘制柱状/折线/饼图（不引外部库）。
- 组装报告页：标题、关键结论、图表区、明细表、附注。
- 输出单文件 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，禁止引外部图表库（保持零外链）。
- 示例数据用中性占位，不写真实个人/业务机密。
- 结论须与数据对应，禁止编造未提供的数据。
大白话说明
你把数字和结论给我，我做成一页带图表的报告，开会直接投屏，谁都能看懂。
