echarts柱形图中类似这种数据分区效果如何实现？

Question

柱形图中类似这种数据分区效果如何实现？

Answer 1

借助第二个x坐标轴可以hack出来，分组文字居中需要你自己优化一下。

option = {
    xAxis: [{
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },{
        position: 'bottom',// 将分组x轴位置定至底部，不然默认在顶部
        offset: 55,// 向下偏移，使分组文字显示位置不与原x轴重叠
        axisLine: {
           show: false // 隐藏分组x轴的轴线
        },
        axisTick: {
            length: 1000, // 延长刻度线做分组线 
            inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
            lineStyle: {color: '#ff9800'},// 非必须，仅为了演示，明显标示出分组刻度线
            interval: function (index, value) {
               return index === 0 || index === 4 || index === 6 // 在0、5、6处各画一条刻度线
            }
        },
        axisLabel: {
                    inside: true,// 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
                    interval: 0,// 强制显示全部刻度名
                    formatter: function (val, index) {
                        var _wid = window.innerWidth /70; // 70这个数字请自行对着自己项目页面调试，作者使用echarts示例编辑器window.innerWidth跟实际用于显示的width无法对应上
                        var _pla = new Array(Number(_wid.toFixed(0))).fill(' ');
                        if (val === 'Tue') {
                            return _pla.join('')+'2019'
                        } else if (index === 4) {
                            return _pla.join('')+'2020'
                        } else if (index === 6) {
                            return '2021'
                        }
                    }
                },
        data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    }],
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120, 200, 150, 80, 70, 110, 130],
        type: 'bar'
    }]
};