把 Excel/CSV 数据生成为彩色渐变的可视化数据看板 HTML 文件。纯前端,无需依赖。
- 智能数据识别:自动识别 Excel 表格类型,推荐最佳可视化方案
- 58 套设计风格:内置多种设计系统(Linear、Figma、Stripe 等)
- 12 种图表类型:KPI 卡、折线图、柱状图、饼图、漏斗图等
- 彩色渐变设计:默认 Figma 白色明亮风格
- 纯前端输出:单 HTML 文件,可直接在浏览器打开
| 类型 | 核心指标 |
|---|---|
| 财务类 | 收入、成本、毛利、净利、现金流 |
| 销售类 | 销售额、订单、客单价、转化率 |
| 供应链/WMS | 入库、出库、库存、周转率 |
| 生产制造 | 产量、良品率、OEE |
| 人力资源 | 人效、招聘、绩效、考勤 |
| 市场营销 | ROI、流量、转化率 |
| 客服售后 | 售后数、解决率、满意度 |
| 直播电商 | 场次、观看、GMV、转化率 |
内置 58 套设计系统:
| 分类 | 风格 |
|---|---|
| AI/ML | claude, minimax, ollama, elevenlabs... |
| 开发工具 | linear, cursor, vercel, figma, expo, sentry... |
| 基础设施 | stripe, supabase, mongodb, clickhouse... |
| 设计/产品 | figma, notion, framer, airtable, miro... |
| 金融/加密 | coinbase, kraken, revolut, wise |
| 企业/消费 | apple, airbnb, spotify, tesla, uber... |
| 汽车 | bmw, ferrari, lamborghini, renault |
| 操作 | 正确做法 |
|---|---|
| 读取 Excel | python-calamine 流式读取,指定行范围 |
| 修改 HTML | 用 edit 精准替换目标区块 |
| 生成数据 | 数据写为 JS 变量内嵌 HTML |
| 大文件 | 分区块多次 edit,每次 50-100 行 |
HTML 文件直接写入磁盘,不经过 prompt 传递,因此不会导致上下文超限。
基础字段识别:
| 字段特征 | 识别为 |
|---|---|
| 列名含「日期/时间/月份」 | 时间字段 |
| 列名含「金额/销售/采购/成本」 | 金额字段 |
| 列名含「数量/库存/件数」 | 数量字段 |
| 列名含「部门/城市/产品/客户」 | 分类字段 |
| 唯一值 < 20 | 低基数(适合饼图) |
| 唯一值 > 100 | 高基数(适合 TOP 10) |
复合模式识别(7种):
| 模式 | 字段组合 | 说明 |
|---|---|---|
| 模式1 | 时间 + 金额 | 销售/收入趋势 |
| 模式2 | 时间 + 数量 | 作业量趋势 |
| 模式3 | 分类 + 金额 | 部门/区域业绩 |
| 模式4 | 双金额对比 | 计划 vs 实际 |
| 模式5 | 时间 + 分类 + 金额 | 多维度分析 |
| 模式6 | 库存数据 | 库存预警 |
| 模式7 | 客户数据 | 客户价值/帕累托 |
| 指标类型 | 计算方式 |
|---|---|
| 总和 | SUM(金额字段) |
| 均值 | AVG(金额/数量字段) |
| 中位数 | MEDIAN(数值字段) |
| 极值 | MAX/MIN(数值字段) |
| 同比 | (本期-去年同期)/去年同期 |
| 环比 | (本期-上期)/上期 |
| 完成率 | 实际/计划*100% |
| 占比 | 分类/总和*100% |
| 排名 | RANK(值) |
| 异常类型 | 识别条件 | 标记方式 |
|---|---|---|
| 零值/空值 | 关键指标为0或空 | |
| 负值 | 金额/库存为负 | 🚨 红色预警 |
| 极端低值 | < 均值-2*标准差 | 橙色预警 |
| 完成率低 | < 50% | 🚨 红色预警 |
| 超支 | 实际 > 预算 | 🚨 红色预警 |
图表数量自动决策:
| 数据复杂度 | 行数 | 推荐图表数 |
|---|---|---|
| 简单 | <100行 | 4-5 个 |
| 中等 | 100-500行 | 6-8 个 |
| 复杂 | >500行 | 9-12 个 |
布局自动决策:
| 数据类型 | 推荐布局 |
|---|---|
| 时间序列为主 | 横向布局 |
| 分类分布为主 | 卡片网格 |
| 对比为主 | 左右分栏 |
| 多维度 | 仪表盘式 |
自动调整规则:
- 分类占比>80% → 其他合并为「其他」
- 时间点>30个 → 自动采样或切换月视图
- 分类>50个 → 仅显示TOP10
- 有负值 → 使用对称柱状图
把 Excel 或 CSV 文件发送给 AI 助手即可自动生成。
用 linear 风格生成
用 figma 风格展示
用 spotify 风格做数据看板
生成单 HTML 文件,可直接在浏览器打开查看。
excel-to-dashboard/
├── SKILL.md # 技能定义文件
├── README.md # 项目说明
├── design-systems/ # 58 套设计系统文件
│ ├── linear-DESIGN.md
│ ├── figma-DESIGN.md
│ └── ...
└── scripts/ # 脚本目录
- HTML + CSS + JavaScript
- Chart.js(图表渲染)
- 无需后端,纯前端运行
MIT License
引用了https://github.com/VoltAgent/awesome-design-md ,感谢大神的分享。 欢迎提交 Issue 和 Pull Request!
让数据可视化更简单