echarts x轴标签文字过多导致显示不全

如图:

解决办法1:xAxis.axisLabel 属性

axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置。(当然yAxis也是一样有这个属性的)
  1.  axisLabel: {interval:0,rotate:40 }

以上就可解决x轴文字显示不全并将文字倾斜。如图:


稍微解释一下
interval
坐标轴刻度标签的显示间隔(在类目轴中有效哦),默认会采用标签不重叠的方式显示标签(也就是默认会将部分文字显示不全)
可以设置为0强制显示所有标签,如果设置为1,表示隔一个标签显示一个标签,如果为3,表示隔3个标签显示一个标签,以此类推
rotate
标签倾斜的角度,在类目轴的类目标签显示不全时可以通过旋转防止标签重叠(官方这样说的)旋转的角度是-90到90度
问题又来了,这个名称x轴的文字如果太长会受到遮挡,还是显示不全,这个时候可以用grid属性解决
 
    grid: {left: '10%',bottom:'35%'},
如图:

解决办法2:调用formatter文字竖直显示

一般很多人都习惯办法1的方式虽然不是很完美,但是在一定程度上还是解决了一些问题。在文字不是非常多的情况下还是可以的,感觉还没第一种方法好
axisLabel中使用formatter回调,formatter有两个参数,使用方法是这样的formatter:function(value,index){} ,value是类目(测试医院A,人民医院),index 是类目索引。
      axisLabel: {
            interval: 0,
            formatter:function(value){
                     return value.split("").join("\n");}
            }
如图:
文字竖直这个formatter实在有点太简单化了,所以我们来做一个两个字的加\n的换行。formatter如下:

axisLabel: {

interval: 0,

formatter:function(value){

  1.       debugger
         var ret = "";//拼接加\n返回的类目项 
         var maxLength = 2;//每项显示文字个数
         var valLength = value.length;//X轴类目项的文字个数
    var rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
    if (rowN > 1)//如果类目项的文字大于3,
    {
       for (var i = 0; i < rowN; i++) {
            var temp = "";//每次截取的字符串
    var start = i * maxLength;//开始截取的位置
    var end = start + maxLength;//结束截取的位置
    //这里也可以加一个是否是最后一行的判断,但是不加也没有影响,那就不加吧
    temp = value.substring(start, end) + "\n";
    ret += temp; //凭借最终的字符串
    }
    return ret;
    }else {
    return value;
    }
    }
    }

效果如图

解决办法3:X轴类目项隔一个换行(使用formatter中index参数)

都是上面的第二种方法是利用formatter中的value参数实现了文字拼接\n换行的,但是index参数并没有使用,现在我们就一起来使用这两个参数实现隔一个类目项换行。
效果如图:
代码比较简单:
  1.  
    axisLabel: {
  2.         interval: 0, 
  3.        formatter:function(value,index) {
  4.             debugger 
  5.        if (index % 2 != 0) {
  6.                return '\n\n' + value; 
  7.          }else {
  8.                return value;
  9.              }
  10.          }}

这种做法是我比较推荐的一种。以上几种方法基本上能解决问题,但是都不是很完美。

echarts x轴文字显示不全(解决方案)的更多相关文章

  1. [置顶] echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.axisLabel 属性 axisLabel的类型是object ,主要作用是:坐标轴刻度标签的相关设置.(当然yAxis ...

  2. echarts x轴文字显示不全解决办法

    标题:echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐):http://blog.csdn.net/kebi007/article/details/68488694

  3. echarts x轴文字显示不全(xAxis文字倾斜比较全面的3种做法值得推荐)

    出处:http://blog.csdn.net/kebi007/article/details/68488694

  4. echarts Y轴名称显示不全(转载)

    转载来源:https://blog.csdn.net/qq8241994/article/details/90720657今天在项目的开发中遇到的一个问题,echarts Y轴左侧的文字太多了,显示不 ...

  5. echarts柱状图坐标文字显示不完整解决方式

    echarts柱状图坐标文字显示不完整解决方式 本文转载自:https://jingyan.baidu.com/article/ab69b2707a9aeb2ca7189f0c.html echart ...

  6. matplotlib y轴标注显示不全以及subplot调整的问题

    matplotlib y轴标注显示不全以及subplot调整的问题 问题: 我想在y轴显示的标注太长,想把它变成两行显示,发现生成的图形只显示的第二行的字,把第一行的字挤出去了 想要的是显示两行这样子 ...

  7. Cell 动态行高文字显示不全问题探索

    目录 问题概述 一.新建工程 二.尝试复现问题 尝试解决 修改contentLblBtmCon优先级为High(750) 修改contentLblBtmCon优先级为Low(250) 小结 其他解决思 ...

  8. echarts x轴坐标文字显示不全

    在echarts中应用柱状图或者折线图时,当数据量过多的时候,X轴的坐标就会显示不全(如下图图一),在ECharts图表组件内部有一个机制,用于统计xAxis坐标刻度的个数和图表宽度,从而会自动调整刻 ...

  9. 百度echarts插件x轴坐标显示不全决解方法

    X轴显示不全: xAxis.axisLabel.interval number, Function [ default: 'auto' ] 坐标轴刻度标签的显示间隔,在类目轴中有效. 默认会采用标签不 ...

随机推荐

  1. 使用actioncable做的notification(GoRails教学,2课)

    GoRails视频系列: 1.   用actioncable建立Notifications 2.  见博客: 3.  非认证/登陆user不能使用actioncable 用ActionCable 建立 ...

  2. express 调优的一个过程和心得,不错的文章

    Netflix的软件工程师Yunong Xiao最近在公司的技术博客上写了一篇文章,分析了他所在的团队在将Netflix网站UI转移到Node.js上时遇到的延迟问题.在文章中他描述了找到问题根本原因 ...

  3. uva11551矩阵快速幂

    题目看了半天没看懂,,就是把一个数列更新r次,每次更新就是计算和,就是每一个数,只要出现了的表号都要加上去,具体看代码 矩阵快速幂实现加速 #include<map> #include&l ...

  4. 数论练习(5)——青蛙的约会(扩gcd)

    青蛙的约会 Time Limit: 1000MS   Memory Limit: 10000K Total Submissions: 122502   Accepted: 26015 Descript ...

  5. MyBatis Generator去掉生成的注解

    是不是很讨厌mybatis Generator帮我们生成代码的时候在Mapper和mapper.xml文件中生成的一大堆注解?今天在看MyBatis Generator代码的时候发现,原来mybati ...

  6. Powerdesigner颜色设置

    Powerdesigner颜色设置    

  7. STM32知识点纪要

    1.GPIO BSRR(端口位设置寄存器)是赋1相应IO拉高,赋0无影响 BRR(端口位清除寄存器)是是赋1相应IO拉低,赋0无影响 2.UART 连线TX—TX,RX—RX 3.JTAG和SWD接口 ...

  8. hrbust 1621 迷宫问题II 广搜

    题目链接:http://acm.hrbust.edu.cn/vj/index.php?/vj/index.php?c=&c=contest-contest&cid=134#proble ...

  9. Python+Flask+MysqL的web建设技术过程

    一.前言(个人学期总结) 个人总结一下这学期对于Python+Flask+MysqL的web建设技术过程的学习体会,Flask小辣椒框架相对于其他框架而言,更加稳定,不会有莫名其妙的错误,容错性强,运 ...

  10. kmp&扩展kmp

    kmp: KMP的主要目的是求B是不是A的子串,以及若是,B在A中所有出现的位置 写的很详细的大佬的博客:http://www.matrix67.com/blog/archives/115 模板: / ...