文档章节

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

KevinLi1230
 KevinLi1230
发布于 2015/11/23 12:18
字数 2262
阅读 1631
收藏 0

在使用Echars做一个报表功能时,发现axisLabel(即:报表X轴中的lable)显示不能自动换行,导致前面的多个超长的axisLabel叠加在一起,很少写博客,不知道说没说清楚,还是直接上两张换行前的效果图吧。见下图:

                                                    换行前效果图(1)

                                                    换行前效果图(2)


解决方法思路:

解决方案中的计算参考图:

以柱状图为例:

1)图表初始化容器宽度 = x(x轴左间隙宽度,默认80) + width(X轴宽度) + x2(x轴右间隙宽度,默认80);

2)图表X轴宽度(width) = 图表初始化容器宽度 - (x + width + x2);

3)每个axisLabel所在单元格宽度(xAxisWidth) = 图表X轴宽度(width) / 要显示的axisLabel个数(axisDataCount)

4)每个axisLabel单元格显示的字数 = xAxisWidth  / 每个文件子的宽度尺寸(默认12)

5)每个axisLabel显示的字数 = 图表容器div的宽度 / axisLable个数(x轴柱子个数)

为了axisLabel显示的更好看点儿,可以将axisLabel的宽度多减去两到三个字的宽度

故:可将第4步 中的计算改为:

