The x-axis of ecarts is not fully displayed
As shown in the picture:
Solution 1: xAxis.axisLabel property
The type of axisLabel is object, and its main function is to set the scale label of the coordinate axis. (Of course yAxis also has this attribute)
interval receives a number value, interval: 1, that is to display one every other
axisLabel: {
interval:0,
rotate:40
}
** The above can solve the incomplete display of the x-axis text and tilt the text.**
Solution 2: Call formatter to display text vertically
Generally, many people are used to method 1. Although it is not perfect, it still solves some problems to a certain extent. In the case of not too many texts, it is still possible. I feel that the first method is not as good as
using the formatter callback in the axisLabel. The formatter has two parameters. The method of use is formatter: function(value,index){}, and the value is Category (Test Hospital A, People's Hospital), index is the category index.
axisLabel: {
interval: 0,
formatter:function(value) {
return value.split("").join("\n");
}
}
As shown in the picture:
Solution 3: X-axis category items are separated by a line break (use the index parameter in the formatter)
The second method above is to use the value parameter in the formatter to realize text splicing \n line break, but the index parameter is not used, now we will use these two parameters together to achieve line break every other category item.
code show as below:
axisLabel: {
interval: 0,
formatter:function(value,index) {
debugger
if (index % 2 != 0) {
return '\n\n' + value;
}else {
return value;
}
}
}
The effect is as shown in the figure:
