<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<jsp:include page="../header.jsp"></jsp:include>
<script type="text/javascript" src="${pageContext.request.contextPath}/jwapp/pages/portlet/js/jwAppPortletModule.js" charset="utf-8"></script>
<div class="index_container_two_left_echarts_container">
	<div><span>各部门每天办件率情况图表.</span><a href="javascript:void(0)">查看更多</a></div>
	<div id="index_content_echartsContainer" style="width:100%;height:314px;"></div>
</div>
<script>
$(function(){
	init_index_echarts();
})
	
//初始化echarts
function init_index_echarts(){
	var myChart = echarts.init(document.getElementById('index_content_echartsContainer'));

	$.get(ctx+'/echarts.json').done(function (data) {
		
		//处理后台接受的数据
		var data = JSON.parse(data);
		for(var i = 0 ;i <data.data.length;i++){
			data.data[i].label={
					"normal": {
	                    "show": "true",
	                    "position": "top"
	                }
			}
			if(data.data[i].type=='line'){
				data.data[i].yAxisIndex=1;
			}
		}
		
		myChart.setOption({
		    tooltip: {
		        trigger: 'axis',
		        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
		            type : 'line'        // 默认为直线，可选为：'line' | 'shadow'
		        }
		    },
		    legend:{
		        data:(function(){
		        	var arr1=[];
		        	for(var i = 0 ; i<data.data.length; i++){
		        		arr1.push(data.data[i].name);
		        	}
		        	return arr1;
		        })(),
		        left : 'center',
		        y : '34px'
		    },
		    grid: {
		        left: '0',
		        right: '0%',
		        //right: '12%',
		        bottom: '12%',
		        top:'100px',
		        containLabel: true
		    },
		    color : ['#C23630','#6AAEEE','#FEAA0B','black'], //调色盘颜色列表。如果系列没有设置颜色，则会依次循环从该列表中取颜色作为系列颜色。
		    toolbox: {
		    	showDelay : 0,			   // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
		    	borderColor: '#ccc',       // 工具箱边框颜色
		    	borderWidth: 1,            // 工具箱边框线宽，单位px，默认为0（无边框）
		    	padding: [5,20],           // 工具箱内边距，单位px，默认各方向内边距为5，
		    	show : true,
		    	itemGap:15,
		        feature : {
		        	mark : {show: true},
		            //magicType : {show: true, type: ['line', 'bar', 'stack', 'tiled']},
		        	magicType : {show: true, type: ['line', 'bar']},
		            restore : {show: true},
		            saveAsImage : {show: true}
		            /*myTool1: {
		                show: true,
		                title: '自定义扩展方法1',
		                icon: 'path://M432.45,595.444c0,2.177-4.661,6.82-11.305,6.82c-6.475,0-11.306-4.567-11.306-6.82s4.852-6.812,11.306-6.812C427.841,588.632,432.452,593.191,432.45,595.444L432.45,595.444z M421.155,589.876c-3.009,0-5.448,2.495-5.448,5.572s2.439,5.572,5.448,5.572c3.01,0,5.449-2.495,5.449-5.572C426.604,592.371,424.165,589.876,421.155,589.876L421.155,589.876z M421.146,591.891c-1.916,0-3.47,1.589-3.47,3.549c0,1.959,1.554,3.548,3.47,3.548s3.469-1.589,3.469-3.548C424.614,593.479,423.062,591.891,421.146,591.891L421.146,591.891zM421.146,591.891',
		                onclick: function (){
		                    alert('myToolHandler1')
		                }
		            }*/
		        },
		        right:'10px',
		        top:'30px'
		    },
		    xAxis: {
		        type: 'category',
		        boundaryGap: true,
		        data: ['周一','周二','周三','周四','周五','周六','周日']
		    },
		    dataZoom: [{
		        type: 'inside',
		        start: 0,                                  
		        end: 50,
		        zoomLock:true  //如果设置为 true 则锁定选择区域的大小，也就是说，只能平移，不能缩放。
		    }, {
		        type: 'slider',
		        backgroundColor:'rgba(47,69,84,0)',  //组件的背景颜色  
		        fillerColor:"rgba(167,183,204,0.4)",  //选中范围的填充颜色。
		        borderColor:"#ddd",                     //边框颜色。
		        height:25
		    }],
		    yAxis: [{
		    	type: 'value',
	            name: '数量',
	            min: 0,
	            max:100,
	            interval:20,
	            axisLabel: {
	                formatter: '{value}件'
	            }
		    },{
		    	type: 'value',
	            name: '总数 ',
	            min: 0,
	            max: 150,
	            interval:30,
	            axisLabel: {
	                formatter: '{value} 件'
	            }
		    }],
		    series:(function(){
	    		var arr=[];
	    		for(var i = 0 ; i< data.data.length ; i++){
	    			arr.push(data.data[i]);
	    		}
	    		return arr;
   		   })()
		})
	})
}


</script>