Echarts X轴 强制显示所有标签 && 每行固定字数并换行显示

 

效果图如下：

 

 

直接上代码：

 axisLabel: {
            // 轴文字
            interval: 0, // 强制显示完整
           // 每行显示4个文字换行
            formatter:function(value) {
              var ret = ""; // 拼接加 \n 返回的类目项
              var maxLength = 4; // 每项显示文字个数
              var valLength = value.length; // X轴类目项的文字个数
              var rowN = Math.ceil(valLength / maxLength); // 类目项需要换行的行数
              if (rowN > 1)
              {
                for (var i = 0; i < rowN; i++) {
                  var temp = ""; // 每次截取的字符串
                  var start = i * maxLength; // 开始截取的位置
                  var end = start + maxLength; // 结束截取的位置
                  temp = value.substring(start, end) + "\n";
                  ret += temp; // 拼接最终字符串
                }
                return ret;
              }
              else {
                return value;
              }
            },
            color: "#d0e9eb",
            fontSize: 12,
          },

 

绝绝子喜欢的写法 效果图如下：

 

 

代码如下：

axisLabel: {
            // 大于4个字段 倾斜显示 （）
            rotate: this.jbxxName.length > 4 ? 40 : 0, 
            // 超过5个字显示省略号
            formatter: function (value) {
              if (value.length > 5) {
                return `${value.slice(0, 5)}...`;
              }
              return value;
            },
            color: "#d0e9eb",
            fontSize: 12,
          },

 

 

 

作者：微微一笑绝绝子
出处：https://www.cnblogs.com/wwyxjjz/p/17415677.html
本博客文章均为作者原创，转载请注明作者和原文链接。