projects
/
gdymtsceshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338
							<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<LINK rel="Bookmark" href="/favicon.ico" >
<LINK rel="Shortcut Icon" href="/favicon.ico" />
<script type="text/javascript">
var ctx="${ctx}";
</script>
<!--[if lt IE 9]>
<script type="text/javascript" src="${ctx}/assets/lib/html5.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/respond.min.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/PIE_IE678.js"></script>
<![endif]-->

<link  rel="stylesheet" href="${ctx}/assets/lib/bootstrap-3.3.7/css/bootstrap.min.css">
<link  rel="stylesheet" href="${ctx}/assets/lib/bootstrap-upload/css/default.css">
<link  rel="stylesheet" href="${ctx}/assets/lib/bootstrap-upload/css/fileinput.css">

<script type="text/javascript" src="${ctx}/assets/lib/jquery/1.9.1/jquery.min.js"></script> 
<script type="text/javascript" src="${ctx}/assets/lib/jquery.form/jquery.form.min.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/layer/3.0.3/layer.js"></script> 
<script type="text/javascript" src="${ctx}/assets/lib/My97DatePicker/WdatePicker.js"></script>  
<script type="text/javascript" src="${ctx}/assets/lib/bootstrap-upload/js/fileinput.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/bootstrap-upload/js/locales/zh.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/bootstrap-3.3.7/js/bootstrap.min.js"></script>

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="${ctx}/assets/lib/ueditor/1.4.3/third-party/highcharts/highcharts.js"></script>  
<script type="text/javascript" src="${ctx}/assets/lib/ueditor/1.4.3/third-party/highcharts/modules/exporting.js"></script> 
<script type="text/javascript" src="${ctx}/assets/lib/ueditor/1.4.3/third-party/highcharts/highcharts-zh_CN.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/layer/3.0.3/layer.js"></script>
<script type="text/javascript" src="${ctx}/assets/lib/ueditor/1.4.3/third-party/highcharts/sand-signika.js"></script> 

<script type="text/javascript" src="${ctx}/assets/js/base.js"></script>
 

<style type="text/css">
.margintop{margin-bottom:5px;}
.placeholder{height:14px;}
</style>


<!--/请在上方写此页面业务相关的脚本-->


