echarts立体柱状图

  zhuShowChart() {
            let chart = echarts.init(document.getElementById('zhu'))

            var xData = ["1","2","3","4"]
            var line = ["7092", "3014", "4198", "32"];
          
            let option = {
                 tooltip: {
                     show: false,
                     trigger: 'item',
                     padding: 1,
                     formatter: function (param) {

                         var resultTooltip =
                             "<div style='background:rgba(13,5,30,.6);border:1px solid rgba(255,255,255,.2);padding:5px;border-radius:3px;'>" +
                             "<div style='text-align:center;'>" + param.name + "</div>" +
                             "<div style='padding-top:5px;'>" +
                             "<span style=''> " + attr.name + ": </span>" +
                             "<span style=''>" + param.value + "</span><span>" + attr.unit + "</span>" +
                             "</div>" +
                             "</div>";
                         return resultTooltip
                     }
                 },
               
                grid: {
                    left: '15%',
                    top: '20%',
                    right: '5%',
                    bottom: '30%',
                },
         
                xAxis: [{
                    data: xData,
                    axisLabel: {
                        textStyle: {
                            color: '#fff',
                            fontSize: 14,

                        },
                        interval: 0,
                        rotate: 20,

                        margin: 15, //刻度标签与轴线之间的距离。
                    },

                    axisLine: {
                        show: true //不显示x轴
                    },
                    axisTick: {
                        show: false //不显示刻度
                    },
                    boundaryGap: true,
                    splitLine: {
                        show: false,
                        width: 0.08,
                        lineStyle: {
                            type: "solid",
                            color: "#03202E"
                        }
                    }
                }],
                yAxis: [{
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#888',
                            type: 'dashed'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLine: {
                        show: false
                    },
                    axisLabel: {
                        textStyle: {
                            color: '#fff'
                        },
                    }
                }],
                series: [
                    {//柱底圆片
                        name: "",
                        type: "pictorialBar",
                        symbolSize: [20, 10],
                        symbolOffset: [0, 5],
                        z: 12,
                        itemStyle: {
                            "normal": {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                    offset: 0,
                                    color: "#00339A"
                                },
                                {
                                    offset: 1,
                                    color: "#508AFF"
                                }
                                ])
                            }
                        },
                        data: line
                    },

                    //柱体
                    {
                        name: '',
                        type: 'bar',
                        barWidth: 20,
                        barGap: '0%',
                        itemStyle: {
                            "normal": {
                                "color": {
                                    "x": 0,
                                    "y": 0,
                                    "x2": 0,
                                    "y2": 1,
                                    "type": "linear",
                                    "global": false,
                                    "colorStops": [{//第一节下面
                                        "offset": 0,
                                        "color": "#00339A"
                                    }, {
                                        "offset": 1,
                                        "color": "#00339A"
                                    }]
                                }
                            }
                        },

                        data: line
                    },

                    //柱顶圆片
                    {
                        name: "",
                        type: "pictorialBar",
                        symbolSize: [20, 10],
                        symbolOffset: [0, -5],
                        z: 12,
                        symbolPosition: "end",
                        label: {
                            "normal": {
                                "show": true,
                                "position": "top",
                                "formatter": "{c}",
                                'textStyle': {
                                    'color': "#eee",
                                    'fontSize': '15',
                                },
                            }
                        },
                        "itemStyle": {
                            "normal": {
                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1,
                                    [{
                                        offset: 0,
                                        color: "#508AFF"
                                    },
                                    {
                                        offset: 1,
                                        color: "#00339A"
                                    }
                                    ],
                                    false
                                ),
                            }
                        },
                        data: line
                    }
                ]
            }

            chart.clear();
            chart.setOption(option);
            window.addEventListener('resize', function () {
                chart.resize();
            });
          
            // 监听容器的大小使图表大小跟着变化
            // setTimeout(function () {
            //     window.onresize = function () {
            //         chart.resize()
            //     }
            // })
        },