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

2023-10-18 17:00| 来源: 网络整理| 查看: 265

今天在使用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"); } }

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

每天一个聪明小技巧！

【本文地址】

公司简介

联系我们