Echarts 關於axisLabel中值太長自動換行處理工具方法 ；經測試 360、IE7-IE11、google、火狐均正常換行

Echarts 關於axisLabel中值太長自動換行處理工具方法 ；經測試 360、IE7-IE11、google、火狐均正常換行

處女作博文，有什麼不對的地方歡迎大家指導：

一、計算方式說明：

1、計算x軸實際長度：   

           x軸實際寬度 = 圖形容器div的寬度 - x軸兩邊間隔值 (畫布 x + x2) ；

2、計算x軸每個圖形所佔x軸寬度：

           x軸每個數據所佔x軸的寬度（即爲axisLabel能顯示的長度範圍） =  x軸實際長度 / x軸顯示的數據個數；

3、計算x軸每個圖形所佔x軸寬度所能顯示的字數：

           每個圖形所佔x軸寬度顯示的字數 = 每個圖形所佔x軸寬度 / axisLabel顯示時文字的大小（默認12px即爲12）；

4、根據x軸每個間隔能顯示的字數進行換行處理：

          計算出x軸上每個間隔能顯示的字數後，再將所有的標題根據能顯示的字數進行截取拼入換行符\n即可

二、代碼

1、下面爲axisLabel自動換行工具方法：

/**
 * <li>Echarts 中axisLabel中值太長自動換行處理；經測試：360、IE7-IE11、google、火狐均能正常換行顯示</li>
 * <li>處理echarts 柱狀圖 x 軸數據顯示根據柱子間隔距離自動換行顯示</li>
 * @param title			將要換行處理x軸值
 * @param data			x軸數據數組
 * @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]();
					}
				}
			}
		}
	});
}

2、使用：

var hwTitle = this.homeworkInfo.title;
var newHwTitle = getEchartBarXAxisTitle(hwTitle, res, 12, 983, 30, 30, "\n"); //處理標題，使其根據柱狀圖x軸每個柱子的間隔距離自動換行

3、有圖有真相，上兩張項目中使用的效果