【解决】echarts条形图纵坐标显示不全

NOyesNONO_

已于 2024-04-23 09:37:07 修改

阅读量551

点赞数 2

分类专栏： echarts 文章标签： echarts 前端 javascript

于 2024-04-19 11:32:06 首次发布

本文链接：https://blog.csdn.net/NOyesNONO_/article/details/137957883

版权

2 篇文章 0 订阅

订阅专栏

文章讨论了如何在图表组件中使用`grid.containLabel`属性来解决坐标标签过长导致的显示问题，当标签内容超出默认宽度时，需配合此属性调整容器大小和隐藏策略。作者分享了解决方法并感谢了一篇相关的技术博客。

摘要由CSDN通过智能技术生成

先说结论：

option:{
	...
	grid: {
	      containLabel: true
	},
	...
}

这个属性是控制整体的坐标标签的。加上这个就可以显示完整了。然后再根据其他属性调整标签的字体、颜色之类的

 yAxis : [{
	...
	axisLabel:{
		width:100,
		overflow:'break',
		truncate:'...',
		color:'red',
		fontSize:10,
	},
	...
}],

如果你的label内容很多，已经超出默认给的宽度了，那么继续增加width是没用的。这时的宽度必须搭配grid.containLabel:true才能生效！原来我试了好多都不生效，就是这个属性没有加。

举例：
在这里插入图片描述

我没看源码，但我猜应该是label整体在被containLabel控制，类似于外层有一个容器有固定的宽，超出隐藏，里边具体到每一个Label再宽，也会被隐藏掉。

解决方法是看了这篇文章 https://www.jb51.net/javascript/285816kz1.htm。感谢原博，解决了我一大难题！

关注

专栏目录