Compare commits
1 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| ad3e74e391 |
122
README.md
Normal file
122
README.md
Normal file
@@ -0,0 +1,122 @@
|
||||
# 📊 数据可视化图表生成器
|
||||
|
||||
一个简洁强大的在线数据可视化工具,粘贴数据即可生成精美的对比图表。
|
||||
|
||||

|
||||

|
||||
|
||||
## ✨ 功能特性
|
||||
|
||||
### 📈 图表类型
|
||||
- **柱状图** - 支持单系列/多系列对比
|
||||
- **折线图** - 支持平滑曲线、面积填充
|
||||
- **混合图** - 柱状图+折线图组合展示
|
||||
|
||||
### 🎨 自定义配置
|
||||
- **主题风格** - 5种预设主题(默认/深色/马卡龙/渐变/复古)
|
||||
- **颜色自定义** - 每个系列可单独设置颜色
|
||||
- **顺序调整** - 拖拽即可调整系列显示顺序
|
||||
- **显示选项** - 图例、网格线、数据标签、堆叠模式等
|
||||
|
||||
### 📐 区域分割
|
||||
- 支持左右区域分割,适合对比分析(如:2023年 vs 2024年)
|
||||
- 可自定义分割线样式(实线/虚线/点线)
|
||||
- 自动标注左右区域标签
|
||||
|
||||
### 📥 导出功能
|
||||
- 导出为 PNG(2倍分辨率)
|
||||
- 导出为 SVG(矢量格式)
|
||||
|
||||
## 🚀 快速开始
|
||||
|
||||
### 本地运行
|
||||
|
||||
```bash
|
||||
# 克隆仓库
|
||||
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号程序员
|
||||
Reference in New Issue
Block a user