Too much text in the echarts label causes incomplete display solution

Too much text in echarts x-axis label causes incomplete display

As shown in the figure:

Solution 1: xAxis.axisLabel property

The type of axisLabel is object, and the main function is: related settings of the axis scale label. (Of course yAxis also has this property)

[html]  view plain copy  

1. axisLabel: {  
2.    interval:0,  
3.    rotate:40  
4. }  

The above can solve the incomplete display of the x-axis text and tilt the text. As shown in the figure:

explain a little

interval

The display interval of the coordinate axis tick labels (valid in the category axis), the labels will be displayed in a way that the labels do not overlap by default (that is, some text will be incomplete by default)
can be set to 0 to force all labels to be displayed, if set to 1, means to display a label every other label, if it is 3, means to display a label every 3 labels, and so on

rotate

The angle of the inclination of the label, when the label of the category axis is not fully displayed, the label can be prevented from overlapping by rotation (officially said). The angle of rotation is -90 to 90 degrees.
The problem comes again. If the text of the x-axis of this name is too large The length will be blocked, or the display will not be complete. At this time, you can use the grid property to solve it.

[html]  view plain copy  

1. grid: {  
2. left: '10%',  
3. bottom:'35%'  
4. },  

As shown in the figure:

Solution 2: Call the formatter to display the text vertically

In general, many people are used to method 1. Although the method is not perfect, it still solves some problems to a certain extent. In the case of not very much text, it is still possible, I feel that it is not as good as the first method

The formatter callback is used in axisLabel. The formatter has two parameters. The usage method is formatter:function(value,index){}, value is the category (test hospital A, people's hospital), and index is the category index.

[html]  view plain copy  

1. axisLabel: {  
2.                                interval: 0,  
3.                                formatter:function(value)  
4.                                {  
5.                                    return value.split("").join("\n");  
6.                                }  
7.                            }  

如图：

文字竖直这个formatter实在有点太简单化了，所以我们来做一个两个字的加\n的换行。formatter如下：

[html]  view plain  copy

1. axisLabel: {  
2.                                      interval: 0,  
3.                                      formatter:function(value)  
4.                                      {  
5.                                          debugger  
6.                                          var ret = "";//拼接加\n返回的类目项  
7.                                          var maxLength = 2;//每项显示文字个数  
8.                                          var valLength = value.length;//X轴类目项的文字个数  
9.                                          var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数  
10.                                          if (rowN > 1)//如果类目项的文字大于3,  
11.                                          {  
12.                                              for (var i = 0; i < rowN; i++) {  
13.                                                  var temp = "";//每次截取的字符串  
14.                                                  var start = i * maxLength;//开始截取的位置  
15.                                                  var end = start + maxLength;//结束截取的位置  
16.                                                  //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧  
17.                                                  temp = value.substring(start, end) + "\n";  
18.                                                  ret += temp; //凭借最终的字符串  
19.                                              }  
20.                                              return ret;  
21.                                          }  
22.                                          else {  
23.                                              return value;  
24.                                          }  
25.                                      }  
26.                                  }  

效果如图

解决办法3：X轴类目项隔一个换行(使用formatter中index参数)

都是上面的第二种方法是利用formatter中的value参数实现了文字拼接\n换行的，但是index参数并没有使用，现在我们就一起来使用这两个参数实现隔一个类目项换行。

效果如图：

代码比较简单：

[html]  view plain  copy

1. axisLabel: {  
2.                                 interval: 0,  
3.                                 formatter:function(value,index)  
4.                                 {  
5.                                     debugger  
6.                                     if (index % 2 != 0) {  
7.                                         return '\n\n' + value;  
8.                                     }  
9.                                     else {  
10.                                         return value;  
11.                                     }  
12.                                 }  
13.                             }  

This approach is the one I recommend. The above methods can basically solve the problem, but they are not perfect.

You may encounter one in common 

It is estimated that everyone will encounter such a problem, because this data is almost dynamic, and it can be displayed when the number of categories of the xAxis category axis is small, so there is no need to tilt like this. So what to do? This is indeed a bit embarrassing, there seems to be no solution, it's really a bit embarrassing, if you have one, please let me know, thank you!