projects
/
gdymtsceshi


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232
							<!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 id="container1" style="width:0px;height:420px;margin-top: 8%;margin-left: 2.5%;float: left;"></div>
 <div id="container" style="width:0px;height:420px;margin-top: 8%;margin-left: 50%;float: left;"></div>
  <script>
        
        $(function(){
        	selectData();
        });
        
        //获取后台数据
        function selectData(){
        	//定义数据用于接收数据
            var arr = [];
            var arr1 = [];
        	//调用查询，加载数据
            var strAppealBeginDate='${AppealDateBegin}';
            var strAppealEndDate='${AppealDateEnd}';
            var strValidState='${ValidState}';
            var strTitle='${ReportType}';
            
            //定义一个索引，便于加载完成后关闭加载动画
            var index = "";
            $.ajax({
    			type: "post",
    			//同步调用，不显示默认为异步
    			async: false,
    			url: "${ctx}/myconsole/complaint/report/gettransact?AppealDateBegin="+strAppealBeginDate+"&AppealDateEnd="+strAppealEndDate+"&ValidState="+strValidState+"&ReportType="+strTitle,
    			dataType:"json",
    			 //弹出加载动画
                beforeSend: function () {
                	  index = layer.msg('加载中...', {
      		       	  icon: 16 ,shade: 0.05
      		       	  
      		       	});
                },
                
    			success: function(dataSource){
    				var data =  dataSource.data;
    				var data1 = dataSource.data1;
                    //定义一个数组 ,迭代，把异步获取的数据放到数组中  当前月份数据
                    for(var i=0;i<data.length;i++){  
                    	for(var key in data[i]){
                    		arr.push({"name":key,"y":parseInt(data[i][key])});
                    	}	
                    }
                   //定义一个数组 ,迭代，把异步获取的数据放到数组中 1月份到当前月份数据
                     for(var i=0;i<data1.length;i++){  
                    	for(var key in data1[i]){
                    		arr1.push({"name":key,"y":parseInt(data1[i][key])});
                    	}	
                    }  
                    //当前月份报表
                    GetData(arr);
                    //一月份到当前月份报表
                    GetData1(arr1);
                },
               
                //关闭加载动画
                complete: function () {
                	setTimeout("layer.close("+index+")", 1000 );
                },
                
            });
            
        }; 
        
            
            function  GetData(arr){
                $('#container1').highcharts({
                    chart: {
                        plotBackgroundColor: "white",//设置绘图区背景色
                        plotBorderWidth: null,//设置绘图区高度
                        plotShadow: false//是否设置阴影
                    },
                    title: {
                        text: '${AppealDateBegin}'+'月'+'${ReportName}',
                        style:{
                        	  color: "#000000",
                        	  fontSize: "20px",
                        	  fontFamily: "宋体"
                        	}
                    },
                    credits: {
                        enabled: false
                    },
                    exporting:{  
                        filename:"保险消费投诉受理数量",  
                    },
                    tooltip: {
                    	formatter: function() {
                            return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +'% ('+
                                         Highcharts.numberFormat(this.y, 0, ',') +' 个)';
                         }
                    },
                    plotOptions: {
                        pie: {
                            allowPointSelect: true,
                            cursor: 'pointer',
                            dataLabels: {
                                enabled: true,
                                formatter: function() {
                                    return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +'% ('+
                                    Highcharts.numberFormat(this.y, 0, ',') +' 个)';
                             }

                            },
                            showInLegend: true
                        }
                    },
                    series: [{
                        type: 'pie',
                        name: '所占比例',
                        data: arr
                    }]
                	 });  
                };
            
                
                function  GetData1(arr){
                    $('#container').highcharts({
                        chart: {
                            plotBackgroundColor: "white",//设置绘图区背景色
                            plotBorderWidth: null,//设置绘图区高度
                            plotShadow: false//是否设置阴影
                        },
                        title: {
                            text: '${StartDate}'+'${ReportName}',
                            style:{
                            	  color: "#000000",
                            	  fontSize: "20px",
                            	  fontFamily: "宋体"
                            	}
                        },
                        credits: {
                            enabled: false
                        },
                        exporting:{  
                            filename:"保险消费投诉受理数量",  
                            //url:'http://localhost:8080/HighChartsDemo/SaveAsImage'//这里是一个重点哦,也可以修改exporting.js中对应的url  
                        },
                        tooltip: {
                        	formatter: function() {
                                return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +'% ('+
                                             Highcharts.numberFormat(this.y, 0, ',') +' 个)';
                             }
                        },
                        plotOptions: {
                            pie: {
                                allowPointSelect: true,
                                cursor: 'pointer',
                                dataLabels: {
                                    enabled: true,
                                    formatter: function() {
                                        return '<b>'+ this.point.name +'</b>: '+ Highcharts.numberFormat(this.percentage, 2) +'% ('+
                                        Highcharts.numberFormat(this.y, 0, ',') +' 个)';
                                 }

                                },
                                showInLegend: true
                            }
                        },
                        series: [{
                            type: 'pie',
                            name: '所占比例',
                            data: arr
                        }]
                    	 });  
                    };
            
        </script>

</body>

</html>