echarts X轴显示不全的处理方法(显示完全以及换行)
更新时间:2024年01月15日 09:50:32 作者:有蝉
我们在echarts表中经常会出现X轴的信息显示不完全的情况,所以本文小编给大家介绍了echarts X轴显示不全的处理方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下
echarts X轴显示不全 如下图
如何处理
首先,设置 interval: 0,如下
xAxis: { type: "category", axisLabel: { //x轴文字的配置 show: true, interval: 0,//使x轴文字显示全 } }
效果图如下:明显重叠
解决:使用formatter 换行显示,处理如下
axisLabel: { //x轴文字的配置 show: true, interval: 0,//使x轴文字显示全 textStyle: { color: "rgba(219, 225, 255, 1)" }, formatter: function(params) { var newParamsName = ""; var paramsNameNumber = params.length; var provideNumber = 3; //一行显示几个字 var rowNumber = Math.ceil(paramsNameNumber / provideNumber); if (paramsNameNumber > provideNumber) { for (var p = 0; p < rowNumber; p++) { var tempStr = ""; var start = p * provideNumber; var end = start + provideNumber; if (p == rowNumber - 1) { tempStr = params.substring(start, paramsNameNumber); } else { tempStr = params.substring(start, end) + "\n"; } newParamsName += tempStr; } } else { newParamsName = params; } return newParamsName; } } },
效果如下图
以上就是echarts X轴显示不全的处理方法(显示完全以及换行)的详细内容,更多关于echarts X轴显示不全的资料请关注脚本之家其它相关文章!
相关文章
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
这篇文章主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下2017-06-06跟我学Node.js(四)---Node.js的模块载入方式与机制
Node.js中模块可以通过文件路径或名字获取模块的引用。模块的引用会映射到一个js文件路径,除非它是一个Node内置模块。Node的内置模块公开了一些常用的API给开发者,并且它们在Node进程开始的时候就预加载了。2014-06-06JavaScript版DateAdd和DateDiff函数代码
VBScript中有两个非常好用的日期操作函数:DateAdd用来给日期添加指定时间间隔,DateDiff用来返回两个日期的时间间隔。可惜的是JavaScript没有,不过我们可以写一个函数来实现,一样的,呵呵2012-03-03
最新评论