Echarts 关于axisLabel中值太长不自动换行的问题

1135978748 发布于 2013/08/05 10:40
阅读 27K+
收藏 1

@Kener-林峰 你好,想跟你请教个问题:

前辈 请问 axisLabel 的值没有换行的属性吗? 怎么让它换行?



以下是问题补充:

@hardstudy:创始人您好,请问tooltips和legend文字过长,怎么处理啊?盼回复,谢谢。 (2013/11/08 10:46)
加载中
0
Kener-林峰
Kener-林峰
抱歉,没有换行,可以rotate
0
1135978748
1135978748

我试过调角度 但是太长了 就显示不出来了   要是值太长 就不能用啊

0
1135978748
1135978748
前辈 帮忙 想想办法吧?感激不尽啊
0
Kener-林峰
Kener-林峰

http://ecomfe.github.io/echarts/doc/doc.html#AxisAxislabel

好多种解决思路,interval为auto,应该就能默认隐藏显示不下的。

设置formatter自己格式标签精简文字也行

0
Kener-林峰
Kener-林峰
欢迎github上提,贴代码我帮你看看
0
卖豆浆不卖油条
卖豆浆不卖油条

看到这个问题了,提供个解决办法,可以让文字竖直显示。

在axisLabel下添加属性:

formatter:function(val){
    return val.split("").join("\n");
}



即可。

效果:


ps:使用rotate 旋转方式,会造成文字显示模糊,效果不好。

0
陈诗杰
陈诗杰

http://zhidao.baidu.com/question/2075014905126289948.html

问题得不到根本的解决,帮忙看看这个问题

http://jsfiddle.net/cfkatwv2/1/

这样的问题很多图形库都有,highcharts 因为它支持使用html所以这个问题得到了解决

0
KevinLi1230
KevinLi1230
/**
 * <li>Echarts 中axisLabel中值太长自动换行处理;经测试:360、IE7-IE11、google、火狐  * 均能正常换行显示</li>
 * <li>处理echarts 柱状图 x 轴数据显示根据柱子间隔距离自动换行显示</li>
 * @param title				将要换行处理x轴值
 * @param data				
 * @param fontSize			x轴数据字体大小,根据图片字体大小设置而定,此处内部默认为12	
 * @param barContainerWidth	        柱状图初始化所在的外层容器的宽度
 * @param xWidth			柱状图x轴左边的空白间隙 x 的值,详见echarts文档中grid属性,默认80
 * @param x2Width			柱状图x轴邮编的空白间隙 x2 的值,详见echarts文档中grid属性,默认80
 * @param insertContent		每次截取后要拼接插入的内容, 不传则默认为换行符:\n
 * @returns titleStr		截取拼接指定内容后的完整字符串
 * @author lixin
 */
