解决echartsX轴坐标文字过长的几种方法

最新推荐文章于 2024-06-30 16:06:43 发布

原创最新推荐文章于 2024-06-30 16:06:43 发布 · 4.4k 阅读

1 ·

CC 4.0 BY-SA版权

前端同时被 2 个专栏收录

3 篇文章

订阅专栏

echarts

2 篇文章

订阅专栏

本文介绍如何使用ECharts实现X轴标签的倾斜显示效果。通过设置`axisLabel.rotate`属性来旋转X轴上的文本标签，使其倾斜15度角，同时调整了文本样式和线条颜色等细节。

1. 将X轴坐标斜着展示

效果图

X轴代码

xAxis: [{
		type: 'category',
		data: [],
		axisTick: {
			alignWithLabel: true
		},
		axisLabel: {    //重点在这一块，其余可以忽略
			interval: 0,   //这个一定要有，别忘记了
			rotate: 15,
			textStyle: {
				color: '#000',
				fontSize: 10
			}
		},
		axisLine: {
			show: true,
			interval: 0,
			lineStyle: {
				color: "RGB(210,221,217)"
			}
		}
	}],

参考博主