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 datax轴数据数组 * @param fontSizex轴数据字体大小，根据图片字体大小设置而定，此处内部默认为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、有图有真相，上两张项目中使用的效果