example.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>数据周报 · 2025 年 5 月</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+SC:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<style>
body { background:#fafaf7; font-family:'Inter','Noto Sans SC',sans-serif; color:#15140f; -webkit-font-smoothing:antialiased; }
.num { font-family:'Inter',sans-serif; font-feature-settings:'tnum' on; letter-spacing:-0.02em; }
.section h2 { font-size:11px; font-weight:700; letter-spacing:0.18em; text-transform:uppercase; color:#5a564e; margin:0 0 16px; }
table { border-collapse:collapse; width:100%; font-size:13px; }
thead th { background:#f4f1ec; text-align:left; padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#5a564e; position:sticky; top:0; }
tbody td { padding:10px 14px; border-bottom:1px solid #e7e5e0; }
tbody tr:nth-child(even) { background:#fbfaf7; }
tbody tr:hover { background:#f4f1ec; }
.delta-up { color:#1f7a3a; font-weight:600; }
.delta-down { color:#9c2a25; font-weight:600; }
</style>
</head>
<body>
<div class="max-w-6xl mx-auto px-8 py-12">
<header class="pb-7 mb-8 border-b border-[#e7e5e0]">
<div class="flex items-baseline justify-between flex-wrap gap-3">
<div>
<div class="text-[11px] font-semibold tracking-[0.22em] uppercase text-[#c96442] mb-2">Weekly Report · Week 19</div>
<h1 class="text-4xl font-extrabold tracking-tight">数据周报 · 2025 年 5 月</h1>
</div>
<div class="text-xs text-[#5a564e] text-right">
<div>来源: <span class="font-semibold text-[#15140f]">内部 BI</span></div>
<div>截止 <span class="font-mono text-[#15140f]">2025-05-11</span></div>
</div>
</div>
<p class="mt-3 text-sm text-[#5a564e] max-w-2xl leading-relaxed">本周关键指标全部向好。MAU 同比增长 184%, 付费转化与流失双双改善。</p>
</header>
<section class="section mb-10">
<h2>核心指标 · KPI</h2>
<div class="grid grid-cols-2 md:grid-cols-4 gap-4">
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
<div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">月活用户 · MAU</div>
<div class="text-3xl font-extrabold num">23,950</div>
<div class="text-xs mt-2"><span class="delta-up">▲ 16.0%</span> <span class="text-[#5a564e]">vs 上月</span></div>
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi1"></canvas></div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
<div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">新增 · Signups</div>
<div class="text-3xl font-extrabold num">4,250</div>
<div class="text-xs mt-2"><span class="delta-up">▲ 15.5%</span> <span class="text-[#5a564e]">vs 上月</span></div>
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi2"></canvas></div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
<div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">付费 · Paying</div>
<div class="text-3xl font-extrabold num">2,418 <span class="text-base text-[#5a564e]">/ 10.1%</span></div>
<div class="text-xs mt-2"><span class="delta-up">▲ 18.5%</span> <span class="text-[#5a564e]">vs 上月</span></div>
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi3"></canvas></div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0] shadow-[0_1px_0_#f0ece5]">
<div class="text-[11px] font-semibold uppercase tracking-wider text-[#5a564e] mb-2">流失 · Churn</div>
<div class="text-3xl font-extrabold num">1.8%</div>
<div class="text-xs mt-2"><span class="delta-up">▼ 0.1pp</span> <span class="text-[#5a564e]">vs 上月</span></div>
<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi4"></canvas></div>
</div>
</div>
</section>
<section class="section mb-10">
<h2>趋势 · Growth</h2>
<div class="grid lg:grid-cols-3 gap-4">
<div class="lg:col-span-2 rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-sm font-semibold mb-3">MAU & 付费用户增长</div>
<div style="position:relative;height:260px"><canvas id="chart-main"></canvas></div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-sm font-semibold mb-3">流失率 · 月度</div>
<div style="position:relative;height:260px"><canvas id="chart-churn"></canvas></div>
</div>
</div>
</section>
<section class="section mb-10">
<h2>明细 · Raw data</h2>
<div class="rounded-2xl border border-[#e7e5e0] overflow-hidden bg-white">
<table>
<thead><tr><th>月份</th><th class="text-right">MAU</th><th class="text-right">新增</th><th class="text-right">付费</th><th class="text-right">流失率</th></tr></thead>
<tbody id="rows"></tbody>
</table>
</div>
</section>
<section class="section mb-10">
<h2>洞察 · Insights</h2>
<div class="grid md:grid-cols-3 gap-4">
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-3xl mb-2">📈</div>
<div class="font-semibold mb-1.5">MAU 半年增长 184%</div>
<div class="text-sm text-[#5a564e] leading-relaxed">主要来自小红书自然流量, 单条爆款笔记带来 8k+ 新增。</div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-3xl mb-2">💰</div>
<div class="font-semibold mb-1.5">付费转化 7.3% → 10.1%</div>
<div class="text-sm text-[#5a564e] leading-relaxed">团队 Pro 套餐贡献最大。新引导流程 + 30 天试用是关键。</div>
</div>
<div class="rounded-2xl bg-white p-5 border border-[#e7e5e0]">
<div class="text-3xl mb-2">🎯</div>
<div class="font-semibold mb-1.5">月流失 3.4% → 1.8%</div>
<div class="text-sm text-[#5a564e] leading-relaxed">AI 起草功能上线后, 沉默用户激活率翻倍。</div>
</div>
</div>
</section>
<details class="mt-12 rounded-xl border border-[#e7e5e0] bg-white p-5">
<summary class="cursor-pointer text-sm font-semibold text-[#5a564e] flex items-center justify-between">
方法论 · Methodology <span class="text-[#5a564e]">▾</span>
</summary>
<div class="text-xs text-[#5a564e] leading-relaxed mt-3 max-w-3xl">
MAU = 30 天内至少打开一次产品的去重用户。付费 = 当月有效付费订阅。流失率 = 上月付费但本月未续的比例。数据来自内部 BI, 已剔除测试账号与 bot。
</div>
</details>
</div>
<script>
const data = [
{month:'2024-09', mau:8420, signups:1240, paying:612, churn:0.034},
{month:'2024-10', mau:9180, signups:1380, paying:701, churn:0.031},
{month:'2024-11', mau:10240, signups:1610, paying:840, churn:0.028},
{month:'2024-12', mau:11800, signups:1890, paying:1012, churn:0.025},
{month:'2025-01', mau:13620, signups:2240, paying:1218, churn:0.023},
{month:'2025-02', mau:15440, signups:2680, paying:1455, churn:0.021},
{month:'2025-03', mau:17890, signups:3120, paying:1722, churn:0.020},
{month:'2025-04', mau:20640, signups:3680, paying:2041, churn:0.019},
{month:'2025-05', mau:23950, signups:4250, paying:2418, churn:0.018},
];
document.getElementById('rows').innerHTML = data.map(d => `
<tr>
<td class="font-mono text-xs">${d.month}</td>
<td class="text-right num">${d.mau.toLocaleString()}</td>
<td class="text-right num">${d.signups.toLocaleString()}</td>
<td class="text-right num">${d.paying.toLocaleString()}</td>
<td class="text-right num">${(d.churn*100).toFixed(1)}%</td>
</tr>
`).join('');
const sparkOpts = { responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false},tooltip:{enabled:false}}, scales:{x:{display:false},y:{display:false}}, elements:{point:{radius:0},line:{tension:0.4,borderWidth:2}} };
new Chart(document.getElementById('kpi1'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.mau), borderColor:'#c96442', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi2'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.signups), borderColor:'#e9b94a', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi3'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.paying), borderColor:'#1f7a3a', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('kpi4'), { type:'line', data:{labels:data.map(d=>d.month), datasets:[{data:data.map(d=>d.churn*100), borderColor:'#2348b8', fill:false}]}, options:sparkOpts });
new Chart(document.getElementById('chart-main'), {
type:'bar',
data:{
labels:data.map(d=>d.month),
datasets:[
{label:'MAU', data:data.map(d=>d.mau), backgroundColor:'rgba(201,100,66,0.18)', borderColor:'#c96442', borderWidth:1.5, borderRadius:4, yAxisID:'y'},
{label:'付费', type:'line', data:data.map(d=>d.paying), borderColor:'#1f7a3a', backgroundColor:'#1f7a3a', tension:0.35, borderWidth:2.5, pointRadius:3, yAxisID:'y'},
]
},
options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{position:'bottom',labels:{usePointStyle:true,boxWidth:8}}}, scales:{x:{grid:{display:false}},y:{grid:{color:'#f0ece5'}, ticks:{callback:v=>v.toLocaleString()}}} }
});
new Chart(document.getElementById('chart-churn'), {
type:'line',
data:{ labels:data.map(d=>d.month), datasets:[{label:'流失率 %', data:data.map(d=>(d.churn*100).toFixed(2)), borderColor:'#9c2a25', backgroundColor:'rgba(156,42,37,0.08)', tension:0.4, borderWidth:2.5, fill:true, pointRadius:3}] },
options:{ responsive:true, maintainAspectRatio:false, plugins:{legend:{display:false}}, scales:{x:{grid:{display:false}},y:{grid:{color:'#f0ece5'}, ticks:{callback:v=>v+'%'}, beginAtZero:true}} }
});
</script>
</body>
</html>example.md
month,active_users,new_signups,paying,churn_rate
2024-09,8420,1240,612,0.034
2024-10,9180,1380,701,0.031
2024-11,10240,1610,840,0.028
2024-12,11800,1890,1012,0.025
2025-01,13620,2240,1218,0.023
2025-02,15440,2680,1455,0.021
2025-03,17890,3120,1722,0.020
2025-04,20640,3680,2041,0.019
2025-05,23950,4250,2418,0.018
# 数据周报 · 2025 年 5 月
来源: 内部 BI · 截止 5 月 11 日
洞察:
- MAU 半年增长 184%, 主要来自小红书自然流量
- 付费转化率从 7.3% 提升到 10.1%, 团队 Pro 套餐贡献最大
- 月流失从 3.4% 降到 1.8%, AI 起草功能上线后明显改善
SKILL.md
---
name: data-report
zh_name: "数据可视化报告"
en_name: "Data Visualization Report"
emoji: "📊"
description: "Turns CSV, Excel, or JSON data into a polished visual report page."
zh_description: "把 CSV/Excel/JSON 数据转成漂亮的可视化报告页"
en_description: "Turns CSV, Excel, or JSON data into a polished visual report page."
category: data
scenario: finance
aspect_hint: "桌面长页面"
featured: 10
tags: ["data", "report", "chart", "数据", "报告"]
example_id: sample-data-weekly-report
example_name: "数据报告 · 周报"
example_format: csv
example_tagline: "KPI 卡 + Chart.js 图表 + 表格"
example_desc: "9 个月增长数据自动渲染成可视化报告, 内联 Chart.js"
od:
mode: prototype
surface: web
platform: desktop
scenario: finance
upstream: "https://github.com/nexu-io/html-anything"
preview:
type: html
entry: index.html
reload: debounce-100
design_system:
requires: false
example_prompt: "Use the Data Visualization Report template to turn my CSV, Excel, or JSON data into a polished visual report page. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images."
example_prompt_i18n:
zh-CN: "用「数据可视化报告」模板把我的内容做成一份「把 CSV/Excel/JSON 数据转成漂亮的可视化报告页」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。"
---
【模板: 数据可视化报告】
- 头部: 报告标题 + 时间区间 + 数据来源说明。
- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。
- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。
- **图表容器必须有固定高度**: 每个 `<canvas>` 外层包一个 `<div style="position:relative;height:NNNpx">` (KPI 迷你图 ~40px, 主图表 ~240–280px)。Chart.js 用 `responsive:true, maintainAspectRatio:false` 时若父容器没有显式高度, 会陷入 ResizeObserver 死循环, 图表无限增高直至卡死浏览器。**绝对不要**直接给 canvas 写 `height=` 属性当布局, 那个只是初始值。
- 数据表格: 用户原始数据节选, 使用 `<table>` + 现代化样式 (zebra stripe, hover, sticky header)。
- 洞察块: 3-5 条文字洞察, 用 emoji 开头, 像产品周报。
- 底部"方法论"折叠区。
- 配色克制专业: 主色 1 + 中性色阶, 图表用调色板。
- **必须解析用户提供的实际数据**, 不要捏造。