<%@ page pageEncoding="UTF-8" contentType="text/html;charset=UTF-8"%>
<%
	//清除缓存
	response.setHeader("Pragma","No-cache"); 
	response.setHeader("Cache-Control","no-cache"); 
	response.setDateHeader("Expires", 0);
	String ctx = request.getContextPath();
	if ("/".equals(ctx)) {
	    ctx = "";
	}
	request.setAttribute("ctx", ctx);
%>
<div id="main" style="width: 1000px;height: 600px;border: 1px solid red;"></div>
<script src="${ctx }/scripts/common/jquery-1.11.1.min.js" type="text/javascript"></script>
<script src="${ctx}/scripts/plugin/echarts3.1.10/echarts.min.js"></script>
<script src="../js/echarts-liquidfill.min.js" type="text/javascript"></script>
<script>
	$(function(){
		var myChart = echarts.init(document.getElementById('main'));
        var option = {
    		color : [
   		        '#4096ee',
   		        '#3fcf91',
   		     	'#f58d30'
   		    ],
   		    tooltip : {
   		        trigger: 'item',
   		        formatter: "{a} <br/>{b} : {c}%"
   		    },
   		    legend: {
   		        data : ['总办件','正常办件','超期办件'],
   		     	x:"left"
   		    },
   		    series : [
   		        {
   		            name:'正常办件',
   		            type:'gauge',
   		            center: ['25%','55%'],
   		            splitNumber: 10,       // 分割段数，默认为5
   		            axisLine: {            // 坐标轴线
   		                lineStyle: {       // 属性lineStyle控制线条样式
   		                    color: [[0.2, '#ff4500'],[0.8, '#48b'],[1, '#228b22']], 
   		                    width: 8
   		                }
   		            },
   		            axisTick: {            // 坐标轴小标记
   		                splitNumber: 10,   // 每份split细分多少段
   		                length :12,        // 属性length控制线长
   		                lineStyle: {       // 属性lineStyle控制线条样式
   		                    color: 'auto'
   		                }
   		            },
   		            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
   		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
   		                    color: 'auto'
   		                }
   		            },
   		            splitLine: {           // 分隔线
   		                show: true,        // 默认显示，属性show控制显示与否
   		                length :30,         // 属性length控制线长
   		                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
   		                    color: 'auto'
   		                }
   		            },
   		            pointer : {
   		                width : 5
   		            },
   		            title : {
   		                show : true,
   		                offsetCenter: [0, '-40%'],       // x, y，单位px
   		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
   		                    fontWeight: 'bolder'
   		                }
   		            },
   		            detail : {
   		                formatter:'{value}%',
   		                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
   		                    color: 'auto',
   		                    fontWeight: 'bolder'
   		                }
   		            },
   		            data:[{value: (Math.random() * 100).toFixed(2) - 0, name: '完成率'}]
   		        },
   		        {
   		            name:'项目监控',
   		            type:'funnel',
   		            width: '30%',
   		            x:"55%",
   		            data:[
   		                {value:100, name:'总办件'},
   		                {value:(Math.random() * 100).toFixed(2) - 0, name:'正常办件'},
   		                {value:(Math.random() * 100).toFixed(2) - 0, name:'超期办件'}
   		            ]
   		        }
   		    ]
   		};
		myChart.setOption(option,true);
	});
</script>