echarts X轴显示不全的处理方法(显示完全以及换行)

 更新时间:2024年01月15日 09:50:32   作者:有蝉  
我们在echarts表中经常会出现X轴的信息显示不完全的情况,所以本文小编给大家介绍了echarts X轴显示不全的处理方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下

echarts  X轴显示不全   如下图

如何处理

首先,设置 interval: 0,如下

    xAxis: {
          type: "category",         
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0,//使x轴文字显示全
           }
    }

效果图如下:明显重叠

解决:使用formatter 换行显示,处理如下

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;
            }
          }
        },

 效果如下图

以上就是echarts X轴显示不全的处理方法(显示完全以及换行)的详细内容,更多关于echarts X轴显示不全的资料请关注脚本之家其它相关文章!

相关文章

最新评论