在使用echarts2的过程中,有时会遇到标签文字过长导致显示不完整的问题。例如:

这时候就需要用到 标签里的formatter 回调函数来处理这种情况了。

方式一:  formatter : ' {b} : \n {c} \n ({d}%) ',      这种是指定某个地方换行。

 备注:官方文档里面有{a},{b},{c},{d}的解释:

    这里是饼图,所以 { b } 就是数据项的名称即:“直接访问”,“邮件营销直”等。

             { c }就是数据项下面的那个数值

             { d }就是下面的那个百分比

    注意:在饼图里如果是tootip里面的formatter,那么 \n 要换成 <br />才能达到换行的效果。其它图没试过,不知道是否一样。

方式二:自定义函数来处理达到自定义每行个数再换行

  1. formatter:get //调用get
  2. textStyle:{ //这只是为了让文字居中而已
  3.   align:"center", //水平对齐方式可选left,right,center
  4.   baseline:"top",    //垂直对齐方式可选top,bottom,middle
  5. },

  然后在最外面定义一个函数表达式

  1. var get=function(e){
  2.      var newStr=" ";
  3. var start,end;
  4.     var name_len=e.name.length;              //每个内容名称的长度
  5.     var max_name=4;                   //每行最多显示的字数
  6.     var new_row = Math.ceil(name_len / max_name);     // 最多能显示几行,向上取整比如2.1就是3行
  7.     if(name_len>max_name){                //如果长度大于每行最多显示的字数
  8.       for(var i=0;i<new_row;i++){             //循环次数就是行数
  9.         var old='';                  //每次截取的字符
  10.         start=i*max_name;            //截取的起点
  11.          end=start+max_name;           //截取的终点
  12.         if(i==new_row-1){              //最后一行就不换行了
  13.           old=e.name.substring(start);
  14.         }else{
  15.           old=e.name.substring(start,end)+"\n";
  16.          }
  17.            newStr+=old; //拼接字符串
  18.        }
  19.     }else{ //如果小于每行最多显示的字数就返回原来的字符串
  20.       newStr=e.name;
  21.     }
  22.     return newStr;
  23.   }

  结果为:

  我使用的是echart2,不知道echart3的function(e)中 e 的内容是否一样。无论是条形图或者其他的图,换行的思路都是一样的,都是先获取名称再进行换行处理。

再补充一点:

要想让内容在饼图里并居中除了要处理换行之外,还需要添加如下四个属性:

  1. series:{
  2.     itemstyle:{
  3.       normal:{
  4.         label:{
  5.           position:"inner",       //可选参数:外部 “outer” 和内部 “inner”  
  6.           textStyle:{
  7.             align:"center",
  8.             baseline:"middle",
  9.           },
  10.         },
  11.         lableLine:{
  12.           show:false //标签视觉引导线 不显示
  13.         }
  14.       }
  15.     }
  16.   }

如果想只每行一个字显示:

  1. formatter:function(e){
  2.   return e.split("").join("\n");   //这里的e直接就是字符串,如果不是的话,还需要获取到字符串再进行操作
  3. }

