使用echarts柱状图横坐标文字过长放不下，文字会被隐藏

最新推荐文章于 2024-05-09 10:19:41 发布

十五天丶

最新推荐文章于 2024-05-09 10:19:41 发布

阅读量1.1w

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/Gzzzzzh/article/details/108106211

版权

今天在使用echarts中使用了柱状图，因为横坐标的文字过长，导致了显示不全，便去百度学习了一番总结下。

1、可以设置字体倾斜实现效果（我用的就是这个）上图

这是在xAxis: 中加入了

axisLabel: {
    interval: 0,
    rotate: 20
},

interval：间隔每个坐标之间的间隔，正常显示设置 0 就可以了。

rotate：偏移，也可以说是倾斜。值是number类型

但是这样可能会有新的问题，就是左右边距不够文字会被遮挡一部分，这就需要用到

grid:{
    left:"20%",   //grid 组件离容器左侧的距离
    right:"30px", //grid 组件离容器右侧的距离
    bottom:"20%"  //grid 组件离容器下边距的距离
}

可以设置边框的距离，调到合适的距离文字就可以完全展示出来了。

2、第二种中是让文字竖直排列（我觉得不好看，没用）

直接设置formatter文字竖直显示

axisLabel中使用formatter回调，formatter有两个参数，使用方法是这样的formatter:function(value,index){}

axisLabel: {
    interval: 0,
    formatter:function(value)
        {
            return value.split("").join("\n");
        }
}

差不多就是这两种了，还有其他是在这两种的基础上延伸出来的就不一一展示了。

每天一个聪明小技巧！

关注