echarts 實現正負軸雙柱狀圖

option = {
    title: {
        show: true,
        text: '產品留存分析',
        textAlign: 'auto',
        left: 'center'
    },
    tooltip: {
        show: false,
        trigger: 'axis',
        axisPointer: {            // 坐標軸指示器，坐標軸觸發有效
            type: 'shadow'        // 默認為直線，可選為：'line' | 'shadow'
        }
    },
    legend: {
        show: false,
        data: ['利潤', '支出', '收入']
    },
    grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
    },
    xAxis: [
        {
            type: 'value',show:false,
            splitLine:{
        　　　　show:false
        　　},
            axisTick: {
                show: false
            },
        }
    ],
    yAxis: [
        {
            type: 'category',
            axisTick: {
                show: false
            },
            axisLine:{
                show: true,
                onZero:false,
                
            },
            axisTick: {
                show: false
            },
            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
            
            splitLine:{
        　　　　show:false
        　　}

        }
    ],
    color: ['#0033cc'],
    series: [
        {
            name: '支出',
            type: 'bar',
            stack: '總量',
            label: {
                show: false,
                color:'white',
                // position: 'insideRight',
                // distance: -11
            },
            data: [-200, -302, -341, -500, -200, -450, -800]
        },
        {
            name: '收入',
            type: 'bar',
            stack: '總量',
            z:10,//防止數字被覆蓋
            label: {
                show: true,
                color:'white',
                position: 'insideLeft',
                distance: -11
            },
            data: [200, 302, 341, 500, 200, 450, 800]
        }
    ]
};

 

效果如下：