Echarts立体柱状图

const barOption = {
    grid: {
        top: '20%',
        left: '10%',
        right: '10%',
        bottom: '10%',
        containLabel: true
    },
    xAxis: {
        type: 'category',
        data: ['开工', '施工', '竣工投产', '结算'],
        axisTick: {
            show: false,//是否显示刻度线
            alignWithLabel: true//是否与刻度线对齐
        },
        axisLine: {
            lineStyle: {
                color: 'rgba(110, 112, 121, 0.2)',
            },
        },
        axisLabel: {
            color: '#666',
            margin: 16
        },
    },
    yAxis: {
        type: 'value',
        axisLine: {
            show: true,//是否显示y轴
            lineStyle: {
                color: 'rgba(110, 112, 121, 0.2)',
            },
        },
        splitLine: {
            show: false,//是否显示网格线
        },
        axisLabel: {
            show: false,//是否显示y轴文字
        },
    },
    series: [
        {
            data: [
                {
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(251, 174, 81, 0.902)", // 最上边
                                    },
                                    {
                                        offset: 0.44,
                                        color: "rgba(247, 205, 96, 0.902)", // 最上边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(245, 222, 165, 0.902)", //下边
                                    },
                                ],
                            }
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        position: [0, -20],
                        formatter: '{c}个',
                        textStyle: {
                            color: '#FDB054'
                        }
                    },
                },
                {
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(40, 170, 210, 0.902)", // 最上边
                                    },
                                    {
                                        offset: 0.44,
                                        color: "rgba(45, 194, 224, 0.902)", // 最上边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(85, 218, 240, 0.902)", //下边
                                    },
                                ],
                            }
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        position: [0, -20],
                        formatter: '{c}个',
                        textStyle: {
                            color: '#2DBBD6'
                        }
                    },
                },
                {
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(50, 200, 153, 0.902)", // 最上边
                                    },
                                    {
                                        offset: 0.44,
                                        color: "rgba(59, 223, 182, 0.902)", // 最上边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(70, 246, 212, 0.902)", //下边
                                    },
                                ],
                            }
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        position: [0, -20],
                        formatter: '{c}个',
                        textStyle: {
                            color: '#36CD9F'
                        }
                    },
                },
                {
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(6, 81, 224, 0.902)", // 最上边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(150, 184, 255, 0.902)", //下边
                                    },
                                ],
                            }
                        }
                    },
                    label: {
                        show: true,
                        position: 'top',
                        position: [0, -20],
                        formatter: '{c}个',
                        textStyle: {
                            color: '#2F6EE7'
                        }
                    },
                }
            ],
            type: 'bar',
            barWidth: 13,
            barGap: 0,
        },
        {
            data: [
                {
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(250, 221, 131, 0.671)", // 最上边
                                    },
                                    {
                                        offset: 0.44,
                                        color: "rgba(250, 243, 140, 0.671)", // 最上边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(250, 250, 204, 0.671)", //下边
                                    },
                                ],
                            }
                        }
                    }
                },
                {
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(90, 200, 232, 0.671)", // 最上边
                                    },
                                    {
                                        offset: 0.44,
                                        color: "rgba(94, 220, 243, 0.671)", // 最上边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(147, 238, 250, 0.671)", //下边
                                    },
                                ],
                            }
                        }
                    }
                },
                {
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(98, 229, 188, 0.671)", // 最上边
                                    },
                                    {
                                        offset: 0.44,
                                        color: "rgba(102, 242, 205, 0.671)", // 最上边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(111, 250, 233, 0.671)", //下边
                                    },
                                ],
                            }
                        }
                    }
                },
                {
                    value: 0,
                    itemStyle: {
                        normal: {
                            color: {
                                type: "linear",
                                x: 0,
                                x2: 0,
                                y: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(21, 91, 230, 0.671)", // 最上边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(148, 183, 255, 0.671)", //下边
                                    },
                                ],
                            }
                        }
                    }
                }
            ],
            type: 'bar',
            barWidth: 12,
            barGap: 0,
        },
        {
            z: 2,
            type: 'pictorialBar',
            symbol: 'diamond',
            symbolOffset: [0, 7],
            symbolSize: [26, 26 * 0.5],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: function (params) {
                        let colorList = [
                            {
                                type: "linear",
                                x: 0,
                                x2: 1,
                                y: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "rgba(245, 222, 165, 0.902)", // 最上边
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(245, 222, 165, 0.902)', // 最上边
                                    },
                                    {
                                        offset: 0.51,
                                        color: "rgba(250, 250, 204, 0.671)", //下边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(250, 250, 204, 0.671)", //下边
                                    },
                                ],
                            },
                            {
                                type: "linear",
                                x: 0,
                                x2: 1,
                                y: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(85, 218, 240, 0.902)', // 最上边
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(85, 218, 240, 0.902)', // 最上边
                                    },
                                    {
                                        offset: 0.51,
                                        color: "rgba(147, 238, 250, 0.671)", //下边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(147, 238, 250, 0.671)", //下边
                                    },
                                ],
                            },
                            {
                                type: "linear",
                                x: 0,
                                x2: 1,
                                y: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(70, 246, 212, 0.902)', // 最上边
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(70, 246, 212, 0.902)', // 最上边
                                    },
                                    {
                                        offset: 0.51,
                                        color: "rgba(111, 250, 233, 0.671)", //下边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(111, 250, 233, 0.671)", //下边
                                    },
                                ],
                            },
                            {
                                type: "linear",
                                x: 0,
                                x2: 1,
                                y: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: 'rgba(150, 184, 255, 0.902)', // 最上边
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(150, 184, 255, 0.902)', // 最上边
                                    },
                                    {
                                        offset: 0.51,
                                        color: "rgba(148, 183, 255, 0.671)  ", //下边
                                    },
                                    {
                                        offset: 1,
                                        color: "rgba(148, 183, 255, 0.671)", //下边
                                    },
                                ],
                            }
                        ];
                        return colorList[params.dataIndex]
                    }
                },
            },
            data: [0, 0, 0, 0],
        },
        {
            //上面的顶
            z: 5,
            type: "pictorialBar",
            symbolPosition: "end",
            symbol: "diamond",
            symbolOffset: [0, -7],
            symbolSize: [26, 26 * 0.5],
            itemStyle: {
                normal: {
                    borderWidth: 0,
                    color: function (params) {
                        let colorList = ['#ECB54B', '#1BBBE1', '#2BD8AB', '#4380FD'];
                        return colorList[params.dataIndex]
                    }
                },
            },
            data: [0, 0, 0, 0],
        },
    ]
}