echart横坐标文字过长

一、 修改文字排版方式

interval：坐标轴刻度标签的显示间隔
默认会采用标签不重叠的方式显示标签（也就是默认会将部分文字显示不全）
可以设置为0强制显示所有标签，如果设置为1，表示隔一个标签显示一个标签，如果为3，表示隔3个标签显示一个标签，以此类推

倾斜45度

xAixs : {
      // x轴文字倾斜
      axisLabel:{
        interval:0,
        rotate:45,//倾斜度 -90 至 90 默认为0                 
        textStyle:{                    
          color:"#000000"
        }
      }
}

垂直

xAxis ： {
     axisLabel:{
       interval: 0,
       formatter: function (value) {
          //x轴的文字改为竖版显示
          var str = value.split("");
          return str.join("\n");
       }
     },
}

几个文字一换行

formatter: function(params) {
                var newParamsName = ''
                var paramsNameNumber = params.length
                var provideNumber = 4
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
                for (let row = 0; row < rowNumber; row++) {
                  newParamsName +=
                    params.substring(
                      row * provideNumber,
                      (row + 1) * provideNumber
                    ) + '\n'
                }
                return newParamsName
              }

二、调整底部区域显示大小
把grid中的bottom的值调大，将grid组件向上移动

 grid:{//直角坐标系内绘图网格
      show:true,//是否显示直角坐标系网格。[ default: false ]
      left:"20%",//grid 组件离容器左侧的距离。
      right:"30px",
      borderColor:"#c45455",//网格的边框颜色
      bottom:"20%" //
},

文档

Echarts x轴文本内容太长

网站导航

网站导航