echarts饼图

 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>