1:Echarts X 轴 标签倾斜摆放

axisLabel: {
      //  X 坐标轴标签相关设置,写在xAxis里面
      interval: 0,//全部标签显示
      rotate: '45'//标签倾斜度数
    }

2:Echarts X 轴 限制每行字数,换行显示
使用axisLabel的formatter函数,一行显示多少字数,超过则换行

formatter: function (params) {
                var provideNumber = 4; // 每行显示的字数
              if (params && params.toString().length > provideNumber) {
                var strToArr = params.toString().split('');
                for (var i = provideNumber; i <= params.toString().length; i += provideNumber + 1) {
                  strToArr.splice(i, 0, '\n');
                }
                return strToArr.join('');
                }
              return params
            }

用正则替换

formatter: function (params) {
               var provideNumber = 4; // 每行显示的字数
              if (params && params.toString().length > provideNumber) {
                return params.toString().replace(/(.{4})/g, "$1\n")
              }
              return params
            }

3:Echarts X 轴 垂直竖显文字
与第2点同理,只是变成了一个字换行,字符串-》数组=》字符串,如下

return value.split('').join('\n');

4:Echarts X 轴 隔行显示
与第2点同理,标签奇数换在下一行显示

	if (index % 2 != 0) {
          return '\n\n' + params;
        } else {
          return params;
        }

5:正则表达式中添加变量,应用echarts的x轴标签重叠 解决

 let provideNumber  = 4;
 let reg = new RegExp("(.{" + provideNumber + "})", "g");
 params.toString().replace(reg, "$1\n")

等价于

params.toString().replace(/(.{4})/g, "$1\n")

应用echarts的x轴标签重叠 解决:https://blog.csdn.net/HDdgut/article/details/125743064

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