function getEchartBarXAxisTitle(title, datas, fontSize, barContainerWidth, xWidth, x2Width, insertContent){
	
	if(!title || title.length == 0) {
		alert("截取拼接的参数值不能为空!");return false;
	}
	if(!datas || datas.length == 0) {
		alert("用于计算柱状图柱子个数的参数datas不合法!"); return false;
	}
	if(isNaN(barContainerWidth)) {
		alert("柱状图初始化所在的容器的宽度不是一个数字");return false;
	}
	if(!fontSize){
		fontSize = 12;
	}
	if(isNaN(xWidth)) {
		xWidth = 80;//默认与echarts的默认值一致
	}
	if(isNaN(x2Width)) {
		xWidth = 80;//默认与echarts的默认值一致
	}
	if(!insertContent) {
		insertContent = "\n";
	}
	
	var xAxisWidth =  parseInt(barContainerWidth) - (parseInt(xWidth) + parseInt(x2Width));//柱状图x轴宽度=统计页面宽度-柱状图x轴的空白间隙(x + x2)
	var barCount = datas.length;								//x轴单元格的个数(即为获取x轴的数据的条数)
	var preBarWidth = Math.floor(xAxisWidth / barCount);		//统计x轴每个单元格的间隔
	var preBarFontCount = Math.floor(preBarWidth / fontSize) ;	//柱状图每个柱所在x轴间隔能容纳的字数 = 每个柱子 x 轴间隔宽度 / 每个字的宽度(12px)
	if(preBarFontCount > 3) {	//为了x轴标题显示美观,每个标题显示留两个字的间隙,如:原本一个格能一样显示5个字,处理后一行就只显示3个字
		preBarFontCount -= 2;
	} else if(preBarFontCount <= 3 && preBarFontCount >= 2) {//若每个间隔距离刚好能放两个或者字符时,则让其只放一个字符
		preBarFontCount -= 1;
	}
	
	var newTitle = "";		//拼接每次截取的内容,直到最后为完整的值
	var titleSuf = "";		//用于存放每次截取后剩下的部分
	var rowCount = Math.ceil(title.length / preBarFontCount);	//标题显示需要换行的次数 
	if(rowCount > 1) {		//标题字数大于柱状图每个柱子x轴间隔所能容纳的字数,则将标题换行
		for(var j = 1; j <= rowCount; j++) {
			if(j == 1) {
				
				newTitle += title.substring(0, preBarFontCount) + insertContent;
				titleSuf = title.substring(preBarFontCount);	//存放将截取后剩下的部分,便于下次循环从这剩下的部分中又从头截取固定长度
			} else {
				
				var startIndex = 0;
				var endIndex = preBarFontCount;
				if(titleSuf.length > preBarFontCount) {	//检查截取后剩下的部分的长度是否大于柱状图单个柱子间隔所容纳的字数
					
					newTitle += titleSuf.substring(startIndex, endIndex) + insertContent;
					titleSuf = titleSuf.substring(endIndex);	//更新截取后剩下的部分,便于下次继续从这剩下的部分中截取固定长度
				} else if(titleSuf.length > 0){
					newTitle += titleSuf.substring(startIndex);
				}
			}
		}
	} else {
		newTitle = title;
	}
	return newTitle;
}

/**
 * 滚动瀑布加载函数
 * @param opts{selector: "#id"(需要滚动瀑布加载的元素选择器), fn: getUserInfo(瀑布加载时的回调函数方法名), fnParams: param(参数)}	
 */
function scrollLoad(opts){
	
	var options = {
		selector: null,
		fn: null,
		fnParams: null
	};
	
	options =$.extend(true, options, opts);
	
	var selector = options.selector;
	var callbackFn = options.fn;
	var fnParams = options.fnParams;
	
	if(selector == null || selector == "" || selector == "undefined") {
		console.info("瀑布加载元素选择器不能为空!");return false;
	}
	if(callbackFn == null || callbackFn == "" || callbackFn == "undefined") {
		console.info("瀑布加载回调函数不能为空!");return false;
	}
	
	var loadCompleted = true;	//当前元素是否已经加载完成,true:未完成,false:完成
	$(top.window).scroll(function(){
		
		var winheight = $(top.window).height();
		var scheight = $(top.window).scrollTop();
		
		if ($(selector).offset().top <= (winheight + scheight) && loadCompleted) {
//			console.info($(selector).offset().top+"===winH="+(winheight + scheight)+"====t="+new Date().getTime());
			
			loadCompleted = false;
			if(typeof(callbackFn) == "function") {
//				console.info("load " + callbackFn.name + "!!!");//~

				if(fnParams) {
					callbackFn(fnParams);
				} else {
					callbackFn();
				}
			} else if(callbackFn instanceof Array) {	//若回调函数指定了多个方法
				for(var i = 0; i< callbackFn.length; i++) {
//					console.info("load " + callbackFn[i].name + "!!!");//~

					if(fnParams) {
						callbackFn[i](fnParams);
					} else {
						callbackFn[i]();
					}
				}
			}
		}
	});
}


效果如下:



KevinLi1230
KevinLi1230
回复 @编程小强 : 不好意思,后面的瀑布加载那个函数跟xAxis换行效果无关,可能是发布的时候从项目文件中copy多了,直接黏进来没注意到后面,谢谢您指出来
编程小强
编程小强
您的针对xAxis换行的方法非常有效果,我还想知道你贴的代码中的后一个function瀑布加载是干什么的,与这个解决办法有关系吗?
0
--HanSon--
--HanSon--

https://github.com/Hanccc/newline-echarts

这个有效解决

d
dongZH
没有效果啊,是我使用错误了吗?
返回顶部
顶部