4)每个axisLabel单元格显示的字数 = xAxisWidth  / 单个文子的宽度(默认12) - (个文子的宽度 * 2

经过上面的计算后,将可知道每个axisLabel单元格间可显示的字数,所以在显示时,只需要按照这个字数循环截取并拼接上\n换行符进行换行


上代码:

/**
 * <li>Echarts 中axisLabel中值太长自动换行处理;经测试:360、IE7-IE11、google、火狐均能正常换行显示</li>
 * <li>处理echarts 柱状图 x 轴数据显示根据柱子间隔距离自动换行显示</li>
 * @param title			    将要换行处理x轴值
 * @param datas(xAxisDataLength	)  报表需显示的axisLabel个数(X轴显示的title数)
 * @param fontSize		    x轴上axisLabel字体大小,根据图表字体大小设置而定,此处内部默认为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";
	}
	
	//柱状图x轴宽度 = 图表初始化容器div宽度 - 柱状图x轴的左右空白间隙宽度(x + x2)
	var xAxisWidth =  parseInt(barContainerWidth) - (parseInt(xWidth) + parseInt(x2Width));
	//x轴单元格的个数(即为获取x轴的数据的条数)
	var barCount = datas.length;
	//统计x轴每个单元格的间隔								
	var preBarWidth = Math.floor(xAxisWidth / barCount);		
	//柱状图每个柱所在x轴间隔能容纳的字数 = 每个柱子的 x轴间隔宽度 / 每个字的宽度(12px)
	var preBarFontCount = Math.floor(preBarWidth / fontSize) ;	
	//为了x轴标题显示美观,每个标题显示留两个字的间隙,如:原本一个格能一样显示5个字,处理后一行就只显示3个字
	if(preBarFontCount > 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;
}


解决后的效果图:


附加一个完整的demo吧

1、图片展示的html容器div

<div class="hold track_mid" id="hw_recode">
                	<div class="lx_l2">
                        <div class="tj_mod_subTit scroll2">作业记录</div>
                        <div id="hw_record_bar_chart" class="work_graph" style="height: 350px;">
                        	<%-- <img src="${ctx}/resource/statistics/student/images/zygj.gif" width="435" height="320" /> --%>
                        </div>
                        <div class="remind" id="hw_remind" style="display: none;">
                        	<i class="remind_ico"></i><span id="hw_prompt"><!-- 您的作业有不及格的作业和未完成的作业,可以去课件下查看那些作业 --></span>
                        </div>
                    </div>
                </div>

2、初始化图片展示的js代码

//初始化总入口
$(function(){
    //初始化echart图形,其中成绩详情饼图、个人学习时长折线图、作业轨迹柱状图、测试轨迹柱状图
    initEchartConfig();		
});

/**
 * 通过模块化单文件引入方式引入echart图形插件中具体的图形js
 */
function initEchartConfig(){
	
	// 为模块加载器配置echarts的路径,从当前页面链接到echarts.js,定义所需图表路径
	require.config({
            paths:{
                echarts: basePath+'/resource/common/js/plugins/echarts-2.1.8/js'
            }
        });
	
	// 动态加载echarts然后在回调函数中开始使用,注意保持按需加载结构定义图表路径
	require(
	    [
	        'echarts',
	        'echarts/chart/line',
	        'echarts/chart/bar',
	        'echarts/chart/pie'
	    ],
	    statisticsCallback
	);
}

/**
 * echart统计总回调函数
 */
function statisticsCallback(ec){
    stuHwRecordBar(ec);	
}

/**
 * 学生作业轨迹柱状图
 * @param ec echarts实例
 */
function stuHwRecordBar(ec){
	
	var hwBarChart = ec.init(document.getElementById('hw_record_bar_chart'));
	hwBarChart.showLoading({
	    text: '正在努力的读取数据中...'    //loading话术
	});
	
	var _data = getHomeworkRecord();
	var titleRowNum = _data.titleRowNum || 0;
	var xAxisData = _data.xData;
	var seriesData = _data.seriesData;
	
	var _y2 = null;
	if (titleRowNum) {
		_y2 = titleRowNum * 14 + 7; //y2=标题显示的行数 * 每个字高度 + x轴卡标高度
		if(_y2 > 140) {	//标题自适应高度超过高时设置默认217
			_y2 = 147;
		}
	}
	
	if(xAxisData == null || xAxisData.length == 0) {
		$("#hw_record_bar_chart").text("您没有作业记录信息!");
		$("#hw_remind").text("");
		return false;
	}
	
	hwBarChart.hideLoading();
	hwBarChart.setOption({
        tooltip : {
        	show: true,
            trigger: 'axis',
            axisPointer: {
            	type : 'shadow',	//可选为:'line' | 'cross' | 'shadow' | 'none'(无)
        		shadowStyle : {
				  	size: 'auto',
				  	color: 'rgba(150,150,150,0.3)'
				}
            },
			formatter: function(a) {
				var title = a[0][1]; 
            	if(title.length > 20){	//如果标题大于20个文字,这换行
            		title = title.substring(0, 20)+"</br>"+title.substring(20);
            	}
				return "题目:"+title+"</br>"+a[0][0]+":"+a[0][2];
			}
        },
        grid: {
        	x: 30,
        	y: 30,
        	x2: 30,
        	y2: _y2 || 70	//默认显示4行文字,y2 = x轴文字行数(4) * 文字高度14(12px的文字高度为14) + axisTick.length(X轴卡标线的长度)
        	//,height: 250	//直角坐标系内绘图网格(不含坐标轴)高度,默认为 =总高度 - y - y2,数值单位px,指定height后将忽略y2
        },
        calculable : false,	//{boolean} false,是否启用拖拽重计算特性
        xAxis : [
            {
            	name : '标题',
            	type : 'category',
            	axisTick : {length: 7, lineStyle: {color: '#4488BB', width: 1.5}},
            	splitLine : {show: true, lineStyle: {color: ['#EEEEEE'], width: 1, type: 'solid'}},
                axisLabel : {
                	interval: 0, 
                	rotate: 0, 
                	textStyle: {
//                		color: '#5AB1EF', 
                 		fontFamily: '宋体',
            			/*fontWeight: 'bold'*/
                		baseline: 'top'
                	},
                	formatter: '{value}'
            	},
                data : xAxisData
            }
        ],
        yAxis : [
            {
            	name : '分数',
                type : 'value',
                splitArea : {show: true, areaStyle: {color: ['rgba(250,250,250,0.3)','rgba(240,240,240,0.5)']}},
                splitLine : {show: true, lineStyle: {color: ['#EEEEEE'], width: 1, type: 'solid'}},
                splitNumber : 5
            }
        ],
        series : [
            {
            	name:'分数',
                type:'bar',
                barWidth: 20,
                itemStyle: {
                	normal: {
                		color: '#5AB1EF',
                		label:{
                			show:true,
                			position:'top',
                			textStyle:{
                				fontSize:12
//                				color:"#5AB1EF"
                			},
                			formatter: function(a, b, c){
                				if(!isNaN(parseInt(c))) {
                					return c+"分";
                				}
                				return c;
                			}
                		}
                	}
                },
                data: seriesData
            }
        ]
	});
}

/**
 * 获取学生作业轨迹数据(json)
 */
function getHomeworkRecord(){
	
	var titleRowNum = null;	//x轴标题换行的行数 
	var xAxisData = [];
	var seriesData = [];
	$.ajax({
		url: basePath + '/course/statistics/courseStatisticsStudent_getHomeworkRecord.action',
		data: {courseId: courseId, loginId: loginId},
		type: 'post',
		dataType: 'json',
		async: false,
		cache: false,
		success: function(data){	//成功:{success: true, result: 结果};失败:{success: false, errorCause: 错误原因}
			if(data.success && data.result) {
				
				var rowNums = [];				//存放测试每个标题根据柱子间隔换行后的行数
				var hasUnCompleteHw = false;	//是否有为完成的作业标记,为了显示提示信息,默认false:没有
				var res = data.result;
				$(res).each(function(i, obj) {
//					if(i<9){
					var hwTitle = this.homeworkInfo.title;
					var newHwTitle = getEchartBarXAxisTitle(hwTitle, res, 12, 983, 30, 30, "\n");	//处理标题,使其根据柱状图x轴每个柱子的间隔距离自动换行
					xAxisData.push(newHwTitle);
					if(this.enumConstByFlagHomeworkStatus != null){
						 if(this.enumConstByFlagHomeworkStatus.code=='1') {
							seriesData.push({
								value: "未\n批\n改",
								itemStyle: {normal: {color: '#00AA00'}}
							});
						}else if(this.enumConstByFlagHomeworkStatus.code=='2') {
							seriesData.push(this.totalScore);
						}else if(this.enumConstByFlagHomeworkStatus.code=='3') {
							hasUnCompleteHw = true;
							seriesData.push({
								value: "已\n退\n回",
								itemStyle: {normal: {color: '#FF0000'}}
							});
						} else if(this.enumConstByFlagHomeworkStatus.code=='0'){
							seriesData.push({
								value: "未\n提\n交",
								itemStyle: {normal: {color: '#ff8723'}}
							});
						}else{
							hasUnCompleteHw = true;
							seriesData.push({
								value: "未\n做",
								itemStyle: {normal: {color: '#ff8723'}}
							});
						}
					}else{
						hasUnCompleteHw = true;
						seriesData.push({
							value: "未\n做",
							itemStyle: {normal: {color: '#ff8723'}}
						});
					}
					rowNums.push((newHwTitle.split("\n").length + 1));	//将每个标题占的行数存入数据,便于获取最大标题占的行数去动态设置echars的grid的y2的值
//					}
				});
				
				titleRowNum = rowNums.sort(function(a,b){return a < b ? 1 : -1;})[0];	//有大到小排序
				
				if(hasUnCompleteHw) {
					$("#hw_prompt").text("您有未完成的作业,可以去课件下查看");
					$("#hw_remind").show();
				}
			}
		},
		error: function(){alert("请求失败,请刷新重试或联系管理员!");}
	});
	return {xData: xAxisData, seriesData: seriesData, titleRowNum: titleRowNum};
}



欢迎大牛们给我指点指点



© 著作权归作者所有

共有 人打赏支持
KevinLi1230
粉丝 1
博文 2
码字总数 3200
作品 0
北京
后端工程师
私信 提问
加载中

评论(3)

KevinLi1230
KevinLi1230

引用来自“mendacity_jenny”的评论

请问能给个调用的例题莫?我这样调用,换行OK,但其他的还是不显示啊,就像不换行时,其中几个就不显示的形式一样,
我刚刚在上面文章里面追加了完整demo,不知道您能不能看明白,没时间整理,比较混乱
KevinLi1230
KevinLi1230

引用来自“mendacity_jenny”的评论

请问能给个调用的例题莫?我这样调用,换行OK,但其他的还是不显示啊,就像不换行时,其中几个就不显示的形式一样,
这儿回复没法格式化代码,凑合着看吧 function getHomeworkRecord(){ var titleRowNum = null; //x轴标题换行的行数 var xAxisData = []; var seriesData = []; $.ajax({ url: basePath + '/course/statistics/courseStatisticsStudent_getHomeworkRecord.action', data: {courseId: courseId, loginId: loginId}, type: 'post', dataType: 'json', async: false, cache: false, success: function(data){ //成功:{success: true, result: 结果};失败:{success: false, errorCause: 错误原因} if(data.success && data.result) { var rowNums = []; //存放测试每个标题根据柱子间隔换行后的行数 var res = data.result; $(res).each(function(i, obj) { var hwTitle = this.homeworkInfo.title; var newHwTitle = getEchartBarXAxisTitle(hwTitle, res, 12, 983, 30, 30, "\n"); //处理标题,使其根据柱状图x轴每个柱子的间隔距离自动换行 xAxisData.push(newHwTitle); }); titleRowNum = rowNums.sort(function(a,b){return a < b ? 1 : -1;}); //有大到小排序 } }, error: function(){alert("请求失败,请刷新重试或联系管理员!");} }); return {xData: xAxisData, seriesData: seriesData, titleRowNum: titleRowNum}; }
m
mendacity_jenny
请问能给个调用的例题莫?我这样调用,换行OK,但其他的还是不显示啊,就像不换行时,其中几个就不显示的形式一样,
echar 为什么时间坐标折现图不能正确显示

var cpu=""; var jvm="12"; var ddr="43"; // 路径配置 require.config({ paths: { echarts: 'core/js/echarts/build/dist' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' ,// ......

傻_小z
2015/12/26
267
0
echarts 柱状图 上方显示数据问题

@Kener-林峰 我想在柱状图上方显示数据,设置itemStyle 显示不出来,而且同样可以显示上方数据的代码贴过来也不能显示出来,帮忙看下,谢谢。 require.config({ packages: [ { name: 'echart...

一直在路上123
2013/11/13
47.4K
3
使用echarts在 调用zender时 报错[MODULE_MISS]"zrender/tool/color" is not exists!

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

无药可救.
2014/05/23
5.5K
1
Echarts-柱状图颜色问题

@Kener-林峰 你好,想跟你请教个问题: 代码如下: 数据是从数据库用一个sql读出来的,所以都放在了一个data里。只找到改变所有柱状图颜色的属性,能给每个柱子都分配不同的颜色吗?求指导...

Sherlock_X
2014/10/30
17.1K
1
echarts图表 分割线 辅助线的问题

echarts图表 辅助线的问题 如何默认一个固定的分割线,就像上图59那样加一条分割线。 我的echarts如下代码: var myChart = ec.init(document.getElementById('main')); myChart.setOption(...

何庆同
2015/01/11
7.9K
4

没有更多内容

加载失败,请刷新页面

加载更多

一个本科学生对Linux的认知

一个本科学生对Linux的认知 我是一名大三的普通一本大学的软件工程的一名学生,学校开设了一些关于系统开发的课程,纸上得来终觉浅,学校的课程课时较短,想要在56个课时之内学会一些公司需要...

linuxCool
2分钟前
0
0
CentOS 安装Tomcat

Tomcat 介绍 Tomcat是Apache软件基金会(Apache Software Foundation)的Jakarta项目中的一个核心项目,由Apache、Sun和其他一些公司及个人共同开发而成。 Java 程序写的网站用tomcat+jdk来运...

野雪球
16分钟前
0
0
OSChina 周四乱弹 —— 每天都迟到是种什么样的体验

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @开源中国首席机器人 :《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 《Too Good At Goodbyes (Acoustic) - Sam Smith - 单曲》 ...

小小编辑
21分钟前
37
6
jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部