正负堆叠柱形图echarts 柱状配置项内容和展示

配置项如下
              option = {
            color: ['#0F7BF3', '#EF5C86'],
            tooltip: {
                trigger: 'axis',
                axisPointer: { // 坐标轴指示器,坐标轴触发有效
                    type: 'shadow' // 默认为直线,可选为:'line' | 'shadow'
                }
            },
            legend: {
                // data: ['利润', '支出', '收入'],
                data: ['支出', '收入'],
                itemGap: 50, 
                bottom: 10
            },
            grid: {
                top: 0,
                left: '3%',
                right: '4%',
                bottom: 80,
                containLabel: true
            },
            yAxis: [{
                type: 'value',
                show: false
            }],
            xAxis: [{
                type: 'category',
                axisLine: {
                    show: false //隐藏x轴线
                },
                axisTick: {
                    show: false //隐藏刻度
                },
                data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
            }],
            series: [
                // {
                //     name: '利润',
                //     type: 'bar',
                //     label: {
                //         show: true,
                //         position: 'inside'
                //     },
                //     data: [200, 170, 240, 244, 200, 220, 210]
                // },
                {
                    name: '收入',
                    type: 'bar',
                    stack: '总量', //数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置
                    itemStyle: {
                        normal: {
                            // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            //     offset: 0,
                            //     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                            // }, {
                            //     offset: 1,
                            //     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                            // }], false),
                            barBorderRadius: [20, 20, 0, 0],
                        }
                    },
                    label: {
                        show: true,
                        position: 'top'
                    },
                    data: [320, 302, 341, 374, 390, 450, 420]
                },
                {
                    name: '支出',
                    type: 'bar',
                    stack: '总量', //数据堆叠,同个类目轴上系列配置相同的stack值可以堆叠放置
                    barWidth: 40, //最后一个设置,可全局通用
                    itemStyle: {
                        normal: {
                            // color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                            //     offset: 0,
                            //     color: 'rgba(0,244,255,1)' // 0% 处的颜色
                            // }, {
                            //     offset: 1,
                            //     color: 'rgba(0,77,167,1)' // 100% 处的颜色
                            // }], false),
                            barBorderRadius: [0, 0, 20, 20],
                        }
                    },
                    label: {
                        show: true,
                        position: 'bottom'
                    },
                    data: [-120, -132, -101, -134, -190, -230, -210]
                }
            ]
        };
    
截图如下