echarts X轴显示不全如何处理(显示完全以及换行)
echarts X轴显示不全如下图如何处理首先,设置interval: 0,如下xAxis: {type: "category",axisLabel: {//x轴文字的配置show: true,interval: 0,...
文章共263字 · 阅读需要大约1分钟
一键AI生成摘要,助你高效阅读
问答
·
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;
}
}
},
效果如下图
更多推荐
已为社区贡献9条内容
所有评论(0)