关于 图表生成器
柱状图生成器基于 Apache ECharts 可视化库在浏览器本地将 CSV 或 JSON 数据渲染为柱状图。支持自定义柱体颜色、坐标轴标签、图例位置、网格线和动画效果。数据输入支持 CSV（逗号分隔，首行为类别标签）和 JSON（含 categories 和 series 字段的对象）两种格式。ECharts 使用 Canvas 或 SVG 渲染引擎，生成的图表可导出为 PNG 位图。柱状图适用于展示离散类别的数值对比，如季度销售额、各产品占比、地区分布等。和折线图不同，柱状图不强调顺序变化而突出"每一项有多大"，所以类别排序与坐标轴起点设置很关键：若纵轴不从 0 开始，细微差距也会被放大成“巨大落差”，容易误导读者；建议先在数据里确认类别顺序与单位一致，避免柱子高低被量纲差异误导。导出前可调整网格线与图例位置让重点更突出，数据点很多时关闭动画或对标签抽样，能明显提升渲染速度。图表适合直接放进周报、汇报材料或项目说明，比截图表格更能让对比关系一眼看清。
误用首先在于选错视觉通道：比较数值大小应使用长度（条形），看随时间变化才用位置（折线），看构成比例用角度（饼图，但类别不宜超过六个），通道选错不是审美问题而是会不会读错的问题。其次是忽视坐标轴基线——纵轴不从零开始会放大差异观感，用于表达比例时尤其容易误导，条形图必须从零开始。
与相邻方案的分工体现在「静态图还是交互图」上：静态图适合报告、邮件与打印，信息一次呈现完毕；交互图适合探索性分析，需要悬停查看数值或缩放时间范围。选择时应考虑读者所处的环境——嵌入邮件或文档的交互图往往无法使用，而探索型分析用静态图会丢失大量信息。此外静态图必须把关键数值直接标注出来，不能依赖悬停提示，否则读者拿到图片就失去了数据。
导出前检查三件事能避免大部分返工：刻度是否足以让读者判断量级、单位是否标注、以及图例与数据是否一致。前两项缺失会让图无法独立阅读，第三项则直接导致误读。若图表要放进文档或邮件，还应确认在灰度打印下仍可区分——仅靠颜色区分系列在黑白输出时会失效，加上线型或标记形状才是稳妥做法。
最后一个前提是数据点数量会决定图表是否可用：点太少时折线只是几点之间的连线，读者容易把插值当成真实取值；点太多时线条会挤成一片，趋势看不见。经验做法是折线一般控制在一百点以内，超出则按时间聚合或改用抽样，并在图注中说明聚合方式，避免读者误以为看到的是逐点数据。
与用表格软件自带图表相比，它的优势是「配色与标注可控」：能统一字体、单位与图例样式，让多张图放在一起时观感一致，而表格默认样式很难做到。因此需要成套图表（例如一份报告里的多张）时，专用工具更省事；临时看一组数字，表格内置图表已经够用。
实现原理
图表生成把数据映射到位置与颜色等视觉通道。选择图表类型的原则是「让读者比较的任务最省力」：比较数值大小用长度通道（条形），看随时间变化用位置通道（折线），看构成比例用角度通道（饼图，但类别不宜超过六个）。选错通道不是审美问题，而是会不会读错的问题。
七类占比数据饼图在七类时已难比较角度——改用降序条形图，或把尾部合并为「其它」本页实测数据
| 容器按 DPR 放大 | 渲染容器 1616×976 个物理像素，对应 CSS 尺寸约为 808×488（两者接近 2 倍关系），说明绘制时读过 devicePixelRatio——高分屏下折线不会糊成两像素宽 |
|---|---|
| 图形已绘制 | 非白像素 1,577,216 个、282 种颜色，坐标轴、网格与数据图形都在场 |
| 动画期间指纹会变 | 页面稳定前的画布指纹与稳定后不同，说明 ECharts 入场动画在跑——这也是截图或断言必须等动画结束的原因 |
| 导出与预览同源 | 导出直接取同一画布，所见即所得 |
这类页面有三个「不写下来就会踩」的细节：①动画未结束时的画布不能代表最终效果——入场动画期间取像素会得到中间帧，做截图或回归断言时应当等稳定（或关闭 animation）；②导出分辨率——按 DPR 放大的后备缓冲才是清晰的来源，若导出走的是 1 倍逻辑尺寸，贴进文档就会发虚；③颜色对比——浅色网格在投影仪与黑白打印下几乎消失，关键数值应当直接标注在图形上，而不是只依赖图例。
使用方法
- 打开「图表生成器」
- 粘贴待处理的文本
- 根据需要调整输出选项
- 点击「处理」按钮，结果实时显示
- 复制或导出结果
使用场景
- 销售数据对比 — 将各季度或各产品线的销售额数据可视化为柱状图，直观对比业绩差异。
- 调查问卷结果 — 将问卷各选项的投票数量渲染为柱状图，清晰展示选项分布和占比。
- 性能基准测试 — 将不同方案的操作耗时或吞吐量数据绘制为柱状图，对比性能优劣。
- 地区分布统计 — 将各地区的用户数或订单量数据可视化为柱状图，展示地理分布特征。
- 项目进度跟踪 — 将各任务的完成数量绘制为柱状图，直观展示项目各阶段的进展情况。
- KPI 目标达成 — 把月度 KPI 的实际值叠在目标值旁做分组对比，一眼看出差距与缺口。
常见问题
数据格式怎么输入？
支持 CSV 格式（逗号分隔，首行为类别标签，后续行为数据）和 JSON 格式（含 categories 数组和 series 对象数组）。两种格式任选其一。
能自定义柱体颜色吗？
能。可自定义每个数据系列的颜色，也支持设置坐标轴标签、图例位置、网格线显示和动画效果。
图表能导出为图片吗？
能。ECharts 渲染的图表可导出为 PNG 位图，支持设置导出分辨率，适合插入文档或演示文稿。
支持多系列对比吗？
支持。在 JSON 数据中添加多个 series 对象即可实现多系列分组柱状图，不同系列用不同颜色区分，适合把多个指标并排比较。
纵轴从 0 开始时合适吗？
柱状图原则上应从 0 开始，否则柱高比会失真并夸大差异。若柱顶都在一个窄区间，可改画折线图或用数值标签辅助，避免误导读者。
数据量很大时图表会卡吗？
本地渲染通常几千到几万点都流畅；数据点极多时可对标签做抽样或关闭动画来提速，并避免网格线与图例过于密集影响可读性。
数据会被上传吗？
不会。所有数据在浏览器本地通过 ECharts 渲染，不经过任何服务器，可放心处理未公开的业绩或运营数据。
数据条数太多，图表挤成一团？
图表可读性有上限：折线图超过几十个点就需要抽稀或聚合，柱状图超过十几根就该考虑横向条形图或分组。先聚合（按日/周/类目合并）再画，比在样式里缩小柱宽更能解决问题。