echars x轴坐标显示不全处理方式

显示不全的效果

xAxis中添加

      axisLabel: {
            boundaryGap: false,//x轴两边不留空白

            //x轴文字的配置
            show: true,
            interval: 0,//使x轴文字显示全
          }

axisLabel中添加以下进行格式化

  axisLabel: {
          //x轴文字的配置
          show: true,
          interval: 0,//使x轴文字显示全
          textStyle: {
            color: "rgba(219, 225, 255, 1)"
          },
          formatter: function (params) {
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = 7; //一行显示几个字
            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;
          }

        },

效果

posted @   菜鸟辉哥  阅读(56)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· DeepSeek 开源周回顾「GitHub 热点速览」
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示