柱图单条双向echarts 柱状配置项内容和展示

找了很久没有合适的，自己弄一个

      option = {
   
    legend: {
        data: ['支出', '收入']
    },
        tooltip: {},
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value',
             min: -100,
            max: 100,
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false
            },
            splitLine: {
                show: false
            }
        }
    ],
    yAxis: [
        {
            type: 'category',
            inverse: false,
            data: '',
            axisTick: {
                show: false
            },
            axisLine: {
                show: false
            },
            axisLabel: {
                show: false,
                color: '#fff',
                fontSize: 14,
                // 右对齐
                align: 'left',
                padding: [0, -380, 0, 0],
                verticalAlign: 'bottom',
                lineHeight: 58,
            },
            data: ['']
        }
    ],
    series: [
        {
            name: '收入',
            type: 'bar',
            stack: '总量',
             barGap: '30%',
            barWidth: '20',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                normal: {
                    barBorderRadius: [0, 30, 30, 0],
                    borderWidth: 0
                }
            },
            emphasis:{
                itemStyle: {
                barBorderWidth: 1,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }},
            label: {
                normal: {
                    show: true,
                    color: '#111',
                    fontSize: 22,
                    align: 'right',
                    padding: [0, 10, 100, 0],
                    position: 'right',
                    formatter: function(params) {
                        let res = params.name;
                        let myseries = option.series;
                        res = myseries[0].name + ' \n ' + myseries[0].data[0] + '%';
                        return res;
                    }
                }
            },
            data: [320]
        },
        {
            name: '支出',
            type: 'bar',
            stack: '总量',
             barGap: '30%',
            barWidth: '20',
            xAxisIndex: 0,
            yAxisIndex: 0,
            itemStyle: {
                normal: {
                    barBorderRadius: [30, 0, 0, 30],
                    borderWidth: 0
                }
            },
            emphasis:{
                itemStyle: {
                barBorderWidth: 1,
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowOffsetY: 0,
                shadowColor: 'rgba(0,0,0,0.5)'
            }},
            label: {
                normal: {
                    show: true,
                    color: '#111',
                    fontSize: 22,
                    align: 'left',
                    padding: [0, 10, 100, 0],
                    position: 'left',
                    formatter: function(params) {
                        let res = params.name;
                        let myseries = option.series;
                        res = myseries[1].name + ' \n ' + Math.abs(myseries[1].data[0]) + '%';
                        return res;
                    }
                }
            },
            data: [-120]
        }
    ]
};