echarts2 饼图处理标签文字过长使之达到指定字数换行的目的的更多相关文章

  1. UILabel标签文字过长时的显示方式

    lineBreakMode:设置标签文字过长时的显示方式. label.lineBreakMode = NSLineBreakByCharWrapping; //以字符为显示单位显示,后面部分省略不显 ...

  2. 关于IOS中safari下的select下拉菜单,文字过长不换行的问题

    今天遇到下图这种问题,文字过长,显示不全.折腾了老半天,在网上搜了半天也找不到解决方案. 于是问了下同事,同事提到了<optgroup>,这个标签厉害. <optgroup> ...

  3. iOS中Safari浏览器select下拉列表文字太长被截断的处理方法

    网页中的select下拉列表,文字太长的话在iOS的Safari浏览器里会被自动截断,显示成下面这种: 安卓版的浏览器则没有这个问题. 如何让下拉列表中的文字在iOS的Safari浏览器里显示完整呢? ...

  4. 使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行

    使用echart的雷达图的时候,如果文字越界的解决办法记录,标签文字自动换行 前几天项目中有一个图表的是用echart生成的,遇到一个问题,就是在手机端显示的售时候,如果文字太长就会超出div,之前的 ...

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

    原文电梯:https://blog.csdn.net/kebi007/article/details/68488694 echarts x轴标签文字过多导致显示不全 如图: 解决办法1:xAxis.a ...

  6. echarts图表X轴文字过长解决解决方案:根据文字长度自动旋转

    Echarts 标签中文本内容太长的时候怎么办 ? 关于这个问题搜索一下,有很多解决方案.无非就是 省略(间隔显示).旋转文字方向.竖排展示 前面两种解决方案,就是echarts暴露的: {   ax ...

  7. iOS设置文字过长时的显示格式

    以label为例: //设置文字过长时的显示格式 aLabel.lineBreakMode = UILineBreakModeMiddleTruncation; //截去中间 aLabel.lineB ...

  8. (转载)最实用的清除浮动代码 css的文字过长裁剪后面跟着省略号

    css: .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;} .clearfloat ...

  9. 关于dl dt dd 文字过长换行在移动端显示对齐的探讨总结

    关于dl  dt dd 文字过长换行在移动端显示对齐的探讨总结 <dl> <dt>抵押房产:</dt> <dd>1.北京市大兴区兴华大街丽园小区3单大兴 ...

随机推荐

  1. mysql执行 sql文件遇到USING BTREE ) ENGINE=MyISAM DEFAULT CHARSET=utf8错误

    使用navcat在导入别人发的mysql数据的时候,报了下面这个错误: [Err] 1064 - You have an error in your SQL syntax; check the man ...

  2. java学习--第50天讲到jquery

    4月4日jquery讲完了. jquery组合选择器 逗号隔开 层级选择器 父元素    子元素,直接子元素和间接子元素,空格隔开. 直接后代选择器: 父元素>子元素    选择的直接子元素 下 ...

  3. Alpha 答辩总结模板

    Alpha 答辩总结模板 每个小组提供一篇总结博客(组内共享,每个人都发布),包含: 本组(组名)所有成员(短学号,名,标注组长)(1分) 组内各成员贡献比例,如不提供,取平均分后组长得分减50% G ...

  4. Scapy的使用

    0.前言 最近现场测试项目时,突如其来需要伪造IGMP报文,骗取交换机相关组播流量,慌忙之下学习了Scapy的使用,以及相关快速学习的方法,在这里分享下. 1.Scapy库安装 github地址:ht ...

  5. Filter(转载)

    web.xml中元素执行的顺序listener->filter->struts拦截器->servlet. 1.过滤器的概念 Java中的Filter 并不是一个标准的Servlet ...

  6. EasyUI treegrid 模糊查询、搜索

    纯JS完成 treegrid 模糊搜索功能: $("#dataTab").treegrid({ url: '/Organization/GetOrganizationList', ...

  7. corosync+pacemaker的crmsh的常用指令介绍

    配置crmsh的yum仓库,此仓库的RPM包有openSUSE提供,将这个network:ha-clustering:Stable.repo文件直接下载到本地并且命名为crmsh.repo wget ...

  8. vue$ref

    vue的$ref方法 可以在元素上template中直接添加ref属性 类似html的id属性 用来做选项卡的切换的

  9. [转帖新闻]Windows 7时代即将终结:曾有多辉煌 如今就有多凄凉

    Windows 7时代即将终结:曾有多辉煌 如今就有多凄凉 投递人 itwriter 发布于 2019-01-18 10:47 评论(4) 有834人阅读 [收藏] « » 文/屠敏 来源:CSDN( ...

  10. 好文章之——PHP系列(一)

    注:最近实习的公司是一家做电商企业,后台主要是php开发,好久不怎么接触php的我看了几篇相关文章,提高下对它的认识与理解,发现里面的学习思路还是非常好的,当然也会重新拾一下基础知识啦! 其实自己心中 ...