echarts 立体柱形图

如图：

下载echarts：版本如下：

 "echarts": "^4.9.0",

vue文件：

<template>
    <div>
      <div id="main" ref="dom"></div>
    </div>
</template>
<script setup>
import { onMounted } from 'vue'
import * as echarts from 'echarts';

onMounted(()=>{
  var MyCubeRect = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
        width: 24, //柱宽        
        zWidth: 4, //阴影折角宽        
        zHeight: 0, //阴影折角高 
    },
    buildPath: function (ctx, shape) {
        const api = shape.api;
        //坐标系列
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x, shape.y];
        const p1 = [shape.x - 12, shape.y];
        const p4 = [shape.x + 12, shape.y];
        const p2 = [xAxisPoint[0] - 12, xAxisPoint[1]];
        const p3 = [xAxisPoint[0] + 12, 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();
    }
});
var MyCubeShadow = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0,
        width: 15,
        zWidth: 6,
        zHeight: 4,
    },
    buildPath: function (ctx, shape) {
        const api = shape.api;
        const xAxisPoint = api.coord([shape.xValue, 0]);
        const p0 = [shape.x, shape.y];
        const p1 = [shape.x - 12, shape.y];
        const p4 = [shape.x + 12, shape.y];
        const p6 = [shape.x + 12 + 6, shape.y - 5];
        const p7 = [shape.x - 12 + 6, shape.y - 5];
        const p3 = [xAxisPoint[0] + 12, xAxisPoint[1]];
        const p5 = [xAxisPoint[0] + 12 + 6, xAxisPoint[1] - 5];
      
        ctx.moveTo(p4[0], p4[1]); //4
        ctx.lineTo(p3[0], p3[1]); //3
        ctx.lineTo(p5[0], p5[1]); //5
        ctx.lineTo(p6[0], p6[1]); //6
        ctx.lineTo(p4[0], p4[1]); //4
      
        ctx.moveTo(p4[0], p4[1]); //4
        ctx.lineTo(p6[0], p6[1]); //6
        ctx.lineTo(p7[0], p7[1]); //7
        ctx.lineTo(p1[0], p1[1]); //1
        ctx.lineTo(p4[0], p4[1]); //4
        ctx.closePath();
    }
});
echarts.graphic.registerShape('MyCubeRect', MyCubeRect);
echarts.graphic.registerShape('MyCubeShadow', MyCubeShadow);
var seriesData =  [20,100,50,44,12];
let option = {
    xAxis: {
        data: ['直接访问', '邮件营销', '联盟广告', '视频广告', '搜索引擎']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        type: 'custom',
        data: seriesData,
        renderItem: function (params, api) {
            let location = api.coord([api.value(0), api.value(1)]);
            return {
                type: 'group',
                children: [
                  // 正面
                {
                    type: 'MyCubeRect', // shape 属性描述了这个矩形的像素位置和大小
                    shape: {
                        api,
                        xValue: api.value(0),//表示取出当前 dataItem 中第一个维度的数值
                        yValue: api.value(0), 
                        x: location[0],
                        y: location[1]
                        
                    },
                    style: {
                        //边框颜色
                        stroke: 'rgba(255,255,255,1)',
                        //平面颜色
                        // fill:{ //渐变
                        //     type: 'linear',
                        //     x: 0,
                        //     y: 0,
                        //     x2: 0,
                        //     y2: 1,
                        //     colorStops: [{
                        //         offset: 0, color: '#3F66EC' // 0% 处的颜色
                        //     }, {
                        //         offset: 1, color: '#8092D0' // 100% 处的颜色
                        //     }],
                        //     global: false // 缺省为 false
                        // },
                        fill: '#4067EB', 
                        // text:seriesData[params.dataIndex],
                        // textPosition:[10,-20] //文字显示位置
                    }
                },
                // 侧面和顶部
                {
                    type: 'MyCubeShadow',
                    shape: {
                        api,
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1]
                    },
                    style: {
                        //边框颜色
                        stroke: '#ffffff', 
                        // stroke: {
                        //     type: 'linear',
                        //     x: 0,
                        //     y: 0,
                        //     x2: 0,
                        //     y2: 1,
                        //     colorStops: [{
                        //         offset: 0, color: '#8092D0' // 0% 处的颜色
                        //     }, {
                        //         offset: 1, color: '#3F66EC' // 100% 处的颜色
                        //     }],
                        //     global: false // 缺省为 false
                        // },
                        fill: '#4067EB'//平面颜色
                    }
                }]
            };
        }
    }]
};
let dom = echarts.init(document.getElementById("main"));
dom.setOption(option, true)

})



</script>
<style>
#main {
  width: 400px;
  height: 300px;   

}
</style>