Echarts设置x轴文字垂直显示、倾斜显示或省略显示

最新推荐文章于 2025-07-09 18:46:09 发布

原创最新推荐文章于 2025-07-09 18:46:09 发布 · 1w 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#Echarts

Echarts 专栏收录该内容

17 篇文章

订阅专栏

本文详细介绍如何在ECharts中优化轴标签的显示效果，包括垂直显示、倾斜显示及省略过长标签的方法，适用于处理大量数据时的文字展示问题。

垂直显示：

let option = {
	xAxis:{
		//文字样式
		axisLabel: {
             show: true,                               
             textStyle: {
                color: '#595C61'
             },
             formatter:function(value){
				return value.split("").join("\n");
			 }
        }
	}
}

在这里插入图片描述

倾斜显示：

let option = {
	xAxis:{
		//文字样式
		axisLabel: {
             show: true,                               
             textStyle: {
                color: '#595C61'
             },
             rotate:45
        }
	}
}

在这里插入图片描述

省略显示：

let option = {
	xAxis:{
		//文字样式
		axisLabel: {
             show: true,                               
             textStyle: {
                color: '#595C61'
             },
             formatter:function(value){
				 if(value.length > 6){
                        return `${value.slice(0,4)}...`;
                 }
                 return value;
			 }
        }
	}
}

在这里插入图片描述