echarts图表的label换行显示

最新推荐文章于 2024-10-06 15:05:04 发布

原创最新推荐文章于 2024-10-06 15:05:04 发布 · 5.5k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#echarts

遇到的bug 专栏收录该内容

4 篇文章

订阅专栏

本文探讨了Echarts中遇到的标签(label)文字过长导致显示不全的问题，提出了通过调整倾斜、使用formatter回调函数格式化文本以及调整高度等方法，最终解决了标签的换行显示和完整展示的问题。

echarts中labeld的文字如果过长，就会出现下图中的效果
在这里插入图片描述
我们可以先试着通过设置文字倾斜来解决问题

var option = {
		tooltip: {
			trigger: 'axis',
		},
		toolbox: {
			feature: {
				dataView: {show: true, readOnly: false},
				magicType: {show: true, type: ['line', 'bar']},
				restore: {show: true},
				saveAsImage: {show: true}
			}
		},
		legend: {
			data: ['直方图', '折线图']
		},
		xAxis: [
			{
				type: 'category',
				data: nameArr,
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					rotate: 45,// 在这里设置倾斜角度
					interval: 0,//标签设置为全部显示
				}
			}
		],
		yAxis: [
			{
				type: 'value',
				name: '次数',
				min: 0,
				max: 6,
			}
		],
		series: [
			{
				name: '直方图',
				type: 'bar',
				data: valArr
			},
			{
				name: '折线图',
				type: 'line',
				color: ['#dd6b66'],
				yAxisIndex: 0,
				data: valArr
			}
		]
	};

效果如下，还是显示不完全
在这里插入图片描述
可以通过设置formatter回调函数来设置label文字格式

var option = {
		tooltip: {
			trigger: 'axis',
		},
		toolbox: {
			//
		},
		legend: {
			data: ['直方图', '折线图']
		},
		// grid: {
		// 	y2: 100
		// },
		xAxis: [
			{
				type: 'category',
				data: nameArr,
				axisPointer: {
					type: 'shadow'
				},
				axisLabel: {
					// rotate: 45,
					interval: 0,//标签设置为全部显示
					formatter: function(val) { // 这是回调函数，参数是label中的文字
						var charArr = val.split(''); 
						var str = '', i
						for(i = 0, i < charArr.length; i++) {
							str += charArr[i];
							if(i % 4 == 0) str += '\n'; //每隔4个字换行
						}
						return str
					}
				}

			}
		],
		yAxis: [
			//
		],
		series: [
			//
		]
	};

还有最后一点点问题，label的最后一行显示不全
在这里插入图片描述
改变一下高度即可

	var option = {
		tooltip: {
			//
		},
		toolbox: {
			//
		},
		legend: {
			data: ['直方图', '折线图']
		},
		// 加上这一句
		grid: {
		 	y2: 100
		},
		xAxis: [
			//
		],
		yAxis: [
			//
		],
		series: [
			//
		]
	};