ECharts 伪 3D 柱状图完整注释 + 实现原理说明

代码注释顶部标注 // 多系列无法定位：该方案只支持单组数据，如果多系列多根柱子并排，pictorialBar 菱形底座 / 顶盖无法精准对齐每一根柱子，会错位。

核心实现原理前置说明

ECharts 没有原生 3D 柱状图 bar3D （echarts-gl 是独立 3D 组件，此代码未引入 gl），本方案是2D 图层叠加模拟立体柱子：

底层：普通bar矩形柱体（柱子主体）
下层装饰：pictorialBar菱形（柱子底部切面，模拟立体底座）
上层装饰：pictorialBar菱形（柱子顶部切面，模拟立体封顶）通过三层 series 设置不同z层级上下叠加，搭配渐变填充、菱形斜面，视觉欺骗出 3D 立体效果。
如果需要支持多系列、真 3D 旋转视角，需要引入 echarts-gl 插件，使用 bar3D 系列，不需要多层 pictorialBar 叠加。
单系列正常逻辑 只有一组 bar 数据时，pictorialBar 的 data 长度、类目位置和 bar 完全匹配，菱形底座 / 顶盖能精准落在每根柱子上下。

多系列失效原因 当存在两组及以上 bar（多组并列柱子）：

pictorialBar 是全局类目渲染，无法区分第 1 组柱、第 2 组柱；
菱形图形会居中在类目格子中间，和多根并列柱子错位；
没有配置参数可以控制 pictorialBar 偏移到对应系列柱子位置，因此多系列场景该伪 3D 方案不可用。

javascript 复制代码

// 全局通用文字线条灰色
var normalColor = "#94a1a9";

/**
 * 渐变颜色数组，两套线性渐变用于柱子填充
 * 渐变类型：水平线性渐变（x从0到1，y不变=横向渐变）
 */
var colors = [{
    type: 'linear',       // 渐变类型：线性渐变
    x: 0, x2: 1,          // 渐变起点x=0，终点x=1 → 水平左右渐变
    y: 0, y2: 0,          // y全程不变，无上下渐变
    colorStops: [{         // 渐变分段色标
        offset: 0, color: '#0a4368'
    }, {
        offset: 0.5, color: '#0a4368'
    }, {
        offset: 0.5, color: '#0a4368'
    }, {
        offset: 1, color: '#0a4368'
    }]
}, {
    type: 'linear',
    x: 0, x2: 1,
    y: 0, y2: 0,
    colorStops: [{
        offset: 0, color: 'rgba(10, 67, 104,0.6)'
    }, {
        offset: 0, color: '#fff'
    }, {
        offset: 0.05, color: 'rgba(10, 67, 104,0.6)'
    }, {
        offset: 0.5, color: 'rgba(10, 67, 104,0.6)'
    }, {
        offset: 0.5, color: '#fff'
    }, {
        offset: 0.55, color: 'rgba(10, 67, 104,0.6)'
    }, {
        offset: 0.95, color: 'rgba(10, 67, 104,0.9)'
    }, {
        offset: 1, color: '#fff'
    }]
}];

// 柱子宽度统一变量，三层图表共用宽度保证对齐
var barWidth = 80;

// ECharts 配置项
option = {
    animation: false, // 关闭图表初始化加载动画，避免立体分层动画错位
    backgroundColor: "#ccc", // 画布背景浅灰色
    title: {
        text: '' // 无图表标题
    },
    // X轴：类目轴，年份分类
    xAxis: {
        type: 'category',
        boundaryGap: true, // 坐标轴两端留白，柱子不会贴紧画布左右边缘
        axisLabel: { // X轴文字样式
            color: normalColor,
            fontSize: 16,
        },
        axisTick: { // 隐藏X轴刻度小短线
            show: false
        },
        axisLine: { // X轴线样式
            show: true,
            lineStyle: {
                type: "dashed", // 虚线坐标轴
                color: normalColor
            }
        },
        splitLine: { // X轴纵向分割线
            show: true,
            lineStyle: {
                type: "dashed",
                color: normalColor
            }
        },
        data: ['2016', '2017', '2018', '2019'] // X轴类目数据
    },
    // Y轴：数值轴，单根数组表示单Y轴
    yAxis: [{
        name: "",
        type: 'value',
        axisLine: { // Y轴线
            show: true,
            lineStyle: {
                color: normalColor,
            }
        },
        axisTick: { // 隐藏Y轴刻度短线
            show: false,
        },
        axisLabel: { // Y轴数值文字
            color: normalColor,
            fontSize: 16,
            margin: 25, // 文字距离Y轴线间距
            formatter: '{value}' // 数值原样展示
        },
        splitLine: { // Y轴横向网格分割线
            show: true,
            lineStyle: {
                type: "dashed",
                color: normalColor
            }
        },
    }, ],
    /**
     * series三层图层叠加实现伪3D柱子，z值越大层级越靠上
     * z=1：底层主体矩形柱子
     * z=2：底层菱形底座（柱子底部斜面）
     * z=3：顶层菱形顶盖（柱子顶部斜面）
     */
    series: [
        // 第一层：柱状图主体（矩形柱身，核心载体）
        {
            z: 1, // 层级最低，在最下方
            type: 'bar', // 基础柱状图
            barWidth: barWidth, // 柱宽统一80px
            label: { // 柱子顶部数值标签
                show: true,
                position: "top", // 文字在柱子上方
                padding: 10,
                textStyle: {
                    color:normalColor,
                    fontSize: 30 // 数值放大突出
                }
            },
            data: [220, 182, 191, 234], // 柱子高度数值
            itemStyle: {
                normal: {
                    color: colors[1] // 柱子填充为第二套渐变
                }
            },
        },
        // 第二层：pictorialBar 菱形底座，模拟柱子底部立体切面
        {
            z: 2, // 层级高于柱身，叠在柱子底部上方
            name: '底部',
            type: 'pictorialBar', // 象形柱状图，自定义图形标记
            data: [1, 1, 1, 1, 1, 1, 1], // 数值固定1，只渲染图形不控制高度
            symbol: 'diamond', // 自定义图形：菱形
            symbolOffset: [0, '50%'], // 图形垂直向下偏移50%，贴在柱子底端
            symbolSize: [barWidth, 10], // 菱形宽=柱宽，高度10px（底座厚度）
            itemStyle: {
                normal: {
                    color: colors[1],
                    borderColor: '#fff', // 白色描边增强立体分割感
                    borderWidth: 2,
                }
            },
        },
        // 第三层：pictorialBar 菱形顶盖，模拟柱子顶部立体切面
        {
            z: 3, // 层级最高，覆盖在柱子最顶端
            name: '上部1',
            type: 'pictorialBar',
            symbolPosition: 'end', // 图形吸附在数值终点（柱子顶端）
            data: [220, 182, 191, 234], // 和柱身高度数值完全一致，精准对齐顶端
            symbol: 'diamond', // 顶部菱形切面
            symbolOffset: [0, '-50%'], // 垂直向上偏移50%，贴合柱子顶端上沿
            symbolSize: [barWidth - 4, 15 * (barWidth - 4) / barWidth], // 菱形略窄于柱身，比例缩小高度
            itemStyle: {
                normal: {
                    borderColor: '#fff', // 白色边框区分顶盖和柱身
                    borderWidth: 2,
                    color: '#0a4368' // 顶盖纯色加深，强化立体明暗对比
                }
            }
        }
    ]
};