echarts多级柱状图

        var xAxisData =  [ "长裤", "短裤", "衬衣", "羊毛衫", "背心" , "皮鞋" ];
        var xAxisGroupData = ["{offset|}裤子", "", "", "衣服", "", "鞋子"]; 
        // 分组显示的标签（组内如果是偶数加上偏移{offset|}，如果是计数放正中间）
        var seriesData =  [15, 20, 10, 5, 15, 10];
        var groupSeparates = [true, false, true, false, false, true]; // 分组分隔线
        // 指定图表的配置项和数据
         option = {
            title : {
                text : 'echarts自定义分组-静态'
            },
            tooltip : {},
            xAxis : [ {
                position : "bottom",
                data : xAxisData,
                axisTick : {
                    length : 20 // 刻度线的长度
                },
                axisLabel : {
                    margin : 10 // 标签到轴线的距离
                }
            }, {
                position : "bottom",
                data : xAxisGroupData,
                axisTick : {
                    length : 40,
                    interval : function(index, value) {
                        return groupSeparates[index]; // 根据标识分组的刻度线
                    }
                },
                axisLabel : {
                    margin : 30,
                    interval : 0, // 显示所有标签
                    rich : {
                        offset : {
                            width : 0
                        }
                    }
                }
            }],
            yAxis : {},
            series : [ {
                type : 'bar',
                data : seriesData
            } ]
        };
        

微信图片_20221031154739.jpg