1、引入js

<script src="echarts.min.js"></script>

2、js

<div id="main" style="width: 600px;height: 400px;background: #F2F2F2;"></div>
		<script>
			// 繪製圖表。
        echarts.init(document.getElementById('main')).setOption({
        	title: { //標題
		        text: '餅圖'
		    },
		    legend: {},//圖例
        	tooltip: {},//滑鼠hover時提示框工具
            series : [
		        {
		            name: '訪問來源',
		            roseType: 'angle', //南丁格爾玫瑰圖
		            type: 'pie',
		            radius: '55%',
		            label:{//餅圖圖形上所有的文字標籤
		            	show:true,
		            	position:'inside'  //標籤文字所在位置，'outside','inside','center'如圓環
		            },
		            data:[
		                {value:235, name:'視訊廣告',
		                itemStyle:{
		                	color: '#ff6600',
		                },
		                label: { //label和labelLine的樣式也有emphasis狀態。單個文字標籤
		                	show:true,
						    textStyle: {//設定標籤的顏色
						        color: 'blue'
						    }
						},
						labelLine: {
							show:true,
						    lineStyle: {//設定引導線的顏色
						        color: 'green'
						    }
						}
		                
		                },
		                {value:274, name:'聯盟廣告'},
		                {value:310, name:'郵件營銷'},
		                {value:335, name:'直接訪問'},
		                {value:400, name:'搜尋引擎'}
		            ],
		            itemStyle: { //設定樣式
		            	shadowBlur: 200,
		            	shadowColor: 'rgba(255, 255, 255, 0.5)',
					    emphasis: { //滑鼠hover時高亮樣式
					        shadowBlur: 200,
					        shadowColor: 'rgba(0, 0, 0, 0.5)'
					    }
					}
		        }
		    ]
        });
		</script>