【Code With SOLO】用 SOLO 从零搭建一个功能完备的高级数据绘图系统
单文件、5840 行代码、17 种图表、25 套配色主题、多文件导入、峰值检测、工程管理——一个 HTML 搞定全部
1. 摘要
我用 TRAE SOLO 从零开始搭建了 PlotForge Pro——一个功能完备的高级数据绘图系统。整个项目仅为一个单文件 HTML（5840 行代码），支持 17 种图表类型、25 套配色主题、多文件批量导入、峰值检测、工程保存/加载等专业级功能，浏览器直接打开即用，无需任何构建步骤。
2. 背景
我是一名企业产品研发人员，日常需要进行相关试验后将多个数据源的数据快速可视化呈现。常见的痛点包括：
• 市面上的在线图表工具要么功能简陋，要么专业性极高，需要大量的学习成本，难以快速上手
• 多个文件的数据很难在同一张图中对比展示，尤其是各文件的 X 轴数据不同时，想快速筛选特征数据，需要快速进行特征峰值对比
• 导出的图表往往需要反复调整边距、字号、配色才能达到发表标准
• 工作中断后很难恢复之前的图表状态，每次都要重新配置
我希望有一个“打开即用、功能强大、无需安装”的绘图工具，能让我专注于数据本身而非工具的操作。于是我决定用 SOLO 从零搭建这个工具。
3. 实践过程
3.1 任务拆解思路
我将整个项目拆解为四个阶段，每个阶段都是一个独立的循环：“描述需求 → SOLO 实现 → 测试验证 → 发现问题 → 修复优化”。
**第一阶段：**基础框架搭建——布局、图表引擎集成、数据导入
**第二阶段：**图表配置体系——类型切换、样式、坐标轴、图例
**第三阶段：**高级功能开发——多文件导入、峰值检测、标注标记
**第四阶段：**工程化完善——菜单重组、折叠面板、工程保存、撤销重做
3.2 关键实现过程
① 基础框架：单文件架构
我选择了“单 HTML 文件”这个特点作为项目的核心约束。所有 CSS、JS、HTML 集中在一个文件中，图表引擎使用 ECharts 5.5.0 CDN 引入，无需任何构建工具。布局采用经典的“顶部工具栏 + 左侧配置面板 + 中央图表画布”三栏结构，深色主题设计。
关键 Prompt：“创建一个基于 ECharts 的数据可视化工具，单 HTML 文件，左侧配置面板 + 右侧图表画布，支持 CSV/JSON 数据导入”
② 图表配置体系：从简单到专业
图表配置是整个工具的核心。我分步实现了：
**• 图表类型：**折线图、柱状图、散点图、饼图、雷达图、热力图、K线图、箱线图等 17 种类型实时切换
**• 样式系统：**25 套配色主题（彩虹、马卡龙、海洋、霓虹、商务、莫兰迪等），支持渐变填充、线条样式、符号配置
**• 坐标轴：**X/Y 轴类型、范围、反转、网格线、刻度线、标签格式化、双 Y 轴
**• 图例与提示框：**位置、朝向、间距、图标尺寸、字体大小
③ 多文件导入：最大的技术挑战
多文件同时导入是整个项目中最复杂的部分。我在这个环节踩了好几个坑：
**坑 1：数据覆盖问题。**最初多个数据集合并时，使用 Object.assign 合并数据，后导入的数据集会覆盖前面的同名列。修复方案是为每个数据集的列名添加前缀，避免冲突。
**坑 2：X 轴数据共用问题。**所有系列共用全局 X 轴列，导致其他文件的 X 轴数据被忽略。修复方案是为每个系列添加独立的 xColumn 属性，支持各系列使用不同的 X 轴列。
**坑 3：系列生成逻辑。**全局 Y 轴选择器的值匹配某个数据集时，该数据集只生成一个系列，其他数值列被忽略。修复方案是多数据集时自动取所有非 X 数值列作为系列。
最终实现了每个系列独立选择数据集、X 轴列、Y 轴列的三个下拉菜单，多文件导入后自动智能检测各文件的 X/Y 轴并生成系列。
④ 高级功能：峰值检测与标注
基于简单的突起度算法实现了峰值/谷值自动检测，支持配置最小突出度、最小高度差、最小间距等参数。同时支持文本标注、标记线（平均值/最大值/自定义）、标记区域，并可将峰值数据导出为 CSV/JSON。
⑤ 工程化完善：菜单重组与交互优化
随着功能增多，原来的“更多”标签页堆积了 16 个分区、40+ 控件，操作体验很差。我将其重组为 7 个标签页：
**• 数据：**数据集管理、预览、筛选/排序/聚合
**• 图表：**类型切换、数据映射、系列管理、标题
**• 样式：**配色主题、图例、提示框、数据标签、渐变、背景
**• 坐标轴：**显示范围、轴线、轴标题、刻度、标签格式、双 Y 轴
**• 高级：**工具箱、数据缩放、标注/标记、峰值检测、动画
**• 布局：**画布尺寸、图形边距（滑杆+数值输入）、画布外观
**• 工程：**工程文件保存/加载、图表模板、配置管理
同时添加了分区折叠/展开功能和一键切换按钮，让用户可以快速找到需要的配置项。
3.3 中间踩过的坑
除了多文件导入的技术坑，还有一些值得分享的经验：
**• 内联样式覆盖问题：**新添加的面板带有 style=“display:none” 内联样式，优先级高于 CSS class，导致标签页切换后仍然空白。解决方案是移除内联样式，统一用 CSS class 控制。
**• 容器嵌套问题：**新面板放在了 sidebar-content 容器外面，导致缺少 padding 和滚动行为。解决方案是确保所有面板都在同一个容器层级内。
**• 控件 ID 重复问题：**菜单重组时将同一个控件从两个标签页复制到新标签页，导致 ID 重复。解决方案是移除原位置的副本，保留唯一实例。
4. 成果展示
PlotForge Pro 的最终产出是一个单 HTML 文件（5840 行代码），包含约 2450 行 CSS、340 行 HTML 结构、3050 行 JavaScript。主要特性：
图表类型
折线、柱状、散点、面积、饼图、环形、雷达、热力、K线、箱线、漏斗、仪表、矩形树、旭日、平行坐标、主题河流、17 种
配色主题
彩虹、高对比、马卡龙、海洋、日落、霓虹、商务、莫兰迪、水彩等 25 套
数据导入
CSV/JSON 粘贴或文件上传，支持多文件批量导入和拖拽导入
系列管理
每个系列独立选择数据集、X 轴列、Y 轴列，支持颜色、可见性、名称配置
坐标轴
X/Y 轴类型、范围、反转、网格、刻度、标签格式、双 Y 轴
标注标记
文本标注、标记线（平均值/最大值/自定义）、标记区域
峰值检测
自动检测峰值/谷值，支持突出度、高度差、间距参数配置
布局控制
画布尺寸、图形边距（滑杆+数值输入）、画布圆角/边框/阴影
工程管理
工程保存/加载（.pfproj）、配置模板、自动保存、撤销/重做
导出
PNG/SVG/PDF，支持自定义分辨率、透明背景、复制 ECharts 配置代码
技术栈：ECharts 5.5.0 + 原生 HTML/CSS/JS，无框架依赖，浏览器直接打开即用。
5. 效果与总结
提效数据
如果用传统方式从零开发这样一个工具，预估需要 2-3 天（包括技术选型、架构设计、核心功能开发、样式调优、测试）。通过 SOLO，整个过程压缩到了几个小时的多轮对话中完成，提效约 10-20 倍。
SOLO 在我的流程中做了什么
• 根据自然语言描述生成完整的前端代码（HTML/CSS/JS）
• 在功能迭代中自动发现和修复 Bug（如数据覆盖、内联样式优先级、ID 重复等）
• 将复杂的“重组菜单”需求拆解为清晰的执行计划并实现
• 每次修改后自动进行 JS 语法验证和功能检查，确保代码质量
可复用的方法
**“分阶段迭代”模式：**不要试图一次性描述所有需求，而是分阶段迭代——先搭框架，再加功能，最后优化。每个阶段结束后验证再进入下一阶段，这样可以早期发现问题并避免后期大规模重构。
**“具体到抽象”的描述方式：**告诉 SOLO “我想要什么效果”而非“怎么实现”。例如“多文件导入后每个系列能独立选择各自的 X/Y 轴”比“给系列添加 xColumn 属性”更有效。
**“边做边验证”的习惯：**每次修改后要求 SOLO 进行验证（语法检查、ID 唯一性、功能完整性），可以显著减少累积的小 Bug。
总之，SOLO 不仅是一个代码生成工具，更像是一个能理解业务需求、自主发现问题并持续迭代优化的开发伙伴。对于单文件前端工具、原型开发、快速工具搭建等场景，它的效率优势非常明显。