简单的立体柱状图效果实现-pictorialBar异形柱状图

效果图

image.png

"series": [{
                "name": "",
                "type": "pictorialBar",
                "symbolSize": [30, 10],
                "symbolOffset": [0, -5],
                "symbolPosition": "end",
                "z": 12,
                color: 'rgba(79, 216, 152, 1)', //顶部颜色
                "data": [4600, 3100]
            }, {
                "name": "",
                "type": "pictorialBar",
                "symbolSize": [30, 10],
                "symbolOffset": [0, 5],
                "z": 12,
                "data": [4600, 3100],
                color: 'rgba(183, 255, 243, 1)', //底部颜色
            }, {
                "type": "bar",
                "itemStyle": {
                    "normal": {
                        "opacity": 0.7
                    }
                },
                "barWidth": "30",
                "label": {
                    "normal": {
                        "show": true,
                        "position": "top",
                        color: '#fff',
                        fontSize: 13,
                        "formatter": "{c}"
                    }
                },
                "data": [4600, 3100],
            }]