<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	
	
  </head>
  
  <body>
     <div id="main" style="width: 100%;height:100%;margin-top: 10%;"></div>
  </body>
		<script src="js/echarts.common.min.js"></script>
       <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
		var	option = {
					    tooltip: {
					        trigger: 'item',
					        formatter: "{a} <br/>{b}: {c} ({d}%)"
					    },
					    legend: {
					                orient: 'vertical',
							        bottom: '10px',
							        itemHeight: 18,
							        textStyle: {
							            color: '#333',
							            fontStyle: 'normal',
							            fontWeight: 'normal',
							            fontFamily: '微软雅黑',
							            fontSize: 14,
							        },
							        formatter: function(name) {
							        	alert("ada");
							            var oa = option.series[0].data;
							            var num = 0;
							
							            for (var i = 0; i < option.series[0].data.length; i++) {
							                num += parseFloat(oa[i].value);
							            };
							            for (var i = 0; i < option.series[0].data.length; i++) {
							                if (name == oa[i].name) {
							                    return name + '  ' + (parseFloat(oa[i].value) / num * 100).toFixed(2) + '%';
							                }
							            }
							        },
							        selectedMode: false,
					        data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎'],
					  
					    },
					    series: [
					        {
					            name:'访问来源',
					            type:'pie',
					            radius: ['30%', '60%'],
					            avoidLabelOverlap: false,
					            label: {
					                normal: {
					                    show: false,
					                    position: 'center'
					                },
					                emphasis: {
					                    show: false,
					                    textStyle: {
					                        fontSize: '30',
					                        fontWeight: 'bold'
					                    }
					                }
					            },
					            labelLine: {
					                normal: {
					                    show: false
					                }
					            },
					            data:[
					                {value:335, name:'直接访问'},
					                {value:310, name:'邮件营销'},
					                {value:234, name:'联盟广告'},
					                {value:135, name:'视频广告'},
					                {value:1548, name:'搜索引擎'}
					            ]
					        }
					    ]
					};
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
    </script>

</html>
