echarts自定义分组，x轴分级，支持多级，支持dataZoom

原创已于 2022-04-19 14:39:31 修改 · 1.3w 阅读 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

代码可运行

于 2022-03-31 17:28:37 首次发布

该博客介绍了如何使用ECharts实现X轴分层显示，并解决第二级标签间隔自定义的问题。通过处理数据和利用ECharts的富文本样式，实现了标签的居中对齐。在ECharts渲染后，动态获取并设置标签的偏移宽度，从而达到预期效果。此方法支持多级分组且不影响dataZoom功能。

之前在网上寻找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">

		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);
		
	</script>

</body>
</html>

效果如下：