echarts x轴文字显示不全

802 阅读1分钟

相信大家都会遇到这样的问题吧,x轴内容太多了,老是显示不全。

1.png

咿?我的文字呢?
哈哈哈哈哈 那下面有几个方法可以解决~

  • 第一种:两行竖着显示

2.png

 axisLabel: {
    interval: 0,
    formatter: function (value) {
      var ret = ""; //拼接加\n返回的类目项
      var maxLength = 2; //每项显示文字个数
      var valLength = value.length; //X轴类目项的文字个数
      var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
      if (rowN > 1) {
        //如果类目项的文字大于3,
        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;
      }
    },
  },

- 第二种:斜着显示

3.png

 axisLabel: {
    interval: 0,
    rotate: 40,
  },

- 第三种:竖着显示

4.png

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

- 第四种:分行显示

5.png

   show: true,
    interval: 0,
    formatter: function (params) {
      let contenLength = params.split("-");
      var newParamsName = "";
      if (!contenLength[2] || contenLength[2] == "null") {
        contenLength[2] = "";
      }
      if (!contenLength[0] || contenLength[0] == "null") {
        contenLength[0] = "";
      }
      if (!contenLength[1] || contenLength[1] == "null") {
        contenLength[1] = "";
      }
      newParamsName =
        contenLength[0] +
        "\n\n" +
        contenLength[1] +
        "\n\n" +
        contenLength[2] +
        "\n";
      return newParamsName;
    },
    textStyle: {
      color: "#6861a6", //文字颜色
    },
  },

前三种方法是转载的:原链接在这儿 blog.csdn.net/kebi007/art…