这是一款基于Three.js 与 WebGL技术实现的可编辑的三维柱状折线图表。一组蓝色立柱沿横轴依次排开，粉色折线连接各月数值，网格、标签与阴影共同构成立体坐标空间。拖动可以观察不同视角，展开侧栏即可编辑数值、增删数据，或切换柱状图、折线图与组合展示，适合需要可操作数据演示的专题页面。

三维柱线图可以直接操作哪些内容

图形与数据同步更新。名称和数值可直接修改，新增、删除与重置操作会重新生成图表，无须手动调整每根柱体。
导入导出覆盖两种用途。数据可保存为 JSON，也可从 JSON 或 CSV 读入；图片另有倍率与透明背景选项。
颜色和视角分别控制。柱体支持统一色与数值渐变，折线和背景可独立换色，镜头也能恢复初始位置。

Three.js图表如何组织柱体、标签与粗线

其一，立柱高度按当前数据范围归一化，数值标签通过 Canvas 绘成纹理精灵，文字可以放入三维场景。其二，折线使用 Line2 配合 LineMaterial 绘制，线宽有独立的屏幕分辨率参数；窗口缩放与导出图片时都要同步更新，才能保持显示比例。控制面板与渲染器分工明确，适合继续接入自己的数据来源。

const LINE_WIDTH = 4;

柱线图的数据与外观从哪里调整

默认月份与数值在 script.js 的 initialData 中，柱间距、柱宽和高度范围也在同一文件。配色可以先在面板中试，再回填到颜色数组；侧栏布局和弹窗样式位于 style.css。导出的 JSON 同时保存数据与显示设置，后续再次导入可以恢复对应状态。

三维图表导入与显示前的常见疑问

打开后没有三维图表怎么办？

此素材需要支持 WebGL 的浏览器和可用的图形加速。脚本采用模块加载，Three.js 与相关扩展已放入本地 vendor 目录；请保留文件结构，并确认浏览器没有禁用 WebGL。

CSV 可以直接使用任意表格格式吗？

当前解析器适合简单的名称、数值两列表格，支持逗号或分号分隔，不是完整的带引号 CSV 解析库。复杂表格应先整理字段；JSON 的 data 数组则使用 label 与 value 字段。

能直接接后台和自动刷新吗？

当前数据由页面编辑或文件导入驱动，没有自动请求接口。可以在现有数据更新入口对接自己的接口，并按业务需求补充异常处理与刷新策略。

适合经营数据演示、活动统计展示和三维可视化原型。完整面板、渲染逻辑与导出实现可下载查看。