先上效果圖：

1.首先去官網下載echarts.min.js，並引入專案 2.為 ECharts 準備一個具備大小（寬高）的 容器

var myChart = echarts.init(document.getElementById('main'));
       option = {
    		    title: {//標題元件
                   textStyle: {    
                   color: "#333333",    
                   fontSize: 12,   
                   }
                },
    		    tooltip: {
    		        trigger: 'item',
    		        formatter: "{a} <br/>{b}: {c} ({d}%)",
    		        textStyle:{    //圖例文字的樣式
                        color:'#fff',  //文字顏色
                        fontSize:10    //文字大小
                    }
    		    },
    		    graphic:[		       	       
    		         {
    		      		type: 'text',              
    		      		top: '40%',           
    		      		left: 'center',          
    		      		style: {
    		      		   text: '10000.00',      
    		      		   fill: '#333333',       
    		      		   fontSize: 20,          
    		      		   fontWeight: 'normal'
    		      		}  		      		        
    		      	},{
    		      		type: 'text',              
    		      		top: '53%',           
    		      		left: 'center',          
    		      		style: {
    		      		   text: '實發工資',      
    		      		   fill: '#A6A8B6',       
    		      		   fontSize: 12,          
    		      		   fontWeight: 'normal'
    		      		}  		      		        
    		      	},      
    		    ],
    		    //圓環的顏色
    		    color:['#48cda6','#fd87fb','#11abff','#ffdf6f','#968ade'],
    		    // 圖例
    		    legend: {
    		    	// 圖例選擇的模式，控制是否可以通過點選圖例改變系列的顯示狀態。預設開啟圖例選擇，可以設成 false 關閉。
    		    	selectedMode: true, 
    		        /* orient: 'vertical', */
    		       /*  x : 'right',   //圖例顯示在右邊
                    y: 'center',  */  //圖例在垂直方向上面顯示居中
                    bottom:0,
                    itemWidth:10,  //圖例標記的圖形寬度
                    itemHeight:10, //圖例標記的圖形高度
    		        data:['基本工資','福利獎金','出差補貼','交補話補','崗位工資'],
    		        textStyle:{    //圖例文字的樣式
                        color:'#A6A8B6',  //文字顏色
                        fontSize:10    //文字大小
                    }
    		    },   		  
    		    series: [
    		        {
    		            name:'工資佔比圖',//代表a的值，系列名稱
    		            type:'pie',
    		            center:['50%','45%'], //餅圖的中心（圓心）座標，陣列的第一項是橫座標，第二項是縱座標。
    		            radius: ['45%', '60%'],//餅圖的半徑，陣列的第一項是內半徑，第二項是外半徑。[ default: [0, '75%'] ]
    		            avoidLabelOverlap: false,
    		           /*  animation: false, */  //是否禁用動畫效果
    		            label: {
    		                normal: {
    		                    show: true,//是否顯示標籤
    		                    //// 標籤的位置。'outside'餅圖扇區外側，通過視覺引導線連到相應的扇區。'inside','inner' 同 'inside',餅圖扇區內部。'center'在餅圖中心位置。
    		                    position: 'left',
    		                    //顯示的標籤的內容
    		                    //a（系列名稱），b（資料項名稱），c（數值）, d（百分比）
    		                    formatter: "{a},{b}:{c}（{d}%）",   ![在這裡插入圖片描述](https://img-blog.csdn.net/2018101313580390?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5MzI3NDE4/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70)
   		                    
    		                },
    		                emphasis: {
    		                	//滑鼠放在圓環上顯示的標籤樣式
    		                    show: true,
    		                    textStyle: {
    		                        fontSize: '12',
    		                        fontWeight: 'bold'
    		                    }
    		                }
    		            },
    		            labelLine: {
    		                normal: {
    		                    show: true,//是否顯示引導線
  	               		        length:10,  //百分比引導線
  	               		        length2:20    //視覺引導項第二段的長度。
    		                }
    		            },
    		            itemStyle: {
                            normal: {
                                borderColor: "#FFFFFF", 
                                borderWidth: 1, 
                                label:{  
                                    show:true,  
                                    formatter:'{d}%'  
                                },  
                            }
                        },
                        // 系列中的資料內容陣列。
    		            data:[
    		                {value:8000, name:'基本工資'},
    		                {value:100, name:'福利獎金'},
    		                {value:600, name:'出差補貼'},
    		                {value:200, name:'交補話補'},
    		                {value:1100, name:'崗位工資'}
    		            ]
    		        }
    		    ]
    		};
       myChart.setOption(option);