The X-axis text of the echart chart is too long and the label is hidden. Solution

In the Echart icon, the X-axis label text interval is automatically calculated by default. If the label text length is too long, the label may be hidden, as shown in the figure

This display obviously does not meet strict business requirements. Three solutions are provided below

The first type: vertical display

Effect:

 At a certain height, the display effect of this processing is not ideal.

Code:

xAxis: {
      type: 'category',
      data: res.data.data.sz.xAxis,
      axisLabel:{
          fontSize:12,
          formatter: function(value) {
              return value.split('').join('\n')
          },
      },
  }

The formatter formats the display label so that every character in the label has a new line.

The second type, display part

Effect:

 It can be seen that the display effect is quite impressive. Suitable for situations where the label is easily identifiable

Code:

axisLabel:{
    fontSize:12,
    formatter: function(value) {
        if(value.length > 2){
            return value.substr(0 , 2) + '...'
        }else{
            return value
        }
    }
},

The formatter attribute is also used to format the label display so that it only displays characters of a fixed length. Characters exceeding the fixed length are replaced by....

The third method is to force all labels to be displayed and rotated.

Effect:

 This is a more convenient method to ensure that the label content is fully displayed. It not only ensures that the label is fully displayed but also keeps it beautiful at a certain height.

Code:

xAxis: {
    type: 'category',
    data: res.data.data.sz.xAxis,
    axisLabel:{
        fontSize:12,
        interval: 0,
        rotate: 30
    },
},

The function of interval is the display interval of the coordinate axis scale labels, which is valid in the category axis.

By default, labels are displayed at strategic intervals where labels do not overlap.

Can be set to 0 to force all labels to be displayed.

If set to  1, it means "display a label every other label". If the value is  2, it means to display a label every other label, and so on.