将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 决定的是包括了坐标轴标签在内的所有内容所形成的矩形的位置。

      • 这常用于『防止标签溢出』的场景,标签溢出指的是,标签长度动态变化时,可能会溢出容器或者覆盖其他组件。

 

posted @ 2022-09-04 20:32  DAYTOY-105  阅读(5877)  评论(0编辑  收藏  举报