echarts x轴文字太长换行、文字倾斜、文字竖直展示

x轴若文字太长会导致文字重合,有三种方法可以解决,在xAxis.axisLabel中设置formatter即可。

第一种是设置超过几个字可以换行显示,例子设置的是四个字

  xAxis: {
        axisLabel: {
             formatter: function (params) {
              var str = "";                 // 最终拼接成的字符串
              var paramsLen = params.length;// 获取每项文字的个数
              var len = 4;                  // 每行能显示的字的个数(根据实际情况自己设置)
              var rowNumber = Math.ceil(paramsLen / len); // 换行的话,需要显示几行,向上取整
              if (paramsLen > len) {        //大于设定的len就换行,不大于就不变化
                for (var i = 0; i < rowNumber; i++) {
                  var temp = "";            // 表示每一次截取的字符串
                  var start = i * len;      // 开始截取的位置
                  var end = start + len;    // 结束截取的位置
                  if (i == rowNumber - 1) { // 最后一次不换行
                    temp = params.substring(start, paramsLen);
                  } else {                  // 每一次拼接字符串并换行
                    temp = params.substring(start, end) + "\n";
                  }
                  str += temp;              // 最终拼成的字符串
                }
              } else {                      // 给新的字符串赋值
                str = params;
              }
              return str;                   //返回字符串
            }
          },
      },

在这里插入图片描述

第二种是设置文字倾斜

  xAxis: {
        axisLabel: {
        rotate:45   //设置的值大于0向右倾斜,小于0向左
        }
  }

在这里插入图片描述

第三种是设置文字竖直显示

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

在这里插入图片描述

  • 10
    点赞
  • 13
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值