echarts的x轴显示不全解决方法（显示完全以及换行）

最新推荐文章于 2024-06-10 22:30:03 发布

青颜的天空

最新推荐文章于 2024-06-10 22:30:03 发布

阅读量1.8w

点赞数 21

分类专栏：学习 Echarts 文章标签： echarts javascript

本文链接：https://blog.csdn.net/a1056244734/article/details/125747416

版权

学习同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

Echarts

3 篇文章 0 订阅

订阅专栏

问题描述

当x轴坐标过长时，会出现显示不全的现象

解决方法

1. 在xAxis中加

axisLabel: {
 rotate: 45
}

效果1

2. 调用formatter文字竖直显示

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

解决2

3. 让x轴文字折行

首先在 axisLabel 中添加 interval: 0, 使x轴文字显示全
效果3.1
会发现文字是显示完全了，但是却重叠了，此时调用 formatter 方法，使文字折行

axisLabel: {
  interval: 0, //使x轴文字显示全
  formatter: function (params) {
    let newParamsName = '';
    const paramsNameNumber = params.length; // 文字总长度
    const provideNumber = 6; //一行显示几个字
    const rowNumber = Math.ceil(paramsNameNumber / provideNumber);
    if (paramsNameNumber > provideNumber) {
      for (let p = 0; p < rowNumber; p++) {
        const start = p * provideNumber;
        const end = start + provideNumber;
        const tempStr = p === rowNumber - 1 ? params.substring(start, paramsNameNumber) : params.substring(start, end) + '\n';
        newParamsName += tempStr;
      }
    } else {
      newParamsName = params;
    }
    return newParamsName;
  },
},