<%@ Page Language="C#" AutoEventWireup="true" CodeFile="index1.aspx.cs" Inherits="emergency_maintainsystem_index1" %>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="../../js/jquery-1.12.3.min.js"></script>
<script src="../../js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link href="../../js/jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" />
<script src="../../js/echart/js/echarts.min.js"></script>
<style type="text/css">
/*#dv {
width: 100%;
height: 100%;
}*/
/*#dv1 {
height: 30%;
margin-top:15px;
width:100%;
}*/
.dv2 {
width: 200px;
height: 100px;
float: left;
}
.dv3{
width:200px;
height:100px;
float:left;
}
.check1{
background-image:url(../../Images/myMenu/cx01.png);
border:1px; margin-top:15px; padding:1px 1px; height:35px;
width:80px;color:#fff; font-size:16px;
cursor:hand;font-family:‘Microsoft YaHei‘;
}
p{
width:100%;
height:100%;
font-size:16px;
font-family:‘Microsoft YaHei‘;
}
.txt{
width:60%;
height:37px;
font-size:16px;
font-family:‘Microsoft YaHei‘;
}
</style>
<script>
$(function () {
$(‘#starttime‘).datepicker();
$(‘#endtime‘).datepicker();
//document.getElementById(‘dv‘).style.width = window.screen.width;
document.getElementById(‘divChart‘).style.marginTop = (document.body.clientHeight - 100-30 -430)/2 +‘px‘ ;
//document.getElementById(‘piechart‘).style.height = window.screen.height - 200;
})
</script>
</head>
<body style="text-align:center;">
<div id="dv" style="width:1000px;margin:auto;">
<div id="dv1" style="width: 100%;height:100px;margin-top:30px;">
<div class="dv2"><p>开始日期: <input type="text" id="starttime" class="txt" /></p></div>
<div class="dv2"><p>结束日期: <input type="text" id="endtime" class="txt" /></p></div>
<div class="dv2">
<p>
统计类型:
<select id="prov" style="width:60%;height:36px;font-size:16px;font-family:‘Microsoft YaHei‘;">
<option value="0">年</option>
<option value="1" selected="selected">月</option>
<option value="1">日</option>
</select>
</p>
</div>
<div class="dv3"><input type="submit" value=" 查询" class="check1" /></div>
</div>
<div id="divChart">
<div id="main" style="width: 50%; height:430px; float:left;color:white;vertical-align:middle"></div>
<div id="piechart" style="width: 50%;height:430px;float:right;color:white;vertical-align:middle"></div>
</div>
<div id="showDialog"></div>
</div>
</body>
</html>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));
var array1 = ["供水管线", "雨水管线", "污水管线", "排水管线"];
var array2 = [10, 20, 30, 40];
var url;
var width = 600;
var height = 465;
var leftScreen = 0;
var myLeft = leftScreen + (window.screen.width - width) / 2;
var myTop = (window.screen.height - height) / 2;
var childWin1;
function FuncOpen(seriesName, name) {
//if (!childWin1 != null)
//{
// if (!childWin1.closed)
// childWin1.close();
//}
if (name == ‘供水管线‘) {
if (seriesName == ‘已维护‘) {
url = ‘basic/SupplyWater/Index.aspx‘;
}
else {
url = ‘basic/RainwaterPipeline/Index.aspx‘;
}
}
//childWin1 = window.open(url, ‘‘, ‘width=‘ + width + ‘,height=‘ + height + ‘,top=‘ + myTop + ‘,left=‘ + myLeft + ‘,scrollbars=no,alwaysRaised =yes‘);
//return true;
}
// 指定图表的配置项和数据
var option = {
//title: {
// text: ‘报警概况‘
//},
tooltip: {},
legend: {
data: [‘已维护‘, ‘未维护‘]
},
grid: {
top: ‘12%‘,
left: ‘1%‘,
right: ‘10%‘,
containLabel: true
},
xAxis: {
data: array1
},
yAxis: {
type: ‘value‘,
},
series: [{
name: ‘已维护‘,
type: ‘bar‘,
data: [2, 3, 2, 4]
}, {
name: ‘未维护‘,
type: ‘bar‘,
data: [1, 1, 3, 2]
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on(‘click‘, function (params) {
//window.location.href = ‘basic/SupplyWater/Index.aspx‘;
//alert(params.seriesName);
FuncOpen(params.seriesName, params.name);
});
</script>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘piechart‘));
option = {
title: {
text: ‘合计‘,
subtext: ‘240个‘,
x: ‘center‘,
y: ‘center‘,
textStyle: {
fontWeight: ‘normal‘,
fontSize: 30
}
},
tooltip: {
trigger: ‘item‘,
formatter: "{a} <br/>{b}: {c} ({d}%)"
},
legend: {
orient: ‘vertical‘,
x: ‘left‘,
data: [‘供水管线‘, ‘雨水管线‘, ‘污水管线‘, ‘排水管线‘]
},
series: [
{
name: ‘访问来源‘,
type: ‘pie‘,
radius: [‘50%‘, ‘70%‘],
avoidLabelOverlap: false,
label: {
normal: {
show: false,
position: ‘inner‘
},
emphasis: {
show: true,
textStyle: {
fontSize: ‘20‘,
fontWeight: ‘bold‘
}
}
},
labelLine: {
normal: {
show: false
}
},
data: [
{ value: 335, name: ‘供水管线‘ },
{ value: 310, name: ‘雨水管线‘ },
{ value: 234, name: ‘污水管线‘ },
{ value: 135, name: ‘排水管线‘ }
]
}
]
};
var url;
var width = 600;
var height = 465;
var leftScreen = 0;
var myLeft = leftScreen + (window.screen.width - width) / 2;
var myTop = (window.screen.height - height) / 2;
var childWin1;
function FuncOpen(seriesName, name) {
//if (!childWin1 != null)
//{
// if (!childWin1.closed)
// childWin1.close();
//}
if (name == ‘供水管线‘) {
if (seriesName == ‘已维护‘) {
url = ‘basic/SupplyWater/Index.aspx‘;
}
else {
url = ‘basic/RainwaterPipeline/Index.aspx‘;
}
}
//childWin1 = window.open(url, ‘‘, ‘width=‘ + width + ‘,height=‘ + height + ‘,top=‘ + myTop + ‘,left=‘ + myLeft + ‘,scrollbars=no,alwaysRaised =yes‘);
//return true;
}
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
myChart.on(‘click‘, function (params) {
//window.location.href = ‘basic/SupplyWater/Index.aspx‘;
FuncOpen(params.seriesName, params.name);
});
//myChart.on(‘click‘, function (params) {
// alert(array[params.dataIndex]);
//});
</script>
原文：http://www.cnblogs.com/branroy/p/6429365.html