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

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



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

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



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



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

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

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

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

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

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

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

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

　　结果为：



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

再补充一点：



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

series:{
　　　　itemstyle:{
　　　　　　normal:{
　　　　　　　　label:{
　　　　　　　　　　position:"inner",　　　　　　　//可选参数：外部 “outer” 和内部 “inner”　　
　　　　　　　　　　textStyle:{
　　　　　　　　　　　　align:"center",
　　　　　　　　　　　　baseline:"middle",
　　　　　　　　　　},
　　　　　　　　},
　　　　　　　　lableLine:{
　　　　　　　　　　show:false                           //标签视觉引导线 不显示
　　　　　　　　}
　　　　　　}
　　　　}
　　}

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

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