Echarts 3D立体柱状图(源码+例图)

Echarts 3D立体柱状图，3D长方体柱状图，直接cope源码可用(源码+例图)

废话不多说，直接上代码！！！ 

// HTML 代码
<div id="litiBar" style="width:100%;height:400px" ></div>

// JS 代码
data(){
  return {
    chart:null
  }
};
mounted(){
    // 3D立体柱状图
    this.litiBar();
},
methods:{
    litiBar() {
            this.chart = echarts.init(document.getElementById('litiBar'));
            // 创建立方体正面图形
            const cubeShape1 = echarts.graphic.extendShape({
                shape: {
                x: 0,
                y: 0,
                width: 110, // 长方体宽度
                zWidth: 8, // 阴影折角高
                zHeight: 4 // 阴影折角宽
                },
                buildPath: (ctx, shape) => {
                const api = shape.api;
                const xAxisPoint = api.coord([shape.xValue, 0]);
                const p0 = [shape.x, shape.y];
                const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];
                const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];
                const p2 = [xAxisPoint[0] - shape.width / this.xAxisText.length, xAxisPoint[1]];
                const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];
        
                // 绘制正面
                ctx.moveTo(p0[0], p0[1]); //0
                ctx.lineTo(p1[0], p1[1]); //1
                ctx.lineTo(p2[0], p2[1]); //2
                ctx.lineTo(p3[0], p3[1]); //3
                ctx.lineTo(p4[0], p4[1]); //4
                ctx.lineTo(p0[0], p0[1]); //0
                ctx.closePath();
                }
            })

            // 创建立方体的顶和侧面
            const cubeShape2 = echarts.graphic.extendShape({
                shape: {
                x: 0,
                y: 0,
                width: 110,
                zWidth: 8,
                zHeight: 4
                },
                buildPath: (ctx, shape) => {
                const api = shape.api;
                const xAxisPoint = api.coord([shape.xValue, 0]);
                const p1 = [shape.x - shape.width / this.xAxisText.length, shape.y];
                const p4 = [shape.x + shape.width / this.xAxisText.length, shape.y];
                const p6 = [shape.x + shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
                const p7 = [shape.x - shape.width / this.xAxisText.length + shape.zWidth, shape.y - shape.zHeight];
                const p3 = [xAxisPoint[0] + shape.width / this.xAxisText.length, xAxisPoint[1]];
                const p5 = [xAxisPoint[0] + shape.width / this.xAxisText.length + shape.zWidth, xAxisPoint[1] - shape.zHeight];
        
                // 绘制侧面
                ctx.moveTo(p4[0], p4[1]); //4
                ctx.lineTo(p3[0], p3[1]); //3
                ctx.lineTo(p5[0]+6, p5[1]-6); //5
                ctx.lineTo(p6[0]+7, p6[1]-8); //6
                ctx.lineTo(p4[0], p4[1]); //4
        
                // 绘制顶部
                ctx.moveTo(p4[0], p4[1]); //4
                ctx.lineTo(p6[0]+7, p6[1]-8); //6
                ctx.lineTo(p7[0]+7, p7[1]-8); //7
                ctx.lineTo(p1[0], p1[1]); //1
                ctx.lineTo(p4[0], p4[1]); //4
                ctx.closePath();
                }
            })

            echarts.graphic.registerShape('cubeShape1', cubeShape1)
            echarts.graphic.registerShape('cubeShape2', cubeShape2)
            this.initECharts()
        },
   initECharts() {
            const option = {
                title: {
                    left: 20,
                    top: 20
                },
                textStyle:{
                    fontSize:15,
                    color: '#10D5DF'
                },
                tooltip: {},
                xAxis: {
                    type: 'category',
                    //  max: 'dataMax',// 柱状图以数据最大的为顶点
                    data: this.xAxisText,
                    interval: 0,
                    axisLabel: {
                        color: '#44f0ff'
                    },
                    axisTick: {
                        show: false,
                    },// 隐藏X刻度线
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(28, 180, 215,0.5)'
                        }
                    }
                },
                yAxis: {
                    type: 'value',
                    splitLine: {
                        lineStyle:{
                            color: 'rgba(224,224,224,0.1)'// 分割轴线的颜色
                        }
                    },
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: 'rgba(28, 180, 215,0.5)'
                        }
                    }
                },
                 grid: {
                    top: 80,
                    bottom: 30
                },
                series: [{
                    // name: '销量统计',
                    type: 'custom',
                    label: {
                        show: true,
                        position: 'top',
                    },
                    // barWidth:20,
                    renderItem: (params, api) => {
                        let location = api.coord([api.value(0), api.value(1)])
                        return {
                            type: 'group',
                            children: [{
                                type: 'cubeShape1', // 正方体正面
                                shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1]
                                },
                                style: {
                                fill: new echarts.graphic.LinearGradient(0,0,0,1, [{
                                    offset: 0.1,
                                    color: 'rgba(27, 202, 242, 1)'
                                    
                                },{
                                    offset: 1,
                                    color: 'rgba(29, 111, 130, 1)'
                                }])
                                }
                            }, {
                                type: 'cubeShape2', // 正方体侧面和顶
                                shape: {
                                api,
                                xValue: api.value(0),
                                yValue: api.value(1),
                                x: location[0],
                                y: location[1]
                                },
                                style: {
                                fill: new echarts.graphic.LinearGradient(0,0,0,1, [{
                                    offset: 0.1,
                                    color: 'rgba(29, 111, 130, 1)'
                                },{
                                    offset: 1,
                                    color: 'rgba(27, 202, 242, 1)'
                                }])
                                }
                            }]
                        }
                    },
                    data: this.yAxisData
                }]
            }
            this.chart.setOption(option)
        },
}