先说结论:
option:{
...
grid: {
containLabel: true
},
...
}
这个属性是控制整体的坐标标签的。加上这个就可以显示完整了。然后再根据其他属性调整标签的字体、颜色之类的
yAxis : [{
...
axisLabel:{
width:100,
overflow:'break',
truncate:'...',
color:'red',
fontSize:10,
},
...
}],
如果你的label内容很多,已经超出默认给的宽度了,那么继续增加width是没用的。这时的宽度必须搭配grid.containLabel:true
才能生效!原来我试了好多都不生效,就是这个属性没有加。
如图:width给了300,但是显示不全,能看到Mon的M被截掉了。
我没看源码,但我猜应该是label整体在被containLabel
控制,类似于外层有一个容器有固定的宽,超出隐藏,里边具体到每一个Label再宽,也会被隐藏掉。
解决方法是看了这篇文章 https://www.jb51.net/javascript/285816kz1.htm。感谢原博,解决了我一大难题!