echarts X轴显示不全的处理方法(显示完全以及换行)
作者：有蝉
我们在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轴显示不全的资料请关注脚本之家其它相关文章！