之前在网上寻找echarts x轴分层显示的例子，例如：
Echarts 实现x轴分两级显示并且第二级可以自定义间隔_旭东怪的博客-CSDN博客_echarts x轴分组
里面提到了两种方法，其中第一种方法有间隔不能自定义的问题，而第二种方法又不如第一种那么直观
第一种方法只需要添加多个xAxis就能轻松实现分级，只不过就是不能自定义间隔，于是想到一种改进方法。
比如有这样分级数据：
var xAxis1 = ?[ "长裤", "短裤", "衬衣", "羊毛衫", "背心"];
var xAxis2 = ?[ "裤子", "裤子", "衣服", "衣服", "衣服" ];
裤子有两个子级，衣服有三个子级，衣服是奇数，那我只保留中间的标签，旁边留空，自然就居中了，裤子是偶数，那就只保留中间靠左的标签，然后通过echarts的自定义样式添加一个空的余白把它挤到中间去不就行了？那么问题就只剩下这个余白的宽度也就是一个柱子刻度的长度如果获取。这个属性并不在开放的api里有，最后通过输出一个echarts渲染后的实例所有属性后终于找到了。xxx.xxx.xxx.bandWidth（前面很长）
那么大概流程就是这样的：
1、通过对分组数据进行处理，把第二级数据变成这样
xAxis2 = ?["{offset|}裤子", "", "", "衣服", "",];
offset是一个富文本样式有一个宽度属性，默认值是0
2、echarts进行第一次渲染，在渲染完成后，找到实例的bandWidth属性，对offset样式进行更新，然后增量更新echarts属性，从而实现标签的居中。
下面是完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>echarts自定义分组-静态</title>
<script src="echarts4.js"></script>
</head>
<body>
<div id="bar" style="width: 800px; height: 600px;"></div>
<script type="text/javascript">
// 在一个对象里找指定属性的值，refCache用来记录已经遍历的对象防止循环引用
function findProp(obj, propName, refCache) {
refCache = refCache || [];
var value = null;
for ( var name in obj) {
var prop = obj[name];
if (name == propName) {
return prop;
} else if (typeof prop === 'object' && prop !== null
&& refCache.indexOf(prop) == -1) {
// 如果是对象，并且之前没有被检索，进行递归检索
refCache.push(prop);
value = findProp(prop, propName, refCache);
if (value !== null) {
return value;
}
}
}
return value;
}
var chart = echarts.init(document.getElementById('bar'));
var xAxisData = [ "长裤", "短裤", "衬衣", "羊毛衫", "背心" , "皮鞋" ];
//var xAxisGroupData = [ "裤子", "裤子", "衣服", "衣服", "衣服" , "鞋子" ];
var xAxisGroupData = ["{offset|}裤子", "", "", "衣服", "", "鞋子"]; // 分组显示的标签（组内如果是偶数加上偏移{offset|}，如果是计数放正中间）
var seriesData = [15, 20, 10, 5, 15, 10];
var groupSeparates = [true, false, true, false, false, true]; // 分组分隔线
// 指定图表的配置项和数据
var 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
} ]
};
chart.lastBandWidth = 0;
// 监听渲染事件，只要bandWidth发生变化，重新设置标签偏移的值
chart.on('rendered', function () {
var bandWidth = findProp(chart, "bandWidth");
if (chart.lastBandWidth != bandWidth) {
chart.lastBandWidth = bandWidth;
// 延时执行否则echarts渲染异常
setTimeout(()=>{
// 加上偏移后重新绘制
var optionNew = {xAxis: [{},{}]};
// 增量更新偏移值
optionNew.xAxis[1] = {axisLabel:{rich:{offset:{width: chart.lastBandWidth}}}};
//console.info(optionNew);
chart.setOption(optionNew);
}, 0);
}
});
// 绘制
chart.setOption(option);
</script>
</body>
</html>效果如下：
代码非常简单，也支持多级，也不影响datazoom的使用 ：
详细代码如下：