skyversation
/
meidu2021


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326
							<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@include file="/context/mytags.jsp"%>
	<t:base type="jquery,easyui,tools,DatePicker"></t:base>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<!-- 引入echarts文件 -->
<script src="plug-in/echarts/echarts.js"></script>
<%-- <script src="plug-in/jquery-1.7.2.js"></script> --%>
</head>
<body>
	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
		<div class="btndiv">
	<div id="downBtn" style="display: none;">
		<span
			style="display: -moz-inline-box; display: inline-block; float: right;">
			<a href="#" class="easyui-linkbutton l-btn" iconcls="icon-return"
			onclick="goBefore()" id="back"> <span>返回</span>
		</a>
		</span>
	</div>
	<div id="downBtn2" style="display: none;">
		<span
			style="display: -moz-inline-box; display: inline-block; float: right;">
			<a href="#" class="easyui-linkbutton l-btn" iconcls="icon-return"
			onclick="goBefore2()" id="back2"> <span>返回</span>
		</a>
		</span>
	</div>
	</div>
	<div id="main" style="width: 90%; height: 60%;"></div>
	<div id="chart2" style="width: 90%; height: 100%;" style="display: none;"></div>
	<div id="chart3" style="width: 90%; height: 60%;" style="display: none;"></div>
	
	<script type="text/javascript">
		// alert("1.准备初始化echarts实例");
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(document.getElementById('main'));
		var myChart2 = echarts.init(document.getElementById('chart2'));
		var myChart3 = echarts.init(document.getElementById('chart3'));

		
		var option = {
			    title : {
			        text: '职能部门完成情况统计表',
			        subtext: '技术支持：上海鼎善信息科技有限公司',
			        x: 'center'
			    },
			    tooltip: {
			        trigger: 'item',
			        formatter: "{a} <br/>{b}: {c} ({d}%)"
			    },
			    legend: {
			        orient: 'vertical',
			        x: 'left',
			        data:['未执行','执行中','已完成','已关闭','已评价']
			    },
			    series: [
			        {
			            name:'工作完成情况',
			            type:'pie',
			            selectedMode: 'single',
			            radius: [0, '30%'],

			            label: {
			                normal: {
			                    position: 'inner'
			                }
			            },
			            labelLine: {
			                normal: {
			                    show: false
			                }
			            },
			            data:[
			                {value:36, name:'未完成', selected:true},
			                {value:74, name:'已完成'},
			                {value:78, name:'已评价'}
			            ]
			        },
			        {
			            name:'工作完成情况',
			            type:'pie',
			            radius: ['40%', '55%'],
			            label: {
			                normal: {
			                    formatter: '{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ',
			                    backgroundColor: '#eee',
			                    borderColor: '#aaa',
			                    borderWidth: 1,
			                    borderRadius: 4,
			                    // shadowBlur:3,
			                    // shadowOffsetX: 2,
			                    // shadowOffsetY: 2,
			                    // shadowColor: '#999',
			                    // padding: [0, 7],
			                    rich: {
			                        a: {
			                            color: '#999',
			                            lineHeight: 22,
			                            align: 'center'
			                        },
			                        // abg: {
			                        //     backgroundColor: '#333',
			                        //     width: '100%',
			                        //     align: 'right',
			                        //     height: 22,
			                        //     borderRadius: [4, 4, 0, 0]
			                        // },
			                        hr: {
			                            borderColor: '#aaa',
			                            width: '100%',
			                            borderWidth: 0.5,
			                            height: 0
			                        },
			                        b: {
			                            fontSize: 16,
			                            lineHeight: 33
			                        },
			                        per: {
			                            color: '#eee',
			                            backgroundColor: '#334455',
			                            padding: [2, 4],
			                            borderRadius: 2
			                        }
			                    }
			                }
			            },
			            data:[
			                {value:12, name:'未执行'},
			                {value:24, name:'执行中'},
			                {value:58, name:'已完成'},
			                {value:16, name:'已关闭'},
			                {value:78, name:'已评价'}
			            ]
			        }
			    ]
			};
			                    
		myChart.setOption(option);
		myChart.on('click', function (params) {
			console.log(params);
			/* $("#main").css("display","none"); */
			$("#main").hide();
			$("#chart2").show();
			$("#downBtn").show();
			/* $("#downBtn").show();
			$("#searchColums").hide();
			$("#downcharhead").show();
			$("#upcharhead").hide();
			$("#upcharhead2").show();
			$("#yearspan2").html($("#curYear").val());
			$("#downBtn2").hide(); */
			initDownCharDate();

		})
		myChart2.on('click', function (params) {
			console.log(params);
			/* $("#main").css("display","none"); */
			$("#main").hide();
			$("#chart2").hide();
			$("#chart3").show();
			$("#downBtn").hide();
			$("#downBtn2").show();
			/* $("#downBtn").show();
			$("#searchColums").hide();
			$("#downcharhead").show();
			$("#upcharhead").hide();
			$("#upcharhead2").show();
			$("#yearspan2").html($("#curYear").val());
			$("#downBtn2").hide(); */
			initDownCharDate3();

		})
		function goBefore(){
			$("#chart2").hide();
			$("#main").show();
			$("#downBtn").hide();
			
			myChart.resize();
		}
		
		function goBefore2(){
			$("#chart3").hide();
			$("#chart2").show();
			$("#downBtn2").hide();
			$("#downBtn").show();
			myChart2.resize();
		}
		// 相当于 document.ready，{代码}
		$(function() {
			//alert("3.页面加载完毕");
		})

