IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    echarts X轴竖向排列 (可指定文字数量)

    zongyan86发表于 2022-10-08 03:45:59
    love 0
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    // 此为 x 轴信息
     xAxis: [{
          type: "category",
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
          data: [], // 可动态赋值
          axisLabel: {
            show: true,
            interval: 0,
            // 此为关键点
            formatter: function (params) {
             // params为x轴文字内容
              var newParamsName = "";
              var paramsNameNumber = params.length;
              var provideNumber = 1; //一行显示几个字
              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;
            },
            textStyle: {
              color: "#6861a6", //文字颜色
            },
          },
        }, ],
    1
    2
    3
    4
    5
    6
    7
    8
         xAxis: [{
          axisLabel: {
            interval: 0,
            rotate: -45, // 主要是这个 设置角度即可 - 90 ~ 90 旋转方向也不同
          },
          type: "category",
          data: [],
        }],

    声明: 本文采用 BY-NC-SA 协议进行授权 | WEB开发分享
    转载请注明转自《echarts X轴竖向排列 (可指定文字数量)》



沪ICP备19023445号-2号
友情链接