将echarts x轴标签的文字倾斜显示
效果:
通过设置xAxis.axisLabel属性可实现。
代码如下:
axisLabel:{ interval:0, rotate:-20 //值>0向右倾斜,值<0则向左倾斜 }
关于echarts中横纵轴标签需要注意的点(与上文无关):
当想要横纵轴固定的时候需要将containLabel标签设置为false,这是横纵轴的坐标标签过长会溢出显示不全;当想横纵轴坐标标签显示完全,横纵轴不需要固定的时候将containLabel标签设置为true。
关于grid.containLabel标签简介:
grid 区域是否包含坐标轴的刻度标签。
-
containLabel 为
false
的时候: -
grid.left
grid.right
grid.top
grid.bottom
grid.width
grid.height
决定的是由坐标轴形成的矩形的尺寸和位置。 -
这比较适用于多个
grid
进行对齐的场景,因为往往多个grid
对齐的时候,是依据坐标轴来对齐的。 -
containLabel 为
true
的时候: -
grid.left
grid.right
grid.top
grid.bottom
grid.width
grid.height
决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。 -
这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。