You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
290 lines
9.3 KiB
HTML
290 lines
9.3 KiB
HTML
<!DOCTYPE HTML>
|
|
<html>
|
|
<head>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
<link href="__PUBLIC__/style/bootstrap.css" rel="stylesheet">
|
|
<link href="__PUBLIC__/style/font-awesome.css" rel="stylesheet">
|
|
<link href="__PUBLIC__/style/weather-icons.css" rel="stylesheet">
|
|
|
|
<!--Beyond styles-->
|
|
<link id="beyond-link" href="__PUBLIC__/style/beyond.css" rel="stylesheet" type="text/css">
|
|
<link href="__PUBLIC__/style/demo.css" rel="stylesheet">
|
|
<link href="__PUBLIC__/style/typicons.css" rel="stylesheet">
|
|
<link href="__PUBLIC__/style/animate.css" rel="stylesheet">
|
|
<title>抽水蓄能电站智能化状态监测系统</title>
|
|
</head>
|
|
<body>
|
|
<script src="https://img.hcharts.cn/jquery/jquery-1.8.3.min.js"></script>
|
|
<script src="__IMG__/cssjs/js/highcharts.js"></script>
|
|
<script src="__IMG__/cssjs/js/highcharts-3d.js"></script>
|
|
<script src="__IMG__/cssjs/js/exporting.js"></script>
|
|
<div class="page-body" style="padding-top: 0px">
|
|
<div class="easy-pie-chart-preview">
|
|
<div class="row">
|
|
<div class="col-lg-12 col-sm-12 col-xs-12" >
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-6" style="width: 50%">
|
|
<div class="widget" style="background-color:white;height: 300px">
|
|
<div class="widget-header bg-blueberry">
|
|
<span class="widget-caption">设备状态</span>
|
|
<div class="widget-caption pull-right" >
|
|
单位<span style="font-size: 18px;font-weight: bold">台</span>
|
|
</div>
|
|
</div>
|
|
<div id="container3" style="height: 250px; padding-top: 10px; "></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6" style="width: 50%">
|
|
<div class="widget" style="background-color:white;height: 300px">
|
|
<div class="widget-header bg-blueberry">
|
|
<span class="widget-caption">设备统计</span>
|
|
<div class="widget-caption pull-right" >
|
|
单位<span style="font-size: 18px;font-weight: bold">台</span>
|
|
</div>
|
|
</div>
|
|
<div id="container4" style="height: 250px; padding-top: 10px; "></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-xs-12 col-sm-6" style="width: 50%">
|
|
<div class="widget" style="background-color:white;height: 300px">
|
|
<div class="widget-header bg-blueberry">
|
|
<span class="widget-caption">电压等级</span>
|
|
<div class="widget-caption pull-right" >
|
|
单位<span style="font-size: 18px;font-weight: bold">个</span>
|
|
</div>
|
|
</div>
|
|
<div id="container1" style="height: 250px; padding-top: 10px; "></div>
|
|
</div>
|
|
</div>
|
|
<div class="col-xs-12 col-sm-6" style="width: 50%">
|
|
<div class="widget" style="background-color:white;height: 300px">
|
|
<div class="widget-header bg-blueberry">
|
|
<span class="widget-caption">电站规模</span>
|
|
<div class="widget-caption pull-right" >
|
|
单位<span style="font-size: 18px;font-weight: bold">个</span>
|
|
</div>
|
|
</div>
|
|
<div id="container2" style="height: 250px; padding-top: 10px; "></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
$(function () {
|
|
Highcharts.chart('container1', {
|
|
chart: {
|
|
type: 'pie',
|
|
options3d: {
|
|
enabled: true,
|
|
alpha: 50 //倾斜度
|
|
},
|
|
backgroundColor: 'rgba(255, 255, 255, 0)',
|
|
plotBorderColor : null,
|
|
plotBackgroundColor: null,
|
|
plotBackgroundImage:null,
|
|
plotBorderWidth: null,
|
|
plotShadow: false,
|
|
},
|
|
colors: [ '#82d2ff', '#52f4dd'],
|
|
title: {
|
|
text: null
|
|
},
|
|
|
|
|
|
// subtitle: {
|
|
// text: '3D donut in Highcharts'
|
|
// },
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: true,
|
|
innerSize: 30, //空心大小
|
|
depth: 25, //厚度
|
|
dataLabels: {
|
|
enabled: false //是否显示引导线及数据
|
|
},
|
|
showInLegend: true //是否显示图例 false不显示
|
|
}
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
exporting:{
|
|
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
|
|
},
|
|
series: [{
|
|
name: '数量',
|
|
data:{$data}
|
|
}]
|
|
});
|
|
Highcharts.chart('container2', {
|
|
chart: {
|
|
type: 'pie',
|
|
options3d: {
|
|
enabled: true,
|
|
alpha: 50
|
|
},
|
|
backgroundColor: 'rgba(255, 255, 255, 0)',
|
|
plotBorderColor : null,
|
|
plotBackgroundColor: null,
|
|
plotBackgroundImage:null,
|
|
plotBorderWidth: null,
|
|
plotShadow: false,
|
|
},
|
|
colors: [ '#edd925', '#d421e9'],
|
|
title: {
|
|
text: null
|
|
},
|
|
// subtitle: {
|
|
// text: '3D donut in Highcharts'
|
|
// },
|
|
plotOptions: {
|
|
pie: {
|
|
allowPointSelect: true,
|
|
innerSize: 30,
|
|
depth: 25,
|
|
dataLabels: {
|
|
enabled: false //是否显示引导线及数据
|
|
},
|
|
showInLegend: true //是否显示图例 false不显示
|
|
}
|
|
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
exporting:{
|
|
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
|
|
},
|
|
|
|
series: [{
|
|
name: '数量',
|
|
data:{$data2}
|
|
}]
|
|
});
|
|
Highcharts.chart('container3', {
|
|
chart: {
|
|
type: 'column',
|
|
backgroundColor: 'rgba(255, 255, 255, 0)',
|
|
plotBorderColor : null,
|
|
plotBackgroundColor: null,
|
|
plotBackgroundImage:null,
|
|
plotBorderWidth: null,
|
|
plotShadow: false,
|
|
},
|
|
colors: [ '#47eda4', '#1c87ff','#eda796', '#e90914'],
|
|
title: {
|
|
text: null
|
|
},
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: '数量'
|
|
}
|
|
},
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
borderWidth: 0,
|
|
dataLabels: {
|
|
enabled: true,
|
|
}
|
|
}
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
exporting:{
|
|
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
|
|
},
|
|
|
|
series: [{
|
|
name: '设备状态',
|
|
colorByPoint: true,
|
|
data:[{
|
|
name: '正常',
|
|
y: 20
|
|
}, {
|
|
name: '异常',
|
|
y: 5
|
|
},{
|
|
name: '警告',
|
|
y: 2
|
|
},{
|
|
name: '严重',
|
|
y: 2
|
|
},]
|
|
}]
|
|
});
|
|
Highcharts.chart('container4', {
|
|
chart: {
|
|
type: 'column',
|
|
backgroundColor: 'rgba(255, 255, 255, 0)',
|
|
plotBorderColor : null,
|
|
plotBackgroundColor: null,
|
|
plotBackgroundImage:null,
|
|
plotBorderWidth: null,
|
|
plotShadow: false,
|
|
},
|
|
colors: [ '#82d2ff', '#52f4dd','#e97e94', '#5e81e9'],
|
|
title: {
|
|
text: null
|
|
},
|
|
xAxis: {
|
|
type: 'category'
|
|
},
|
|
yAxis: {
|
|
title: {
|
|
text: '数量'
|
|
}
|
|
},
|
|
legend: {
|
|
enabled: false
|
|
},
|
|
plotOptions: {
|
|
series: {
|
|
borderWidth: 0,
|
|
dataLabels: {
|
|
enabled: true,
|
|
}
|
|
}
|
|
},
|
|
credits: {
|
|
enabled: false
|
|
},
|
|
exporting:{
|
|
enabled:false //用来设置是否显示‘打印’,'导出'等功能按钮，不设置时默认为显示
|
|
},
|
|
|
|
series: [{
|
|
name: '设备统计',
|
|
colorByPoint: true,
|
|
data:[{
|
|
name: '主设备',
|
|
y: 41
|
|
}, {
|
|
name: '监测设备',
|
|
y: 68
|
|
},{
|
|
name: '已监测主设备',
|
|
y: 29
|
|
}, {
|
|
name: '未监测主设备',
|
|
y: 3
|
|
},]
|
|
}]
|
|
});
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|