x轴有两个系列的要怎么做？-灵析社区
脑洞大咖echarts或者antv都可以 
春暖花又开OP的效果一般叫X轴两级化
第一种
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250110/15d6b929fe74768aed6f6af4d673fd7a.png)
####
echarts自定义分组-静态
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 = chart._chartsViews[0].renderTask.context.outputData._layout.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);
第二种:
"image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/images/20250110/7bb3901532745023c5ec8da3b7d8237c.png)
«"https://echarts.apache.org/examples/zh/editor.html?c=bar-> back..." (https://link.segmentfault.com/?enc=f6joHCo1%2BkAgM48zUNRAOQ%3D%3D.lDXr9g6kAx1RnyHM5RUhrilfx1t4D9E%2FoKhssevw86wBzLny0YlZ%2BoqMHs4AbZVsLzMi00QusZSP4EU41UA1vXtdBgidWAUDh3tMUqkPtyeYe2aCz%2FEK0%2FGiLwtp7M6dw88bYgRJwTx2RVXmghnSH%2B9Q5VpKW%2F3%2FTPB57q19dHl3mThysg6bsoKjcpO16uLGkB%2B%2F43JYMUVuQdt3wax39SOh4vbLDZo17Z0Y%2FwofptpgpT%2BJvC22U%2Fi1d6OQozHab9AqkF1OTwZh3ZDvimFHY4xWBAJhTZyo6%2F1E8XbKi1nc0rBSxS2Maqpcb3zzSULV%2Fc4Jeew9BMdi9XrB7uTzn0GFZnrXT%2Fe58utb1AP28e4v%2Fz41%2BP3F9d2JYzB0FhRCQbI3RTIlN24%2BzqiMsN9HBhIQLiMLad5xBdnDyzA3zeFEopHy7YtI0PHSPgMBdv4vT60CV3gfpeEcPVxD6A5Ed29i9vWzeONYAxIq1djkn9CZDxxPZDOTrFl6MvUKqM8M7wWKgn44y1B%2B9O74h0CnNlDAlw2yiiIqjowCFPjZYKPrdHu8iIc7zhVbuZ6P2%2FnI6doPMyMmhnMskqzeoTgQRzo18WGuweZUB0hiHjtq9w6MpZo0BDn0ZttNUvO7GLeWxCOX15N7esbgG7SmKOOYr3XzOuz2SpnMW5I313iy3Z7gRxGfJ3r5%2FvkUGO8Pih1gWsQgFt0J04H01P%2FsYZivHtjtKQcGsTPsuhflZhANn%2F38ADNN%2BVLpO5Ljl7L8GuFaWVZpgcpQtCMiGcZmOCclahc3ET%2B%2BqNHTjcoU2q5Px%2BTrOr5t8J7kM%2B1HY8ZRaPi7rtfw%2BD7%2BIzw5Uapk8v%2BYE%2B0Drlnh4g3DzHy2JhS0kC4LCS8REkUw6RNEFTc%2FWm4169RIMmNxGc4wC6sR%2FNs1NObv0QPdaBFTn6pDDtA4gYXR%2BHu%2BS7HAXeIorBcjrRFm88UG6JFMCMjH6yNDn5QF%2FOj%2FhKgSnlVRGN3NRTzA7Ml7p2P90%2FQyTLZ9QNf8GvE0)»