225 lines
7.4 KiB
HTML
225 lines
7.4 KiB
HTML
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html"; charset="utf-8" />
|
|
<title>全局分析</title>
|
|
|
|
<link href="js/bstable/css/bootstrap.min.css" rel="stylesheet" type="text/css">
|
|
<link href="js/bstable/css/bootstrap-table.css" rel="stylesheet" type="text/css">
|
|
<link href="css/table1.css" rel="stylesheet" type="text/css">
|
|
<style>
|
|
.news_check{background-color:#171e2b ;border: none;color:#c5d0da;font-weight: normal;font-size: 14px }
|
|
.news_check input,.news_check select,.news_check select option{border: 1px #9ca9b6 solid !important;background-color: transparent !important;color: #9ca9b6}
|
|
.charts{border: 1px #3e5665 solid}
|
|
.charts p{background-color: #495365;border-bottom:#495365;color: #d7d9dc }
|
|
.btn-default { color: #cfd8e8; background-color: #5f6167; border-color: #7b8188; }
|
|
.btn-default:hover{ color: #f1f5fb; background-color: #74767b; border-color: #8e9398;}
|
|
.check_right span {color: #d1d5de !important;}
|
|
</style>
|
|
</head>
|
|
<body style="background-color: #171e2b;font-family: 微软雅黑;width:900px;color: #475059;overflow: auto">
|
|
<div class="from_main" style="background-color: #171e2b">
|
|
<div class="news_check">
|
|
<div class="check_left l_left">
|
|
|
|
<label>年分：</label>
|
|
<input type="date" class="find_input"/>
|
|
|
|
|
|
<button>查询</button>
|
|
</div>
|
|
<div class="check_right r_right">
|
|
<a class="btn btn-default"><span class=" glyphicon glyphicon-circle-arrow-down l_left"></span>打印</a>
|
|
<a class="btn btn-default"><span class=" glyphicon glyphicon-download-alt l_left"></span>导出</a>
|
|
</div>
|
|
<div class="clear"></div>
|
|
</div>
|
|
|
|
<div style="padding: 0 10px 0 10px ;background-color: #171e2b ;">
|
|
|
|
<!--<div class="e_chart">-->
|
|
<!--<div class="charts l_left">-->
|
|
<!--<p class="charts_p">事故原因分析<span class="r_right">更多></span></p>-->
|
|
<!--<div id="container01" style="height:200px;width: 100%;"></div>-->
|
|
|
|
<!--</div>-->
|
|
<!--<div class="charts l_left last_charts">-->
|
|
<!--<p class="charts_p">事故级别分析<span class="r_right">更多></span></p>-->
|
|
<!--<div id="container02" style="height:200px;width: 100%;"></div>-->
|
|
|
|
<!--</div>-->
|
|
<!--<div class="clear"></div>-->
|
|
<!--</div>-->
|
|
<div class="e_chart">
|
|
<div class="charts last_charts" style="width: 100%">
|
|
<p class="charts_p">历史数据分析<span class="r_right">更多></span></p>
|
|
<div id="container03" style="height:300px;"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
<script type="text/javascript" src="js/jquery.js"></script>
|
|
<script src="js/echarts-all.js"></script>
|
|
|
|
<script>
|
|
$(function () {
|
|
|
|
// chart02();
|
|
// chart03();
|
|
chart04()
|
|
|
|
});
|
|
|
|
// function chart02() {
|
|
// var myChart = echarts.init($("#container01")[0]);
|
|
// var option = {
|
|
//
|
|
// tooltip : {
|
|
// trigger: 'item',
|
|
// formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
// },
|
|
// legend: {
|
|
// orient : 'vertical',
|
|
// x : 'left',
|
|
// data:['设备原因','违规操作','操作失误','腐蚀','维护不周',"自然因素","社会因素","其它"],
|
|
// textStyle:{ //图例文字的样式
|
|
// color:'#c4c6ca',
|
|
// fontSize:12
|
|
// }
|
|
// },
|
|
//
|
|
// calculable : false,
|
|
// series : [
|
|
// {
|
|
// name:'访问来源',
|
|
// type:'pie',
|
|
// radius : '55%',
|
|
// center: ['50%', '60%'],
|
|
// data:[
|
|
// {value:35, name:'设备原因' },
|
|
// {value:110, name:'违规操作'},
|
|
// {value:34, name:'操作失误'},
|
|
// {value:35, name:'腐蚀'},
|
|
// {value:48, name:'维护不周'},
|
|
// {value:2, name:'自然因素'},
|
|
// {value:5, name:'社会因素'},
|
|
// {value:15, name:'其它'}
|
|
// ]
|
|
// }
|
|
// ]
|
|
// };
|
|
// myChart.setOption(option);
|
|
//
|
|
// }
|
|
// function chart03() {
|
|
// var myChart = echarts.init($("#container02")[0]);
|
|
// var option = {
|
|
//
|
|
// tooltip : {
|
|
// trigger: 'item',
|
|
// formatter: "{a} <br/>{b} : {c} ({d}%)"
|
|
// },
|
|
// legend: {
|
|
// orient : 'vertical',
|
|
// x : 'left',
|
|
// data:['特大','极大','重大','一般','微小'],
|
|
// textStyle:{ //图例文字的样式
|
|
// color:'#c4c6ca',
|
|
// fontSize:12
|
|
// }
|
|
// },
|
|
//
|
|
// calculable : false,
|
|
// series : [
|
|
// {
|
|
// name:'访问来源',
|
|
// type:'pie',
|
|
// radius : '55%',
|
|
// center: ['50%', '60%'],
|
|
// data:[
|
|
// {value:3, name:'特大'},
|
|
// {value:11, name:'极大'},
|
|
// {value:34, name:'重大'},
|
|
// {value:35, name:'一般'},
|
|
// {value:48, name:'微小'}
|
|
//
|
|
// ]
|
|
// }
|
|
// ]
|
|
// };
|
|
// myChart.setOption(option);
|
|
//
|
|
// }
|
|
function chart04() {
|
|
var myChart = echarts.init($("#container03")[0]);
|
|
var option = {
|
|
tooltip : {
|
|
trigger: 'axis'
|
|
},
|
|
legend: {
|
|
data:['高猛酸盐','总磷','氨氮'],
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
},
|
|
|
|
calculable : false,
|
|
xAxis : [
|
|
{
|
|
type : 'category',
|
|
boundaryGap : false,
|
|
data : ['周一','周二','周三','周四','周五','周六','周日'],
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
yAxis : [
|
|
{
|
|
type : 'value',
|
|
axisLabel: {
|
|
show: true,
|
|
textStyle: {
|
|
color: '#fff'
|
|
}
|
|
}
|
|
}
|
|
],
|
|
series : [
|
|
{
|
|
name:'高猛酸盐',
|
|
type:'line',
|
|
stack: '总量',
|
|
data:[120, 132, 101, 134, 90, 230, 210]
|
|
},
|
|
{
|
|
name:'总磷',
|
|
type:'line',
|
|
stack: '总量',
|
|
data:[220, 182, 191, 234, 290, 330, 310]
|
|
},
|
|
{
|
|
name:'氨氮',
|
|
type:'line',
|
|
stack: '总量',
|
|
data:[150, 232, 201, 154, 190, 330, 410]
|
|
}
|
|
|
|
]
|
|
};
|
|
myChart.setOption(option);
|
|
|
|
}
|
|
</script>
|
|
</html>
|