技術積累系列(四)------echarts處理餅圖名稱過長自定義formatter換行處理

（1）引入官方的js資源

（2）界面上可以放一個空的div

  <div class="chart" id="zdxm" >   </div>

js如下

function zdxmpie(){
            	var myChart = echarts.init(document.getElementById('zdxm'));
        		var option = {
        				 title : {
        				        x: '43%',
        						y: '42%',
        						textStyle: {
        							fontFamily: 'sans-serif',
        							fontSize: 22,
        							fontStyle: 'normal',
        							fontWeight: 'bold',
        							},
        						subtextStyle: {
        							color:'black',
        							fontFamily: 'sans-serif',
        							fontSize: 20,
        							fontStyle: 'normal',
        							fontWeight: 'normal',
        							},
        				    },
        				color : [ '#f66900', '#6fc8d0', '#648ca6', '#e9bb27', '#56be8b' ],
        				tooltip : {
        					show: true,
        					trigger: 'item',
        				   formatter: "{a} <br/>{b} : {c}"
        				},
        				calculable : false,
        				series : [
        				          {
        				              name:'重點項目',
        				              type:'pie',
        				              radius : ['62%', '82%'],//控制內外徑
        				              center: ['50%', '58%'],//控制內外徑
        				              itemStyle : {
        				                  normal : {
        				                      label : {//隱藏標示文字
        				                          show : true,
        				                          position: 'top',
        											formatter: get,//自定義方法
        											 textStyle: {
        												 fontFamily: 'Verdana',
        													fontSize: 12,
        													fontStyle: 'oblique',
        													fontWeight: 'normal',
        													color: "#cac8cb",
        											 }      // 默認使用全局文本樣式，詳見TEXTSTYLE
        				                      },
        				                      labelLine:{ 
        				                    	  lineStyle: {
        				                              color: "#cac8cb"  // 改變標示線的顏色
        				                           }
     				                    	},
        				                  }
        				              },
        				              data:[
        				              ]
        				          }
        				      ]
        			};
					
	        		$.ajax({ 
	        			url:'/zdxmpie.do',
	        			type:'GET',
	        			async : false, //同步執行 
	        			dataType:'json',
	        			success: function(data) {
	        				var flag = data.o_Ret;
	        				if(flag>0){	
	        				 	var result = data.data;	
	        				 	var len=result.length;
	        				 	if(len>0){
	        				 		option.title.text = '   '+result[len-1].num;
	        				 		option.title.subtext = '所有項目';
	                       	  		for (var i = 0; i < len-1; i++) {
	                       	  			option.series[0].data.push({value:result[i].num, name:result[i].name});
								  	}
	        				 	}
	        				} 
	        			}
	        		});     
	        		myChart.setOption(option);
            };
           var get=function(e){
			　　　　        var newStr=" ";
			                var newStr2=" ";
							var start,end;
					　　　　var name_len=e.name.length;    　　　　　　　　　　　　   //每個內容名稱的長度
					　　　　var max_name=8;    　　　　　　　　　　　　　　　　　　//每行最多顯示的字數，超過八個字換行處理
					　　　　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; 
					　　　  }
					          newStr2+=e.percent+"%"+newStr;//添加百分號處理
						　　　 return newStr2;
				　　}

效果如下,每行最多顯示的字數，超過八個字換行處理，主要代碼自定義的get部分處理formatter