Code2Chart - 代码编辑器与图表预览

一个基于 Vue 3 + ECharts + CodeMirror 的现代化代码编辑器项目，支持实时图表预览、代码格式化、错误提示和主题切换。

✨ 特性

• 🎨 现代化 UI - 响应式设计，支持移动端和桌面端
• 🌓 主题切换 - 支持浅色和深色主题
• 📝 代码编辑器 - 基于 CodeMirror 6，支持语法高亮、自动补全、代码折叠
• 📊 实时预览 - 左侧编辑代码，右侧实时预览 ECharts 图表
• ⚡ 代码格式化 - 一键格式化 JSON/JavaScript 代码
• 🔍 错误提示 - 实时检测代码错误并显示详细信息
• 💾 本地存储 - 自动保存代码和主题设置
• 🎯 TypeScript - 完整的类型支持

🚀 快速开始

环境要求

• Node.js >= 16.0.0
• npm >= 7.0.0 或 yarn >= 1.22.0 或 pnpm >= 7.0.0

安装依赖

# 使用 npm
npm install

# 使用 yarn
yarn install

# 使用 pnpm
pnpm install

开发模式

# 使用 npm
npm run dev

# 使用 yarn
yarn dev

# 使用 pnpm
pnpm dev

开发服务器将在 http://localhost:3000 启动。

构建生产版本

# 使用 npm
npm run build

# 使用 yarn
yarn build

# 使用 pnpm
pnpm build

构建产物将输出到 dist 目录。

预览生产版本

# 使用 npm
npm run preview

# 使用 yarn
yarn preview

# 使用 pnpm
pnpm preview

📖 使用说明

代码编辑器

在左侧代码编辑器中编写 ECharts 配置代码，支持以下格式：

1. JavaScript 对象格式

const option = {
  title: {
    text: '示例图表'
  },
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [{
    data: [120, 200, 150, 80, 70, 110, 130],
    type: 'bar'
  }]
}

2. JSON 格式

{
  "title": {
    "text": "示例图表"
  },
  "xAxis": {
    "type": "category",
    "data": ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
  },
  "yAxis": {
    "type": "value"
  },
  "series": [{
    "data": [120, 200, 150, 80, 70, 110, 130],
    "type": "bar"
  }]
}

功能说明

• 实时预览：代码修改后，图表会自动更新（300ms 防抖）
• 格式化：点击"格式化"按钮，自动格式化 JSON 代码
• 重置：点击"重置"按钮，恢复默认示例代码
• 主题切换：点击主题切换按钮，在浅色/深色主题间切换
• 全屏预览：点击全屏按钮，全屏查看图表

快捷键

编辑器支持以下快捷键：

• Ctrl/Cmd + Z - 撤销
• Ctrl/Cmd + Shift + Z - 重做
• Ctrl/Cmd + / - 注释/取消注释
• Ctrl/Cmd + F - 查找
• Ctrl/Cmd + H - 替换
• Tab - 缩进
• Shift + Tab - 取消缩进

🏗️ 项目结构

code2chart-vue-lab/
├── src/
│   ├── components/          # Vue 组件
│   │   ├── CodeEditor.vue   # 代码编辑器组件
│   │   ├── ChartPreview.vue # 图表预览组件
│   │   └── ThemeToggle.vue  # 主题切换组件
│   ├── utils/               # 工具函数
│   │   ├── chartParser.ts   # 图表配置解析器
│   │   ├── editor.ts        # 编辑器配置
│   │   ├── storage.ts       # 本地存储工具
│   │   └── constants.ts     # 常量定义
│   ├── types/               # TypeScript 类型定义
│   │   └── index.ts
│   ├── App.vue              # 根组件
│   ├── main.ts              # 入口文件
│   └── style.css            # 全局样式
├── index.html               # HTML 模板
├── vite.config.ts           # Vite 配置
├── tsconfig.json            # TypeScript 配置
└── package.json             # 项目配置

🛠️ 技术栈

• Vue 3.4+ - 渐进式 JavaScript 框架
• Vite 5+ - 下一代前端构建工具
• TypeScript - JavaScript 的超集
• ECharts 5.4+ - 强大的数据可视化库
• CodeMirror 6 - 代码编辑器
• Composition API - Vue 3 组合式 API

📝 代码规范

项目使用 ESLint 进行代码检查，运行以下命令检查代码：

npm run lint

🎨 自定义主题

项目使用 CSS 变量实现主题系统，可以在 src/style.css 中修改主题颜色：

:root {
  --primary-color: #5470c6;
  --bg-primary: #ffffff;
  --text-primary: #303133;
  /* ... 更多变量 */
}

🔧 配置说明

Vite 配置

在 vite.config.ts 中可以配置：

• 开发服务器端口（默认 3000）
• 构建输出目录（默认 dist）
• 路径别名（@ 指向 src 目录）

TypeScript 配置

在 tsconfig.json 中可以配置：

• 编译目标
• 模块系统
• 路径映射
• 严格模式

🐛 问题排查

图表不显示

1. 检查代码语法是否正确
2. 确认代码返回了有效的 ECharts 配置对象
3. 查看浏览器控制台是否有错误信息

编辑器不工作

1. 确认已安装所有依赖
2. 检查浏览器控制台是否有错误
3. 尝试清除浏览器缓存

主题切换不生效

1. 检查浏览器是否支持 CSS 变量
2. 确认 data-theme 属性已正确设置

📄 许可证

MIT License

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📧 联系方式

如有问题或建议，请通过 Issue 联系。

---

享受编码的乐趣！ 🎉