伪3D柱状图echarts custom配置项内容和展示

      const CubeLeft = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c0 = [shape.x, shape.y]
        const c1 = [shape.x - 10, shape.y - 4]
        const c2 = [xAxisPoint[0] - 10, xAxisPoint[1] - 4]
        const c3 = [xAxisPoint[0], xAxisPoint[1]]
        ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
    }
});
const CubeRight = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        const xAxisPoint = shape.xAxisPoint
        const c1 = [shape.x, shape.y]
        const c2 = [xAxisPoint[0], xAxisPoint[1]]
        const c3 = [xAxisPoint[0] + 8, xAxisPoint[1] - 4]
        const c4 = [shape.x + 8, shape.y - 4]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
});
const CubeTop = echarts.graphic.extendShape({
    shape: {
        x: 0,
        y: 0
    },
    buildPath: function(ctx, shape) {
        // 逆时针 角 y 负数向上  X 负数向左
        const c1 = [shape.x, shape.y]
        const c2 = [shape.x + 8, shape.y - 4]
        const c3 = [shape.x - 2, shape.y - 8]
        const c4 = [shape.x - 10, shape.y - 4]
        ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
    }
});
echarts.graphic.registerShape('CubeLeft', CubeLeft);
echarts.graphic.registerShape('CubeRight', CubeRight);
echarts.graphic.registerShape('CubeTop', CubeTop);
option = {
    grid: {
        left: 50,
        top: 35,
        right: 12,
        bottom: 42,
    },
    tooltip: {
        show: true,
        trigger: 'axis',
        formatter: '{b}:<br>{c} 个',
        axisPointer: {
            type: 'shadow'
        }
    },
    xAxis: {
        type: "category",
        axisLabel: {
            color: "#48598a",
            fontSize: 12,
            interval: 0
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: "#c2e3ff",
                type: 'solid'
            }
        },
        data: ["张三","李四","王五","二狗蛋","赵麻子"]
    },
    yAxis: [{
        name: '单位：个',
        nameTextStyle: {
            fontSize: 12,
            color: '#48598a'
        },
        type: "value",
        splitNumber: 3,
        splitLine: {
            lineStyle: {
                type: "dashed",
                color: "#e2e2e2"
            },
        },
        axisLabel: {
            textStyle: {
                color: '#7c89ae',
                fontSize: 12
            }
        },
        axisTick: {
            show: false
        },
        axisLine: {
            lineStyle: {
                color: "#c2e3ff",
                type: 'solid'
            }
        },
    }],
    series: [{
        type: 'custom',
        renderItem: function(params, api) {
            var index = params.dataIndex,
                color1, color2, color3;
            switch (index) {
                case 0:
                    color1 = '#f07373';
                    color2 = '#ffa8a8';
                    color3 = '#fe8f8f';
                    break;
                case 1:
                    color1 = "#eda547";
                    color2 = "#ffbf6b";
                    color3 = "#f7b662";
                    break;
                case 2:
                    color1 = '#8d7eff';
                    color2 = '#c6bffa';
                    color3 = '#a194ff';
                    break;
                default:
                    color1 = '#2590eb';
                    color2 = '#5eb5ff';
                    color3 = '#329bf5';
                    break;
            }
            const location = api.coord([api.value(0), api.value(1)])
            return {
                type: 'group',
                children: [{
                    type: 'CubeLeft',
                    shape: {
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: color1
                    }
                }, {
                    type: 'CubeRight',
                    shape: {
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: color2
                    }
                }, {
                    type: 'CubeTop',
                    shape: {
                        xValue: api.value(0),
                        yValue: api.value(1),
                        x: location[0],
                        y: location[1],
                        xAxisPoint: api.coord([api.value(0), 0])
                    },
                    style: {
                        fill: color3
                    }
                }]
            }
        },
        data: [100,90,80,70,60]
    }, {
        type: 'line',
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
            color: 'transparent'
        },
        itemStyle: {
            color: 'transparent',
            borderWidth: 0
        },
        label: {
            normal: {
                show: true,
                position: 'top',
                fontWeight: 'bold',
                fontSize: 12,
                formatter: function(params) {
                    switch (params.dataIndex) {
                        case 0:
                            return '{a|' + params.value + '}'
                            break;
                        case 1:
                            return '{b|' + params.value + '}'
                            break;
                        case 2:
                            return '{c|' + params.value + '}'
                            break;
                        default:
                            return '{d|' + params.value + '}'
                            break;
                    }
                },
                rich: {
                    a: {
                        color: '#f07373',
                        fontWeight: 'bold'
                    },
                    b: {
                        color: '#eda547',
                        fontWeight: 'bold'
                    },
                    c: {
                        color: '#8d7eff',
                        fontWeight: 'bold'
                    },
                    d: {
                        color: '#2590eb',
                        fontWeight: 'bold'
                    }
                }
            }
        },
        data: [100,90,80,70,60]
    }]
}