今天在使用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");
}
}
差不多就是这两种了,还有其他是在这两种的基础上延伸出来的就不一一展示了。
每天一个聪明小技巧!