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直接就是字符串，如果不是的話，還需要獲取到字符串再進行操作
}