echarts X轴文字排列方式总结

1.竖向排列 （可指定文字数量）

// 此为 x 轴信息
 xAxis: [{
      type: "category",
      axisTick: {
        show: false,
      },
      splitLine: {
        show: false,
      },
      data: [], // 可动态赋值
      axisLabel: {
        show: true,
        interval: 0,
        // 此为关键点
        formatter: function (params) {
         // params为x轴文字内容
          var newParamsName = "";
          var paramsNameNumber = params.length;
          var provideNumber = 1; //一行显示几个字
          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;
        },
        textStyle: {
          color: "#6861a6", //文字颜色
        },
      },
    }, ],

2.旋转角度排列

 xAxis: [{
      axisLabel: {
        interval: 0,
        rotate: -45, // 主要是这个 设置角度即可 - 90 ~ 90 旋转方向也不同
      },
      type: "category",
      data: [],
    }],

interval

坐标轴刻度标签的显示间隔(在类目轴中有效哦)，默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推

一开始我没设置 因为标签文本过长的原因他就自动不显示全部

image.png

被遮挡住就让grid 组件离容器向上移动 把grid中的bottom的值调大一些

 grid:{//直角坐标系内绘图网格
            show:true,//是否显示直角坐标系网格。[ default: false ]
            left:"20%",//grid 组件离容器左侧的距离。
            right:"30px",
            borderColor:"#c45455",//网格的边框颜色
            bottom:"20%" //
        },

3.文字竖直显示

同样和换行一个道理,只是这个是单个文字换行
在xAxis.axisLabel中 使用formatter回调函数实现换行

axisLabel: {  
                               interval: 0,  
                               formatter:function(value)  
                               {  
                                   return value.split("").join("\n");  
                               }  
                           }  

4.隔一个换行

 在xAxis.axisLabel中 使用formatter回调函数实现换行

axisLabel : {//坐标轴刻度标签的相关设置。
                clickable:true,//并给图表添加单击事件  根据返回值判断点击的是哪里
                interval : 0,
                formatter : function(params,index){
                    if (index % 2 != 0) {
                        return '\n\n' + params;
                    }
                    else {
                        return params;
                    }
                }

            }