echarts X轴显示不全的处理方法(显示完全以及换行)

 更新时间:2024年01月15日 09:50:32   作者:有蝉  
我们在echarts表中经常会出现X轴的信息显示不完全的情况,所以本文小编给大家介绍了echarts X轴显示不全的处理方法,文中通过代码示例给大家介绍的非常详细,具有一定的参考价值,需要的朋友可以参考下

echarts  X轴显示不全   如下图

如何处理

首先,设置 interval: 0,如下

    xAxis: {
          type: "category",         
          axisLabel: {
            //x轴文字的配置
            show: true,
            interval: 0,//使x轴文字显示全
           }
    }

效果图如下:明显重叠

解决:使用formatter 换行显示,处理如下

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 = 3; //一行显示几个字
              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;
            }
          }
        },

 效果如下图

以上就是echarts X轴显示不全的处理方法(显示完全以及换行)的详细内容,更多关于echarts X轴显示不全的资料请关注脚本之家其它相关文章!

相关文章

  • javascript文件加载管理简单实现方法

    javascript文件加载管理简单实现方法

    这篇文章主要介绍了javascript文件加载管理简单实现方法,可实现顺序加载所有js文件的功能,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • 给Function做的OOP扩展

    给Function做的OOP扩展

    自编框架Megami的一部分……现在发现自己实在太宅了…… 文件中出现的名字请对号入座……
    2009-05-05
  • webpack4 CSS Tree Shaking的使用

    webpack4 CSS Tree Shaking的使用

    这篇文章主要介绍了webpack4 CSS Tree Shaking的使用,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • javascript删除字符串最后一个字符

    javascript删除字符串最后一个字符

    需求是一个字符串,想删除这个字符串最后一个字符,比如“1,2,3,4,5,”,删除最后一个“,”用javascript怎么实现?下面给出三种方法
    2014-01-01
  • JavaScript中对象属性描述符的使用详解

    JavaScript中对象属性描述符的使用详解

    属性描述符是 ECMAScript 5 新增的语法,它其实就是一个内部对象,用来描述对象的属性的特性,下面小编就来为大家详细介绍一下js中对象属性描述符的使用,需要的可以参考下
    2023-11-11
  • ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    ExtJs的Ext.Ajax.request实现waitMsg等待提示效果

    这篇文章主要介绍了ExtJs的Ext.Ajax.request实现waitMsg等待提示效果,需要的朋友可以参考下
    2017-06-06
  • 跟我学Node.js(四)---Node.js的模块载入方式与机制

    跟我学Node.js(四)---Node.js的模块载入方式与机制

    Node.js中模块可以通过文件路径或名字获取模块的引用。模块的引用会映射到一个js文件路径,除非它是一个Node内置模块。Node的内置模块公开了一些常用的API给开发者,并且它们在Node进程开始的时候就预加载了。
    2014-06-06
  • JS实现一个按钮的方法

    JS实现一个按钮的方法

    这篇文章主要介绍了JS实现一个按钮的方法,实例分析了使用js实现一个按钮的功能与相关技巧,需要的朋友可以参考下
    2015-02-02
  • JavaScript版DateAdd和DateDiff函数代码

    JavaScript版DateAdd和DateDiff函数代码

    VBScript中有两个非常好用的日期操作函数:DateAdd用来给日期添加指定时间间隔,DateDiff用来返回两个日期的时间间隔。可惜的是JavaScript没有,不过我们可以写一个函数来实现,一样的,呵呵
    2012-03-03
  • JavaScript中的类型检查

    JavaScript中的类型检查

    本文给大家介绍了JavaScript中的类型检查的一些知识点,整理的非常详细,推荐给大家,希望对大家学习JavaScript能够所帮助
    2020-02-02

最新评论