Echarts 3D柱状图美化指南：如何用pictorialBar和bar组合打造专业级比例图表

超越平面：用Echarts组合技法打造惊艳的3D比例柱状图

你是否已经厌倦了千篇一律的扁平化柱状图？在数据报表、管理驾驶舱或产品演示中，一个视觉效果出众的图表往往能瞬间抓住决策者的眼球，让数据故事更具说服力。对于有一定Echarts基础的中高级开发者来说，仅仅实现功能早已不够，我们追求的是在信息准确传达的基础上，赋予数据以“高级感”和“空间感”。今天，我们就来深入探讨一种能让你在技术评审或产品汇报中脱颖而出的技巧：如何巧妙地组合 pictorialBar（象形柱状图）与常规 bar，构建出具有强烈立体感和专业美感的3D比例柱状图。这不仅仅是美化，更是一种通过视觉层次清晰表达部分与整体关系的设计哲学。

1. 解构3D柱状图：从“画柱子”到“建模型”

传统认知里，Echarts的3D图表似乎离不开 gl 渲染器或复杂的 surface 配置。但对于表现比例数据的柱状图，我们其实有更轻量、更可控的方案。核心思路在于视觉欺骗——利用2D图层的堆叠与图形符号的巧妙定位，在观感上营造出三维立体效果。

1.1 核心组件：pictorialBar 与 bar 的角色分工

要实现一个立体的柱体，我们需要将其拆解为三个部分：顶部、主体和底部。这正是组合技法的精髓所在。

• **顶部与底部 (type: 'pictorialBar')**： 这两个部分负责塑造柱体的“截面”或“盖帽”效果。pictorialBar` 允许我们使用任意SVG路径或内置图形（如圆形、矩形、三角形、菱形）作为柱体的表现形式。通过将其定位在柱体的起点或终点，我们就能模拟出3D柱体的顶面和底面。菱形因其对称性和棱角感，常被用来模拟有切角的立体顶部，效果非常出色。
• 主体部分 (`type: 'bar')： 柱体的“身躯”由常规的柱状图系列承担。它的作用是填充顶部和底部之间的空间，并通过渐变颜色来强化立体光影感。一个从上到下、由浅入深的线性渐变，能让人眼自然产生“光源从上照射”的立体错觉。

这里的关键在于，这三个部分在数据上必须完全对应，并且通过精细的 symbolOffset（图形偏移）和 symbolSize（图形大小）配置，让它们在视觉上严丝合缝地拼接成一个整体。

提示：pictorialBar 的 symbolPosition 属性至关重要。设置为 'end' 意味着图形对齐在柱体的末端（对于顶部是下端，对于底部是上端？不，这里需要仔细理解），结合 symbolOffset 进行微调，是实现无缝拼接的秘诀。

1.2 比例展示的魔法：stack（数据堆叠）的创造性运用

我们不仅要立体，还要清晰地展示比例（例如完成率、市场份额）。原始数据可能是“已完成”和“未完成”两个绝对值。如何在一个立体柱体内展示这两部分的比例？

答案是：用两套完整的“顶-身-底”组合，并让它们共享同一个柱体空间。听起来复杂，但Echarts的 stack 属性让这一切变得简单。

1. 准备数据：假设我们有“总任务数”数组 total，“已完成”数组 done。
2. 构建第一套柱体（已完成部分）：
   • 系列1（顶部）、系列2（主体）、系列3（底部）的数据都设置为 done。
   • 将它们三者的 stack 值设为同一个，例如 'doneStack'。这样它们就会在垂直方向堆叠（实际上，因为数据相同，主体部分的高度就是 done 值，顶部和底部紧贴其两端）。
3. 构建第二套柱体（未完成部分）：
   • 系列4（顶部）、系列5（主体）、系列6（底部）的数据设置为 total - done（即未完成量）。
   • 关键一步：将这第二套柱体的 stack 值设为另一个不同的值，如 'undoneStack'。
   • 同时，通过 barGap: '-100%' 配置，让这第二套柱体与第一套柱体重叠在同一分类轴上。

这样，未完成部分（第二套柱体）就会从坐标轴原点开始绘制，其高度是“未完成量”。而已完成部分（第一套柱体）则叠加在未完成部分之上，其高度是“已完成量”。最终，用户看到的就是一个完整的、高度为总任务数的立体柱体，其中下半部分是一种颜色（未完成），上半部分是另一种颜色（已完成），比例关系一目了然。

为了增强层次感，我们通常会将作为“背景”的未完成部分颜色设置为半透明或饱和度较低，而前景的已完成部分使用鲜艳的渐变色。

// 系列配置结构示意（非完整代码）
series: [
  // 已完成部分 - 顶部