Simple example:
The X-axis of the line chart or column chart in echarts is not fully displayed as shown below
Solution:
The first one: set interval: 0, as follows:
xAxis: {
type: "category",
axisLabel: {
//x轴文字的配置
show: true,
interval: 0,//使x轴文字显示全
}
}
Result: If there is too much data, there will be obvious overlap and the effect will not be good.
Second type: Use formatter to wrap the display, as follows:
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;
}
},