Skip to content

contsun/excel-to-dashboard

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 

Repository files navigation

excel-to-dashboard

把 Excel/CSV 数据生成为彩色渐变的可视化数据看板 HTML 文件。纯前端,无需依赖。

🎯 功能特点

  • 智能数据识别:自动识别 Excel 表格类型,推荐最佳可视化方案
  • 58 套设计风格:内置多种设计系统(Linear、Figma、Stripe 等)
  • 12 种图表类型:KPI 卡、折线图、柱状图、饼图、漏斗图等
  • 彩色渐变设计:默认 Figma 白色明亮风格
  • 纯前端输出:单 HTML 文件,可直接在浏览器打开

📊 支持主流的10种表格类型及参数(也支持自定义的表格)

类型 核心指标
财务类 收入、成本、毛利、净利、现金流
销售类 销售额、订单、客单价、转化率
供应链/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

🔧 核心能力

1. 上下文超限处理

操作 正确做法
读取 Excel python-calamine 流式读取,指定行范围
修改 HTML edit 精准替换目标区块
生成数据 数据写为 JS 变量内嵌 HTML
大文件 分区块多次 edit,每次 50-100 行

HTML 文件直接写入磁盘,不经过 prompt 传递,因此不会导致上下文超限。

2. 智能数据模式识别

基础字段识别

字段特征 识别为
列名含「日期/时间/月份」 时间字段
列名含「金额/销售/采购/成本」 金额字段
列名含「数量/库存/件数」 数量字段
列名含「部门/城市/产品/客户」 分类字段
唯一值 < 20 低基数(适合饼图)
唯一值 > 100 高基数(适合 TOP 10)

复合模式识别(7种)

模式 字段组合 说明
模式1 时间 + 金额 销售/收入趋势
模式2 时间 + 数量 作业量趋势
模式3 分类 + 金额 部门/区域业绩
模式4 双金额对比 计划 vs 实际
模式5 时间 + 分类 + 金额 多维度分析
模式6 库存数据 库存预警
模式7 客户数据 客户价值/帕累托

3. 关键指标自动提取

指标类型 计算方式
总和 SUM(金额字段)
均值 AVG(金额/数量字段)
中位数 MEDIAN(数值字段)
极值 MAX/MIN(数值字段)
同比 (本期-去年同期)/去年同期
环比 (本期-上期)/上期
完成率 实际/计划*100%
占比 分类/总和*100%
排名 RANK(值)

4. 异常检测规则

异常类型 识别条件 标记方式
零值/空值 关键指标为0或空 ⚠️ 黄色预警
负值 金额/库存为负 🚨 红色预警
极端低值 < 均值-2*标准差 橙色预警
完成率低 < 50% 🚨 红色预警
超支 实际 > 预算 🚨 红色预警

5. 智能组合逻辑

图表数量自动决策

数据复杂度 行数 推荐图表数
简单 <100行 4-5 个
中等 100-500行 6-8 个
复杂 >500行 9-12 个

布局自动决策

数据类型 推荐布局
时间序列为主 横向布局
分类分布为主 卡片网格
对比为主 左右分栏
多维度 仪表盘式

自动调整规则

  • 分类占比>80% → 其他合并为「其他」
  • 时间点>30个 → 自动采样或切换月视图
  • 分类>50个 → 仅显示TOP10
  • 有负值 → 使用对称柱状图

🚀 使用方法

1. 指定 Excel 文件

把 Excel 或 CSV 文件发送给 AI 助手即可自动生成。

2. 指定设计风格(可选)

用 linear 风格生成
用 figma 风格展示
用 spotify 风格做数据看板

3. 查看输出

生成单 HTML 文件,可直接在浏览器打开查看。

📁 项目结构

excel-to-dashboard/
├── SKILL.md              # 技能定义文件
├── README.md             # 项目说明
├── design-systems/       # 58 套设计系统文件
│   ├── linear-DESIGN.md
│   ├── figma-DESIGN.md
│   └── ...
└── scripts/              # 脚本目录

🔧 技术栈

  • HTML + CSS + JavaScript
  • Chart.js(图表渲染)
  • 无需后端,纯前端运行

🐰 示例图片

示例图2 示例图1

📄 许可证

MIT License

🤝 贡献

引用了https://github.com/VoltAgent/awesome-design-md ,感谢大神的分享。 欢迎提交 Issue 和 Pull Request!


让数据可视化更简单

About

No description, website, or topics provided.

Resources

License

Stars

1 star

Watchers

0 watching

Forks

Releases

No releases published

Packages

 
 
 

Contributors