我是靠谱客的博主 丰富玉米,最近开发中收集的这篇文章主要介绍echarts x轴标签文字过多导致显示不全/x轴旋转/x轴显示完全,觉得挺不错的,现在分享给大家,希望可以做个参考。

概述

echarts x轴标签文字过多导致显示不全/x轴旋转/x轴显示完全
这主要涉及两点:
1.grid设置距下端有距离
2.x轴rotate 设置
下面直接放在echarts官网的的普通柱状图实例里,调整就明白了。注意对比去掉grid和axisLabel的不同效果。

option = {
xAxis: {
type: 'category',
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat3333', 'Su332'],
axisLabel: {
rotate: 40
}
},
grid: {
left: "3%",
top: 130,
right: 60,
bottom: 50,
containLabel: true,
},
yAxis: {
type: 'value'
},
series: [{
data: [120, 200, 150, 80, 70, 110, 130],
type: 'bar'
}]
};

参考:https://blog.csdn.net/superlover_/article/details/79714823

最后

以上就是丰富玉米为你收集整理的echarts x轴标签文字过多导致显示不全/x轴旋转/x轴显示完全的全部内容,希望文章能够帮你解决echarts x轴标签文字过多导致显示不全/x轴旋转/x轴显示完全所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错,欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(45)

评论列表共有 0 条评论

立即
投稿
返回
顶部