<!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>