function  initDownCharDate(){
	
		myChart2.clear();
			var option2 ={
				    title : {
						text : '职能部门工作完成情况统计表-已完成工作统计',
						subtext : '技术支持：上海鼎善信息科技有限公司',
						x : 'left'
					},
				    tooltip : {
				        trigger: 'axis',
				        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
				            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
				        }
				    },
				    legend: {
				        data: ['已完成', '已关闭'],
				        x: 'right',
				    },
				    grid: {
				        left: '3%',
				        right: '4%',
				        bottom: '10%',
				        containLabel: true
				    },
				    xAxis:  {
				        type: 'value'
				    },
				    yAxis: {
				        type: 'category',
				        data: ['行政部','总经办','人事部','市场部','财务部','运营部','信息部']
				    },
				    series: [
				        {
				            name: '已完成',
				            type: 'bar',
				            stack: '总量',
				            label: {
				                normal: {
				                    show: true,
				                    position: 'insideRight'
				                }
				            },
				            data: [24, 52,34,42, 12, 21, 12 ]
				        },
				        {
				            name: '已关闭',
				            type: 'bar',
				            stack: '总量',
				            label: {
				                normal: {
				                    show: true,
				                    position: 'insideRight'
				                }
				            },
				            data: [2, 1, 0, 3, 2, 5, 2]
				        }
				    ]
				};

			myChart2.setOption(option2);
			myChart2.resize();
		}
		
		function  initDownCharDate3(){
			
			myChart3.clear();
				var option3 ={
					    title : {
							text : '信息部工作完成情况统计表-已完成工作统计',
							subtext : '技术支持：上海鼎善信息科技有限公司',
							x : 'left'
						},
					    tooltip : {
					        trigger: 'axis',
					        axisPointer : {            // 坐标轴指示器，坐标轴触发有效
					            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
					        }
					    },
					    legend: {
					        data: ['已完成', '已关闭'],
					        x: 'right',
					    },
					    grid: {
					        left: '3%',
					        right: '4%',
					        bottom: '10%',
					        containLabel: true
					    },
					    xAxis:  {
					        type: 'value'
					    },
					    yAxis: {
					        type: 'category',
					        data: ['邓超','孙俪','杨颖','周迅','鹿晗']
					    },
					    series: [
					        {
					            name: '已完成',
					            type: 'bar',
					            stack: '总量',
					            label: {
					                normal: {
					                    show: true,
					                    position: 'insideRight'
					                }
					            },
					            data: [5, 3, 2, 1, 1 ]
					        },
					        {
					            name: '已关闭',
					            type: 'bar',
					            stack: '总量',
					            label: {
					                normal: {
					                    show: true,
					                    position: 'insideRight'
					                }
					            },
					            data: [ 1, 0, 1, 0, 0]
					        }
					    ]
					};

				myChart3.setOption(option3);
				myChart3.resize();
			}
	</script>
</body>
</html>