📊 数据可视化图表生成器
一个简洁强大的在线数据可视化工具，粘贴数据即可生成精美的对比图表。
✨ 功能特性
📈 图表类型
- 柱状图 - 支持单系列/多系列对比
- 折线图 - 支持平滑曲线、面积填充
- 混合图 - 柱状图+折线图组合展示
🎨 自定义配置
- 主题风格 - 5种预设主题（默认/深色/马卡龙/渐变/复古）
- 颜色自定义 - 每个系列可单独设置颜色
- 顺序调整 - 拖拽即可调整系列显示顺序
- 显示选项 - 图例、网格线、数据标签、堆叠模式等
📐 区域分割
- 支持左右区域分割，适合对比分析（如：2023年 vs 2024年）
- 可自定义分割线样式（实线/虚线/点线）
- 自动标注左右区域标签
📥 导出功能
- 导出为 PNG（2倍分辨率）
- 导出为 SVG（矢量格式）
🚀 快速开始
本地运行
# 克隆仓库
git clone http://121.40.164.32:12007/hz4th_coder/data-chart-tool.git
# 进入目录
cd data-chart-tool
# 启动本地服务器（任选其一）
python3 -m http.server 8080
# 或
npx serve
浏览器访问 http://localhost:8080 即可使用。
在线使用
已部署在内部服务器：http://192.168.0.101:16023
📝 数据格式
基本格式
第一行为表头（系列名称），第一列为横坐标值，支持逗号、制表符分隔：
类别, 系列1, 系列2, 系列3
A, 10, 20, 30
B, 15, 25, 35
C, 20, 30, 40
示例数据
季度销售对比：
产品, Q1, Q2, Q3, Q4
手机, 1200, 1800, 2100, 2500
平板, 800, 950, 1100, 1300
笔记本, 600, 750, 900, 1050
年度增长趋势：
指标, 2020年, 2021年, 2022年, 2023年, 2024年
营收(万), 500, 680, 820, 1050, 1380
利润(万), 80, 120, 160, 230, 350
用户(千), 50, 85, 130, 200, 320
🎯 使用场景
| 场景 | 说明 |
|---|---|
| 销售数据分析 | 对比不同产品、不同季度的销售表现 |
| 年度趋势展示 | 展示多年份的指标变化趋势 |
| 方案对比评估 | 使用区域分割功能对比两个方案 |
| 团队绩效展示 | 多团队、多指标的综合对比 |
🛠️ 技术栈
- ECharts 5.5.0 - 图表渲染引擎
- 原生 HTML/CSS/JS - 无框架依赖，轻量快速
📁 项目结构
data-chart-tool/
├── index.html # 主页面
├── style.css # 样式文件
├── app.js # 核心逻辑
└── README.md # 项目说明
🔧 开发计划
- 支持饼图、雷达图等更多图表类型
- 支持从 Excel/CSV 文件导入
- 支持数据编辑和实时预览
- 添加更多主题风格
- 支持图表模板保存和分享
📄 License
MIT License
Made with ❤️ by 黄庄4号程序员