在使用echarts 封装组件的时候，偶尔会遇到需要x轴坐标进行二层分组的需求。那么如何对echarts 进行二层分组呢，有以下几个步骤：
仅介绍二层分组的逻辑。有兴趣的可以进行三层延伸。
1，修改echarts Options 中xAxis 的配置。
此时若进行e二层分组，则xAxis 应该是一个数组，里面有两个x轴的配置对象。
第一个x轴对象除了需要data属性，其余属性正常配置即可。
第二个x轴对象需要配置
xAxis[
{
// 第一个x轴坐标（最靠近x轴的那个坐标
type:'category',
data:[],
},
{
// 第二个x轴坐标
type:'category',
position: 'bottom', 坐标轴的位置
offset:40, // 该坐标轴x轴文本向下偏移距离
axisTick:{
length: 40, // 增加分组下面父级坐标刻度线长度
interval: // 这个属性很重要下面介绍
}，
axisLabel:{
align: 'center',
interval: 0,
formatter:// 这个属性很重要，下面介绍。
},
data:[],
}
]现在第二个x轴配置只有axisTick.interval，axisLabel.formatter这两个属性没有介绍。在下面会继续介绍的。
2，处理接口中返回的x轴数据，此时返回的x轴数据应该是一个数组并且分为两种情况。
以下图示例
2.1，第一种情况也是最终需要的数据结构
2.2，第二种接口返回的x轴数据
3，编写辅助函数，配置Option
3.1，辅助函数
/**
* @description: 计算第N层X轴重复字符串终止索引 n>1
* @param { string[] } list 第n层x轴全部数据
* @return {*}
*/
const countXAxisEndIndex = (list: string[]) => {
const temp = {} as { [key: string]: number };
if (list.length) {
let newVal = list[0];
let newIndex = 0;
temp[list[0]] = 0;
for (let i = 1; i < list.length; i++) {
if (newVal !== list[i]) {
temp[newVal] = newIndex;
newVal = list[i];
}
newIndex++;
}
}
temp[list[list.length - 1]] = list.length - 1;
return temp;
};
/**
* @description: 计算第N层X轴重复字符串起始索引 n>1
* @param { string[] } list 第n层x轴全部数据
* @return {*}
*/
const countXAxisStartIndex = (list: string[]) => {
const temp = {} as { [key: string]: number };
if (list.length) {
let newVal = list[0];
temp[list[0]] = 0;
for (let i = 1; i < list.length; i++) {
if (newVal !== list[i]) {
newVal = list[i];
temp[list[i]] = i;
}
}
}
return temp;
};3.2，在循环中配置Option
如何进行三层分组，以及多层分组；
大致逻辑和二层分组的逻辑是相同的。
要在循环中生成option.xAxis数组中的每个配置对象。对除了第一级的x坐标轴都需要进行设置position ：‘bottom';调整offset 的数值（第N层数据距离x轴的距离。以及增加axisTick.length 刻度的长度，
以上就是echarts 中x轴坐标分组的核心逻辑。
