柱条范围echarts 柱状配置项内容和展示

配置项如下
      option = {
    color: ['#4150d8', '#28bf7e', '#ed7c2f'],
    grid: [
        {
            z: 1
        },{
            z: 2
        }
    ],
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        axisLabel: {
            show: false
        }
    }],
    yAxis: [{
        type: 'value'
    },{
        type: 'value',
        max: 100, // 需要对应网格一柱图的最大值,比例才能相等
        axisLabel: {
            show: false
        },
        axisLine: {
            show: false
        },
        axisTick:{
            show: false
        }
    }],
    dataZoom: {
        xAxisIndex: [0, 1]
    },
    series: [
        {
            type: 'bar',
            stack: 'A',
            barWidth: 30,
            xAxisIndex: 0,
            yAxisIndex: 0,
            silent: true,
            data: [35, 20, 18, 42, 62, 23, 40]
        },
        {
            type: 'bar',
            stack: 'A',
            barWidth: 40,
            xAxisIndex: 0,
            yAxisIndex: 0,
            silent: true,
            data: [35, 45, 32, 15, 26, 52, 22]
        },
        {
            type: 'bar',
            stack: 'A',
            barWidth: 40,
            xAxisIndex: 0,
            yAxisIndex: 0,
            silent: true,
            data: [30, 35, 50, 43, 12, 25, 38]
        },
        {
            name: '辅助透明层', // 借助透明层把覆盖层顶上去
            type: 'bar',
            stack: 'B',
            barWidth: 60,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                barBorderColor: 'rgba(0, 0, 0, 0)',
                color: 'rgba(0, 0, 0, 0)'
            },
            emphasis: {
                itemStyle: {
                    barBorderColor: 'rgba(0, 0, 0, 0)',
                    color: 'rgba(0, 0, 0, 0)'
                }
            },
            data: [12, 35, 4, 14, 21, 6, 30]
        },
        {
            name: '覆盖层',
            type: 'bar',
            stack: 'B',
            barWidth: 60,
            xAxisIndex: 1,
            yAxisIndex: 1,
            itemStyle: {
                barBorderColor: 'rgba(0, 110, 84, .5)',
                color: 'rgba(0, 110, 84,.2)',
                barBorderRadius: 5
            },
            data: [45, 55, 50, 55, 48, 46, 58]
        },
    ]
};

    
截图如下