前言
在年后一个普普通通的日子，普普通通的我接到了一个被描述为可简单的报表工作，口头描述为“全是柱状图”，报表嘛~so easy，然后我眼睁睁看着这东西的设计从最初excel里可爱又简陋的柱状图迭代3版之后成了PPT里要演示的稀奇古怪的状态，其中x轴的2-3层分组让孤陋寡闻的我满脑子问号，需求是这样的：
需求1.png
这样的
需求2.png
以及这样的
需求3.png
我快速的去官方文档坐标轴配置项xAxis里从头到尾翻了一遍，发现没有相关功能，又去echarts项目的git翻看issues,只看到了这个
issues.png
然后开始尝试自己画线，企图用markLine先把分组刻度线造出来，然而造是造出来了，但是随着视窗大小变动，markLine位置会产生偏移，无法完美跟x轴位置对应上。山穷水尽之时，我又去百度了一下echarts的分组，然后看到了
echarts示例图.png
附访问地址：https://vis.baidu.com/chartusage/grouped-bar/
其中
echarts示例图.png
已经非常接近实现目标了，示例右下角的前往 Gallery 编辑点过去获得了此示例的源码（附示例源码链接：https://www.makeapie.com/editor.html?c=xBk7TY_hWx&v=2），那么接下来便是分析实现思路及变更到X轴实现即可。
示例实现思路分析
按照示例源码，可以发现主要实现方式是通过多个y轴（即yAxis）的刻度线（即axisTick）延长作为分组线，刻度文字（即axisLabel）显示作为分组的组名，再将此y轴向左偏移到合适位置，来完成整体效果的实现，所以x轴分组的实现思路如下：
1.建立新的用于分组的x轴，并向下进行偏移，方便后续调试显示；
2.在合适位置画刻度延长线作为分组线；
3.在合适位置放置刻度对应文字。
基础实现
本文使用官方柱状图示例做基础，在此上进行修改讲解（附示例链接：https://echarts.apache.org/examples/zh/editor.html?c=bar-simple）
首先建立分组xAxis，原示例中单项xAxis需改成数组，改动前：
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
改动后：
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},{
position: 'bottom',// 将分组x轴位置定至底部，不然默认在顶部
offset: 40,// 向下偏移，使分组文字显示位置不与原x轴重叠
axisLine: {
show: false // 隐藏分组x轴的轴线
},
axisTick: {
length: 40, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: {color: '#ff9800'},// 非必须，仅为了演示，明显标示出分组刻度线
},
data:['分组1','分组2']
}],
此时效果如下（为了便于区分，分组刻度线使用橙色）：
等分刻度.png
可以看到此时完成了均分效果的分组，如果像我那个需求1一样，是偶数个柱状图均分分组，那么此时已经完成了。
非均分分组实现
继续完成非均分的分组，需要继续处理好思路的2和3：
2.在合适位置画刻度延长线作为分组线；
3.在合适位置放置刻度对应文字。
首先，需要改变刻度线位置，那么翻看配置手册中axisTick配置项，发现interval可以控制间隔几显示，同时接受返回boolean的function，那么增加分组x轴的刻度分组后，控制刻度线的显示即可达成目的，如（注意data也在跟随示例效果做变动）：
axisTick: {
length: 40, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: {color: '#ff9800'},// 非必须，仅为了演示，明显标示出分组刻度线
interval: function (index, value) {
return index % 3 === 0 // 从第一个开始，每3个分一组
}
},
data: ['','分组1','','','分组2','','分组3']
效果如下：
灵活的等分刻度.png
因为interval接受的function返回值是boolean，所以方法中可以做任意判断，如（注意data也在跟随示例效果做变动）：
axisTick: {
length: 40, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: {color: '#ff9800'},// 非必须，仅为了演示，明显标示出分组刻度线
interval: function (index, value) {
return index === 0 || index === 5 || index === 6 // 在0、5、6处各画一条刻度线
}
},
data: ['','','分组1','','','分组2','分组3']
效果如下：
非等分刻度.png
至此，上述例子中分组组名的位置一直在通过配置data的内容来调整，而实际需求中，往往需要更灵活的配置方式，axisLabel的formatter可以帮助我们达成这种需求（注意：为了显示效果更好，offset、axisTick.length、data均有变动）：
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},{
position: 'bottom',// 将分组x轴位置定至底部，不然默认在顶部
offset: 55,// 向下偏移，使分组文字显示位置不与原x轴重叠
axisLine: {
show: false // 隐藏分组x轴的轴线
},
axisTick: {
length: 55, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: {color: '#ff9800'},// 非必须，仅为了演示，明显标示出分组刻度线
interval: function (index, value) {
return index === 0 || index === 5 || index === 6 // 在0、5、6处各画一条刻度线
}
},
axisLabel: {
inside: true,// 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0,// 强制显示全部刻度名
formatter: function (val, index) {
if (val === 'Wed') {// 可以通过刻度名称判断
return '2019'
} else if (index === 5) {// 也可以通过索引判断
return '2020'
} else if (index === 6) {
return '2021'
}
}
},
data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] // 与原x轴保持一致，方便使用对应名称做判断
}],
效果如下：
灵活配置分组组名位置及内容.png
如果分组是偶数的，可以通过axisLabel文字内容前加入空格达到文字向右偏移的效果（axisTick、axisLabel内容有变化）：
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},{
position: 'bottom',// 将分组x轴位置定至底部，不然默认在顶部
offset: 55,// 向下偏移，使分组文字显示位置不与原x轴重叠
axisLine: {
show: false // 隐藏分组x轴的轴线
},
axisTick: {
length: 55, // 延长刻度线做分组线
inside: true, // 使刻度线相对轴线在上面与原x轴相接，默认在轴线下方
lineStyle: {color: '#ff9800'},// 非必须，仅为了演示，明显标示出分组刻度线
interval: function (index, value) {
return index === 0 || index === 4 || index === 6 // 在0、4、6处各画一条刻度线
}
},
axisLabel: {
inside: true,// 使刻度名称相对轴线在上面与原x轴相接，默认在轴线下方
interval: 0,// 强制显示全部刻度名
formatter: function (val, index) {
if (val === 'Tue') {
return ' 2019'
} else if (index === 4) {
return ' 2020'
} else if (index === 6) {
return '2021'
}
}
},
data:['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
}],
效果如下：
偶数位置通过偏移居中.png
但是添加固定空格的偏移方式无法随着屏幕宽度变化，所以建议优化为添加空格数量随着屏幕宽度增加而动态增加，如：
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'
}
}
},
第三层分组
其实通过创建第二级分组，第三层的分组的思路已经很明确了，不外乎再创建一个刻度线更长的分组，而实际操作中发现，仅1个刻度时，刻度线仅能画出首位刻度线，所以第三层分组如果是只有一个大组的情况下，需要2个xAxis，一正一反来画首位更长的刻度线：
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},{
position: 'bottom',// 将分组x轴位置定至底部，不然默认在顶部
offset: 55,// 向下偏移，使分组文字显示位置不与原x轴重叠
axisLine: {
show: false // 隐藏分组x轴的轴线
},
axisTick: {
length: 55, // 延长刻度线做分组线
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']
},{
position: 'bottom',
offset: 80,
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 70,
inside: true,
lineStyle: {color: 'red'},// 为了区分明显标色的
interval: function (index, value) {// 画左边年框线
return index === 0
}
},
axisLabel: {
inside: true,
color: 'red',// 为了区分明显标色的
interval: 0,
},
data: ['第三层分组']
}, {
inverse: true,
position: 'bottom',
offset: 80,
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 70,
inside: true,
lineStyle: {color: 'red'},// 为了区分明显标色的
interval: function (index, value) {// 画右边年框线
return index === 0
}
},
axisLabel: {
inside: true,
color: 'red',// 为了区分明显标色的
interval: 0,
},
data: ['第三层分组']
}],
效果如下：
三层分组效果图.png
最后
至此，静态的需求1-3已全部实现，动态的分组可以计算每一组首刻度线的数字做动态刻度线，相对的动态控制分组文字的居中显示奇数为（首刻度数+（组内柱状图数目）/2+0.5），偶数为（首刻度数+（组内柱状图数目）/2）+ 偏移量，我代码写太蠢了，不放了。
本文仅做提供思路及记录作用，如有错误，欢迎指正。
echarts示例编辑器可运行的全代码如下：
option = {
xAxis: [{
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},{
position: 'bottom',// 将分组x轴位置定至底部，不然默认在顶部
offset: 55,// 向下偏移，使分组文字显示位置不与原x轴重叠
axisLine: {
show: false // 隐藏分组x轴的轴线
},
axisTick: {
length: 55, // 延长刻度线做分组线
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']
},{
position: 'bottom',
offset: 80,
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 70,
inside: true,
lineStyle: {color: 'red'},
interval: function (index, value) {// 画左边年框线
return index === 0
}
},
axisLabel: {
inside: true,
color: 'red',
interval: 0,
},
data: ['第三层分组']
}, {
inverse: true,
position: 'bottom',
offset: 80,
axisLine: {
onZero: false,
show: false
},
axisTick: {
length: 70,
inside: true,
lineStyle: {color: 'red'},
interval: function (index, value) {// 画右边年框线
return index === 0
}
},
axisLabel: {
inside: true,
color: 'red',
interval: 0,
},
data: ['第三层分组']
}],
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};