echarts多坐标轴分组问题

2019独角兽企业重金招聘Python工程师标准>>>

具体图形就是条形图，柱状图，折线图等图形了，想要实现类似下面图片一样的效果。目前也只是实现一部分效果，还没有达到自己想要的要求。工作中遇到的问题，涉及的东西比较多，不能贴出全部内容，具体的需要细聊，欢迎交流。

１．调节多轴间距(实现不等轴间距)

因为每个轴与轴之间的距离是固定的，对于长短不同的刻度名看起来不美观。因此尝试过刻度名最大长度适应，即轴上最长的刻度名有多长，轴间距就多长，要避免覆盖到另一条轴上，但是开发过程中表达式未解决全部情况，只适用一部分。最终暂时这么改了，限定刻度名长度为３,超过显示...；

y轴axisLabel：

formatter:function(value){
		　　if(value.length > 3){
			　value = value.substring(0,3) + '...';
			}
			return value;
		　}

２．分组：

边框——axisLine,axisTick中length

数据——如果没有数据赋值,否则找已经插入的数据，如果没有找到直接插入，找到就进行比较。判断当前轴是否是最后一个维度,然后进行比较，最后一个元素和下一个插入的相等,则加前缀，否则直接加入。因为有前缀，下次比较会受干扰，正则判断是否含有前缀并截取。

var dimension_length =  all_dimensionality.length <= 0 ? 1 : all_dimensionality.length;
	for(var k = 0;k < dimension_length;k++){
		if(!dimensionality_show_data[k]){				
			dimensionality_show_data[k] = [aData[all_dimensionality[k]]];
		}else{
			var index = dimensionality_show_data[k].indexOf(aData[all_dimensionality[k]]);
			if(index == -1){
				dimensionality_show_data[k].push(aData[all_dimensionality[k]]);
			}else if(index != -1){
				if(all_dimensionality[dimensionality_show_data.length - 1] != all_dimensionality[k]){
					var lastVal = dimensionality_show_data[k][dimensionality_show_data[k].length-1];
					if(/YZYPD/.test(lastVal)){
						lastVal = lastVal.split("YZYPD")[1];
					}
					if(lastVal == aData[all_dimensionality[k]]){
						dimensionality_show_data[k].push("YZYPD"+ aData[all_dimensionality[k]]);
					}else{
						dimensionality_show_data[k].push(aData[all_dimensionality[k]]);
					}
				}else{
					dimensionality_show_data[k].push(aData[all_dimensionality[k]]);
				}
			}

		}
	}

３．interval－－－通过回调函数实现间隔显示以及过滤数据

var len = opp.xAxis[j].data.length;

var len = opp.xAxis[j].data.length;
opp.xAxis[j].axisTick.interval = function(index,value){
	if(index % 2 == 0 && len > 10) {
		return !/^YZYPD/.test(value)
	}else if(len < 10){
		return value;
	}else{
		return '';
	}

};
opp.xAxis[j].axisLabel.interval = function(index,value){
	if(index % 2 == 0 && len > 10) {
		return !/^YZYPD/.test(value)
	}else if(len < 10){
		return value;
	}else{
		return '';
	}
};

 

转载于:https://my.oschina.net/GracefulTing/blog/1619020