From ad3e74e3910e13663bd8ff4b321a6c9b2ea90305 Mon Sep 17 00:00:00 2001
From: hz4th_coder <hz4th_coder@tphai.com>
Date: Sat, 13 Jun 2026 21:56:16 +0800
Subject: [PATCH] =?UTF-8?q?docs:=20=E6=B7=BB=E5=8A=A0=E9=A1=B9=E7=9B=AE?=
 =?UTF-8?q?=E8=AF=B4=E6=98=8E=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md | 122 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 122 insertions(+)
 create mode 100644 README.md

diff --git a/README.md b/README.md
new file mode 100644
index 0000000..7fed702
--- /dev/null
+++ b/README.md
@@ -0,0 +1,122 @@
+# 📊 数据可视化图表生成器
+
+一个简洁强大的在线数据可视化工具，粘贴数据即可生成精美的对比图表。
+
+![License](https://img.shields.io/badge/license-MIT-blue.svg)
+![Version](https://img.shields.io/badge/version-1.0.0-green.svg)
+
+## ✨ 功能特性
+
+### 📈 图表类型
+- **柱状图** - 支持单系列/多系列对比
+- **折线图** - 支持平滑曲线、面积填充
+- **混合图** - 柱状图+折线图组合展示
+
+### 🎨 自定义配置
+- **主题风格** - 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号程序员