<title>柱状图/折线图显示</title>
<meta name="keywords" content="">
<meta name="description" content="">
</head>
<body style="line-height:1;">
 <div align="left" style="height: 10px; margin: 2% 0 2% 2%">
		<select style="width: 80px" id="retType">
			<option value="1">柱状图</option>
			<option value="2">折线图</option>
		</select>
	</div>
	<div id="container" align="center"
		style="height: 520px; margin: 0 4% 2% 2%"></div>
	
	 <script>
        //调用查询，加载数据  定义全局变量
         
        var strAppealBeginDate='${AppealDateBegin}';
        var strAppealEndDate='${AppealDateEnd}';
        var strValidState='${ValidState}';
        var strTitle='${ReportType}';
        
        //定义一个索引，便于加载完成后关闭加载动画
        var index = "";
        //默认加载柱状图
        $(function(){
        	getColimn();
        });
        
        //图形切换
         $("#retType").change(function(){
        	 var retType =  $("#retType").val();
        	 if(retType == 1){
        		 getColimn();
        	 }else{
        		 getLine();
        	 }
         });     
         
         //折线图
         function getLine(){
        	var chart1; 
         	var options = {
        			 chart: {
                         renderTo: 'container', //在哪个区域呈现，对应HTML中的一个元素ID
                         type: 'line',
                         plotBackgroundColor: "white",//设置绘图区背景色
                         plotBorderWidth: null,//设置绘图区高度
                         plotShadow: false//是否设置阴影            
                     },
                     
                     //图表的主标题
                     title: {
                     	text: '${StartDate}${ReportName}折线图',
                         style:{
                       	  color: "#000000",
                       	  fontSize: "20px",
                       	  fontFamily: "宋体"
                         }
                     },
                     credits: {
                         enabled: false
                     },
                     xAxis: {
                         categories: [
                             '一月',
                             '二月',
                             '三月',
                             '四月',
                             '五月',
                             '六月',
                             '七月',
                             '八月',  
                             '九月',
                             '十月',
                             '十一月',
                             '十二月'
                         ],
                         crosshair: true
                     },
                     yAxis: {
                         min: 0,
                         title: {
                             text: '数量 (件)'
                         }
                     },
                     tooltip: {
                     	 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                          pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                          '<td style="padding:0"><b>{point.y} 件</b></td></tr>',
                          footerFormat: '</table>',
                          shared: true,
                          useHTML: true
                     },
                     //每种图表类型属性设置
                     plotOptions: {
                     line: {
                         dataLabels: {
                         	// 开启数据标签
                             enabled: true          
                         },
                      
                     }
                 },
                     //数据来源(多个对比的)        
                           series: [] 
                          };
        	 
            $.ajax({
    			type: "post",
    			//同步调用，不显示默认为异步
    			async: false,
    			url: "${ctx}/myconsole/complaint/report/gettransact1?AppealDateBegin="+strAppealBeginDate+"&AppealDateEnd="+strAppealEndDate+"&ValidState="+strValidState+"&ReportType="+strTitle,
    			cache: false,
    			dataType:"json",
    			 //弹出加载动画
                beforeSend: function () {
                	  index = layer.msg('加载中...', {
      		       	  icon: 16 ,shade: 0.05,
      		       	  
      		       	});
                },
                
                success:function(data){
                	 var i,len=data.length;
                	 options.series = new Array();
                     for( i=0;i<len;i++){
                       //赋值 series
                       var strData = data[i].data;
                       var dataArr = [];
                       //遍历数组将字符串转为int
                       for(var k in strData){
                    	   dataArr.push(parseInt(strData[k]));
                       }
                       //折线图填充数据
                       options.series[i] = new Object();
                       options.series[i].data = dataArr;
                       options.series[i].name = data[i].name;
                       
                   }    
                 chart1 = new Highcharts.Chart(options); 
                },
                error:function(e){
                    alert(请求数据错误);
                },
               
                //关闭加载动画
                complete: function () {
                	setTimeout("layer.close("+index+")", 1000 );
                },
                
            });
        	 
         }
         
                //柱状图
               function getColimn(){
            	var chart; 	
            	var options1 = {
            			 chart: {
                             renderTo: 'container', //在哪个区域呈现，对应HTML中的一个元素ID
                             type: 'column',
                             plotBackgroundColor: "white",//设置绘图区背景色
                             plotBorderWidth: null,//设置绘图区高度
                             plotShadow: false//是否设置阴影            
                         },
                         
                         //图表的主标题
                         title: {
                         	text: '${StartDate}${ReportName}柱状图',
                             style:{
                           	  color: "#000000",
                           	  fontSize: "20px",
                           	  fontFamily: "宋体"
                             }
                         },
                         credits: {
                             enabled: false
                         },
                         xAxis: {
                             categories: [
                                 '一月',
                                 '二月',
                                 '三月',
                                 '四月',
                                 '五月',
                                 '六月',
                                 '七月',
                                 '八月',  
                                 '九月',
                                 '十月',
                                 '十一月',
                                 '十二月'
                             ],
                             crosshair: true
                         },
                         yAxis: {
                             min: 0,
                             title: {
                                 text: '数量 (件)'
                             }
                         },
                         //当鼠标经过时的提示设置
                         tooltip: {
                         	 headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
                              pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
                              '<td style="padding:0"><b>{point.y} 件</b></td></tr>',
                              footerFormat: '</table>',
                              shared: true,
                              useHTML: true
                         },
                         //每种图表类型属性设置
                         plotOptions: {
                         	column: {
                                 pointPadding: 0.2,
                                 borderWidth: 1,
                                 dataLabels:{
                                     enabled:true, // dataLabels设为true
                                     /* style:{
                                         color:'#D7DEE9'
                                     } */
                                 }
                             }
                         
                         },
                          
                         //数据来源(多个对比的)        
                               series: [] 
                              };
            	 
        	
            $.ajax({
    			type: "post",
    			//同步调用，不显示默认为异步
    			async: false,
    			url: "${ctx}/myconsole/complaint/report/gettransact1?AppealDateBegin="+strAppealBeginDate+"&AppealDateEnd="+strAppealEndDate+"&ValidState="+strValidState+"&ReportType="+strTitle,
    			cache: false,
    			dataType:"json",
    			 //弹出加载动画
                beforeSend: function () {
                	  index = layer.msg('加载中...', {
      		       	  icon: 16 ,shade: 0.05,
      		       	  
      		       	});
                },
                
                success:function(data){
                	 var i,len=data.length;
                	 options1.series = new Array();
                     for( i=0;i<len;i++){
                       //赋值 series
                       var strData = data[i].data;
                       var dataArr = [];
                       
                       //遍历数组将字符串转为int
                       for(var k in strData){
                    	   dataArr.push(parseInt(strData[k]));
                       }
                       //柱状图填充数据
                       options1.series[i] = new Object();
                       options1.series[i].data = dataArr;
                       options1.series[i].name = data[i].name;
                       
                   }
                 chart = new Highcharts.Chart(options1); 
                },
                error:function(e){
                    alert("请求数据错误");
                },
               
                //关闭加载动画
                complete: function () {
                	setTimeout("layer.close("+index+")", 1000 );
                },
                
            });
            
              
              }   
               
               
        </script>

</body>

</html>