立体柱状图echarts 配置项内容和展示

      // 立体柱状图

const colors = [{
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#8331D9"
            },
            {
                offset: 0.5,
                color: "#720DFF"
            },
            {
                offset: 0.5,
                color: "#B635FC"
            },
            {
                offset: 1,
                color: "#7F2CF1"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#F27921"
            },
            {
                offset: 0.5,
                color: "#EE3E70"
            },
            {
                offset: 0.5,
                color: "#F48D35"
            },
            {
                offset: 1,
                color: "#C82957"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#F17620"
            },
            {
                offset: 0.5,
                color: "#F5D01C"
            },
            {
                offset: 0.5,
                color: "#EF8E08"
            },
            {
                offset: 1,
                color: "#FEDC44"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#4D34FF"
            },
            {
                offset: 0.5,
                color: "#244EFB"
            },
            {
                offset: 0.5,
                color: "#5034D9"
            },
            {
                offset: 1,
                color: "#316CE8"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#20AAF8"
            },
            {
                offset: 0.5,
                color: "#2C74FF"
            },
            {
                offset: 0.5,
                color: "#27AEFA"
            },
            {
                offset: 1,
                color: "#4D8AFF"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#289DF5"
            },
            {
                offset: 0.5,
                color: "#0DE8FF"
            },
            {
                offset: 0.5,
                color: "#49B1FB"
            },
            {
                offset: 1,
                color: "#17E9FD"
            }
        ]
    },
    {
        type: "linear",
        x: 1,
        y: 0,
        x2: 0,
        y2: 0,
        colorStops: [{
                offset: 0,
                color: "#4FC3B2"
            },
            {
                offset: 0.5,
                color: "#49B5A3"
            },
            {
                offset: 0.5,
                color: "#57D1BF"
            },
            {
                offset: 1,
                color: "#5AD1BD"
            }
        ]
    }
];
const barWidth = 30;

option = {
    backgroundColor: '#182027',
    tooltip: {
        trigger: "item"
    },
     grid: {
        left: 40,
        right: 40,
        bottom: 100,
        top: 100,
        containLabel: true
    },
    xAxis: {
        data: ["1", "2", "3", "4", "5"],
        axisTick: {
            show: true
        },
        axisLine: {
                lineStyle: {
                    color: '#425b78'
                }
            },
            axisLabel: {
                color: '#b9bec6',
                 fontSize: 14
            }
    },
    yAxis: {
            type: 'value',
            name: '单位 / K㎡',
            nameTextStyle:{
                         color:"#b9bec6", 
                         fontSize:12,  
                     },
            axisLine: {
                lineStyle: {
                    color: '#425b78',
                    fontSize: 14
                }
            },
            splitLine: {
                show: true,
                lineStyle: {
                    color: '#587485',
                },
            },
            axisLabel: {
                show: true,
                textStyle: {
                    color: '#b9bec6',

                },
            },
        },
    series: [{
            z: 1,
            type: "bar",
            barWidth: barWidth,
            data: [{
                    value: 220,
                    itemStyle: {
                        normal: {
                            color: colors[1]
                        }
                    }
                },
                {
                    value: 182,
                    itemStyle: {
                        normal: {
                            color: colors[2]
                        }
                    }
                },
                {
                    value: 191,
                    itemStyle: {
                        normal: {
                            color: colors[3]
                        }
                    }
                },
                {
                    value: 234,
                    itemStyle: {
                        normal: {
                            color: colors[4]
                        }
                    }
                },
                {
                    value: 290,
                    itemStyle: {
                        normal: {
                            color: colors[5]
                        }
                    }
                }
            ]
        },
        {
            z: 2,
            name: "底部",
            type: "pictorialBar",
            data: [{
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[1]
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[2]
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[3]
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[4]
                        }
                    }
                },
                {
                    value: 1,
                    itemStyle: {
                        normal: {
                            color: colors[5]
                        }
                    }
                }
            ],
            symbol: "diamond",
            symbolOffset: [0, "50%"],
            symbolSize: [barWidth, 10]
        },
        {
            z: 3,
            name: "上部1",
            type: "pictorialBar",
            symbolPosition: "end",
            data: [{
                    value: 220,
                    itemStyle: {
                        normal: {
                            borderColor: colors[1],
                            borderWidth: 2,
                            color: colors[1]
                        }
                    }
                },
                {
                    value: 182,
                    itemStyle: {
                        normal: {
                            borderColor: colors[2],
                            borderWidth: 2,
                            color: colors[2]
                        }
                    }
                },
                {
                    value: 191,
                    itemStyle: {
                        normal: {
                            borderColor: colors[3],
                            borderWidth: 2,
                            color: colors[3]
                        }
                    }
                },
                {
                    value: 234,
                    itemStyle: {
                        normal: {
                            borderColor: colors[4],
                            borderWidth: 2,
                            color: colors[4]
                        }
                    }
                },
                {
                    value: 290,
                    itemStyle: {
                        normal: {
                            borderColor: colors[5],
                            borderWidth: 2,
                            color: colors[5]
                        }
                    }
                }
            ],
            symbol: "diamond",
            symbolOffset: [0, "-50%"],
            symbolSize: [barWidth - 4, (10 * (barWidth - 4)) / barWidth]
        }
    ]
}