关于 折线图生成器
折线图生成器基于 Apache ECharts 库在浏览器本地将 CSV 或 JSON 数据渲染为折线图。支持多数据系列叠加对比、平滑曲线（Bezier 插值）与折线模式切换、面积填充渐变效果以及自定义标记点和标记线。数据输入兼容 CSV 和 JSON 格式，JSON 结构支持 series 数组以实现多系列图表。ECharts 的折线图支持数据缩放、tooltip 悬停提示和图例筛选交互。生成的图表可导出为高分辨率 PNG。折线图的核心价值在于展示"随着某个连续维度（通常是时间）的变化趋势"，因此数据点的顺序至关重要：时间序列一定要先把数据按时间升序排好，否则折线会来回穿梭、制造出并不存在的假趋势。开启数据缩放后能局部放大某个时间窗排查异常，平滑曲线会让噪声被抹平但也会掩盖真实波动，短线数据慎用。导出高分辨率图片可直接放进汇报材料，比贴原始数字更容易让趋势被快速理解。
横轴的类型决定了折线是否成立。若横轴是连续的时间或数值，折线表达趋势是恰当的；若横轴只是分类（例如几个不同的接口名），等距排列会让读者误以为它们之间有连续关系，此时柱状图才是正确的表达。动手前先确认横轴代表什么，能避免把分类数据画成趋势。
数据缺口必须显式处理，这是折线图最容易被忽略的细节。真实数据常有缺失点，此时是断开线条还是在缺失处直接连线，两种处理传达的含义完全不同：断开表示「这段没有数据」，连线则暗示「中间是连续过渡」。应明确选择一种并保持全篇一致，必要时在图注中说明。
与柱状图的分工可以概括为：折线回答「怎么变化」，柱状回答「差多少」。同一组数据用两种图型呈现会得到不同的印象，尤其是时间序列中若干时点的比较——柱状能让人直接比高度，折线则容易让注意力集中在端点间的走势上。因此按读者要回答的问题选图，而不是按数据类型。
坐标轴范围与基线同样影响结论。纵轴不从零开始时，微小的波动会被放大成剧烈的涨跌，这在表达比例与预算类数据时尤其容易误导。折线图允许非零起点（否则趋势无法辨认），但柱状图必须从零开始，因为长度是它的表达方式。
最后，多条序列同图时需要控制数量并明确区分方式。超过四到五条之后，颜色区分会变得困难，尤其在灰度打印下；此时应改为分组展示，或把次要序列折叠为背景。同时给每条线加上直接标注，让读者不必在图表与图例之间反复对照。
导出格式会影响图表在文档里的可用性。矢量格式可以无损缩放到任意尺寸，适合放进报告与论文，代价是并非所有编辑器都能直接嵌入；位图格式兼容性好，但固定分辨率，在排版放大后会模糊。若图表要进入正式文档，优先导出矢量；若只是临时沟通，位图足以胜任。
颜色选择还关系到可读性。约百分之八的男性存在不同程度的红绿色觉差异，仅靠红绿两条线区分序列，对这部分的读者等于无效编码。稳妥做法是同时使用颜色与线型（实线、虚线、点线）两套编码，并在灰度打印下检查一次，确认序列仍然可以分辨。
实现原理
折线把数据点用线段连接，因此它表达的是「连续变化」的假设。若横轴是分类而非连续时间，等距排列会让读者误以为间隔相同；数据点之间的插值是视觉假设，不代表真实取值，因此采样点稀疏时用点标记比直接连线更诚实。
1 月、2 月、12 月三点等距排列视觉上间隔相同，但真实时间跨度相差十倍——应改用时间轴或柱状图本页实测数据
| 已绘制 | 非白像素 1,577,216 个、颜色 328 种——不是空画布，坐标轴与折线都画了 |
|---|---|
| 主色可辨 | 占比最高的依次是黑（轴线/文字）、米色（背景 236,227,214）、青绿（13,148,136，折线主色）、灰褐（117,105,93，次要元素） |
| 高 DPI 适配 | canvas 实际尺寸 1616×976 远大于 CSS 尺寸，说明按 devicePixelRatio 放大了后备缓冲，高分屏下不糊 |
| 导出 | 画布可直接导出为图片，导出内容与预览一致 |
图表工具真正容易出问题的地方不是画线，而是三件「看起来没问题」的事：①高 DPI——canvas 若只按 CSS 像素设置宽高，在 2x 屏上线宽会糊成 2px；本页把后备缓冲放大到 1616×976（超过 CSS 尺寸），所以线条清晰；②坐标轴范围——数据全为正时若从 0 起画，波动会被压平看不出趋势，反之裁剪过狠会误导；③颜色对比——折线色与网格色太接近时，打印成黑白就分不清了。导出前建议确认：X 轴是否标注了时间格式、Y 轴是否从 0 起、单位写在轴上而不是标题里。
使用方法
- 打开「折线图生成器」
- 粘贴待处理的文本
- 根据需要调整输出选项
- 点击「处理」按钮，结果实时显示
- 复制或导出结果
使用场景
- 股价走势展示 — 将每日收盘价数据绘制为折线图，直观展示股票价格变化趋势和波动幅度。
- 气温变化记录 — 将每日气温数据可视化为折线图，对比不同城市或不同年份的温度变化趋势。
- 流量监控看板 — 将网站每小时 PV 和 UV 数据绘制为折线图，实时监控流量变化和访问峰值。
- 多指标对比 — 在同一折线图中叠加多个数据系列，对比不同产品或方案的指标变化趋势。
- 实验数据可视化 — 将实验测量数据绘制为折线图，展示变量随时间或条件变化的规律和趋势。
- 收入与成本趋势 — 把月收入与成本两条曲线叠加，辅助判断盈亏节点和策略调整时点。
常见问题
能画平滑曲线吗？
能。开启平滑曲线选项后，ECharts 会使用 Bezier 插值算法将折线变为平滑曲线，适合展示长期趋势。
平滑后数据会被“改歪”吗？
平滑只改变折线走向的视觉形状，不改变数据点数值，但会掩盖高频抖动；采样少或噪音大的短线数据建议关掉平滑以免误导。
支持多系列对比吗？
支持。在 JSON 数据中添加多个 series 对象，每个系列用不同颜色绘制，可在同一图表中叠加对比多条折线。
能填充面积吗？
能。开启面积填充选项后，折线下方区域会以渐变色填充，适合强调数据量的累积效果。
数据格式怎么输入？
支持 CSV（首行为标签，后续行为数据）和 JSON（含 categories 和 series 数组）两种格式，可按需选择。
时间没排序会怎样？
折线会按输入顺序连接数据点，乱序会造成折线来回穿越、出现虚假的剧烈波动，务必先把时间序列按升序排好。
数据会被上传吗？
不会。所有渲染在浏览器本地通过 ECharts 完成，不发送任何网络请求，可放心处理内部运营或研究数据。
导出的图表在文档里变得模糊？
导出 SVG 是矢量，缩放不失真，优先选它；导出 PNG 时按目标文档的实际显示尺寸 ×2 导出（高分屏适配），否则会被拉伸。嵌入 Word/PPT 时 SVG 支持已较好，老版本再退回 2x PNG。