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

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

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

每天一个聪明小技巧！

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

css 文字过长省略号,css实现文字过长显示省略号的方法
因为网页排版的需要,有些地方需要过长的问题加上省略号.比如:标题限制20个中文的宽度,超出的就用省略号代替.之前会使用程序截取的方法,不过使用css来截取更有利于SEO. 下面就介绍一下具体的使用方法 ...
vue——echarts柱状图横轴文字太多放不下【处理办法】
1. 如果单纯是文字太多,且中间无法分割开的话,可以采用两种方式: 文字倾斜展示效果: 在options配置中的xAxis中配置如下代码: axisLabel: {interval: 0,rotat ...
echarts柱状图横向名字过长时显示省略号
实现效果: var data = ["19.60", "18.90", "13.00", "9.90", "6 ...
echart 柱状图横坐标文字过长，如何旋转
echart 柱状图横坐标文字过长,如何旋转有时候,在用柱状图表的时候,如果横坐标文字过长,某些文字就会消失不显示,我们可以将其旋转一下,调整到合适的角度,就能正常显示横坐标文字了. 比如下面这样, ...
echarts横坐标文字太长显示不完的两种解决办法：rotate旋转文字、调用函数让文字纵向排列
//方法1:横坐标文字太长显示不完,调用函数解决,在axisLabel下添加属性,让文字纵向排列: formatter:function(val){return val.split("&qu ...
Echarts 解决饼图文字过长重叠的问题
Echarts 解决饼图文字过长重叠的问题参考文章: (1)Echarts 解决饼图文字过长重叠的问题 (2)https://www.cnblogs.com/yingsu/p/10608014.ht ...
图表横坐标怎么改倾斜_Excel 图表横轴文字太长，不想让它倾斜，如何分行显示？...
Excel 中的图表,如果横轴文字过长,就会自动倾斜显示.有些同学觉得倾斜的文字不美观,希望仍然横排,超出长度可以自动换行.有没有可能实现? 图表本身并没有这个功能,但是我想了一个很简单办法,就可以实 ...
Echarts给折线图给横竖坐标轴添加箭头与标签文字过长显示不全处理
本人在做监控数据大屏时曾踩过不少坑,现将踩坑经验总结如下,数据大屏demo请点击这里一.饼图处理标签文字过长而显示不全的解决方案在使用echarts的过程中,有时会遇到标签文字过长导致显示不全的问 ...
ECharts X 轴标签过长导致文字重叠的 4 种解决方案
目录方法一:Echarts X 轴标签倾斜摆放方法二:Echarts X 轴限制每行字数,换行显示方法三:Echarts X 轴垂直竖显文字方法四:Echarts X 轴隔行显示使用 ...

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

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

最新文章

热门文章