堆叠双柱状图

var timeData = ['国保', 'SK', '内保', '治安', '刑事', '信访', '经侦', '涉毒', '涉外','网安'];
option = {
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            animation: false,
        },
    },
    color: ['#5EF1F0', '#98C7FF'],
    legend: {
        data: ['出站乘客数', '进站乘客数'],
        top: 5,
        right: 10,
        itemWidth: 12,
        itemHeight: 12,
        textStyle: {
            color: '#98C7FF',
            fontSize: 12,
        },
    },
    axisPointer: {
        link: {
            xAxisIndex: 'all',
        },
    },
    grid: [
        {
            left: 50,
            right: 50,
            top: '5%',
            height: '30%',
        },
        {
            left: 50,
            right: 50,
            top: '50%',
            height: '30%',
        },
    ],
    xAxis: [
        {
            type: 'category',
            boundaryGap: true,
            data: timeData,
            axisLine: {
                show:true,
            },
            axisLabel: {
                color: '#98C7FF',
                fontSize: 12,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
        {
            gridIndex: 1,
            type: 'category',
            boundaryGap: true,
            data: timeData,
            position: 'top',
            axisLabel: {
                show: false,
            },
            axisLine: {
                show:true,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
    ],
    yAxis: [
        {
            type: 'value',
            axisLine: {
                show:false,
            },
            axisLabel: {
                color: '#98C7FF',
                fontSize: 12,
            },
            splitLine: {
                show: false,
                lineStyle: {
                    color: '#767A8C',
                    opacity: 0.3,
                },
            },
            axisTick: {
                show: false,
            },
        },
        {
            gridIndex: 1,
            type: 'value',
            inverse: true,
            axisLine: {
                show:false,
            },
            axisLabel: {
                color: '#98C7FF',
                fontSize: 12,
            },
            splitLine: {
                show: false,
            },
            axisTick: {
                show: false,
            },
        },
    ],
    series: [
        {
            name: '出站乘客数',
            type: 'bar',
            symbolSize: 8,
            barWidth: 14,
            hoverAnimation: false,
            data: [100, 110, 100, 110, 100, 110, 100, 110, 200,150],
        },
        {
            name: '进站乘客数',
            type: 'bar',
            xAxisIndex: 1,
            yAxisIndex: 1,
            symbolSize: 8,
            barWidth: 14,
            hoverAnimation: false,
            data: [100, 110, 100, 110, 100, 110, 100, 110, 200,150],
        },
    ],
};

option = {
    // title: {
    //     text: '示例',
    //     left:"center",
    //     subtext: '',
    //     textStyle:{
    //         color:"#000"
    //     }
    // },
    color:['#60c4c4','#fca268', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
    tooltip: {
        trigger: 'axis',
        axisPointer: {
            type: 'shadow'
        },
    },
    legend: {
        left:"right",
        data: ['示例1','示例2'],
        textStyle:{fontSize:16}
    },
    toolbox: {
        show: false
    },
    Calculable: true,
    grid: [{bottom:"60%"},{top:'50%'}],
    xAxis: [
        {
            type: 'category',
            axisLine: {show: true, onZero: false},
            axisTick: {show: false},
            axisLabel: {show: true,color:"#FFFFFF",fontSize:20},
            splitArea: {show: false},
            splitNumber: 20,
            splitLine: {show: false},
            data:['周一','周二','周三','周四','周五'],
            position:"bottom",
            zlevel:10,
            show:true,
            min:0,
            nameTextStyle:{fontSize:16},
        },
        {
            type: 'category',
            show:true,
            axisLine: {show: true, onZero: true},
            axisTick: {show: false},
            axisLabel: {show: false,color:"green",fontSize:16},
            splitArea: {show: false},
            splitNumber: 20,
            splitLine: {show: false},
            data:[],
            gridIndex:1,
            position:"bottom",
            zlevel:10,
            min:0,
            nameTextStyle:{fontSize:16},
        }
    ],
    yAxis: [
        {
            type: 'value',
            // name:"示例1",
            axisLine: {show: true, onZero: false,lineStyle:{color:"#fff"}},
            axisLabel: {formatter: '{value}',fontSize:16},
            axisTick:{show:false},
            minInterval:1,
            splitLine: true,
            nameTextStyle:{fontSize:16},
            min:0
        },
        {
            type: 'value',
            // name:"示例2",
            axisLine: {show: true, onZero: false,lineStyle:{color:"#fff"}},
            axisLabel: {formatter: '{value}',fontSize:16},
            axisTick:{show:false},
            minInterval:1,
            position:"left",
            splitLine :true,
            gridIndex:1,
            nameGap:30,
            inverse:true, 
            nameTextStyle:{fontSize:16},
            min:0
        }
    ],
    series: [
        {type:"bar",name:"示例1",barMaxWidth:40,data:[20, 40, 60, 80, 100]},
        {type:"bar",name:"示例2",barMaxWidth:40,data:[20, 40, 60, 80, 100],xAxisIndex: 1,yAxisIndex: 1}
    ]
};