代码拉取完成，页面将自动刷新
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title></title>
<link rel="stylesheet" href="css/style.css"/>
<link rel="stylesheet" href="css/iconfontdl.css">
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script src="js/echarts.min.js"></script>
<script src="css/My97DatePicker/WdatePicker.js"></script>
<!--[if lt IE 9]>
<script src="js/html5 shiv.js"></script>
<script src="js/respond shiv.js"></script>
<![endif]-->
</head>
<body style="background:#eee;">
<div class="warp">
<div class="kuai"></div>
<!-- star toptitle -->
<div class="toptit cleatfloat">
<div class="toptitlf">
<a href="javascript:history.go(-1)" >
<i class="iconfont icon-fanhui1"></i>
</a>
</div>
<div class="toptitcon">
<p>A区#1234变电站</p>
</div>
</div>
<!-- toptitle end -->
<!-- star button -->
<div class="sslsbtn">
<ul class="clearfloat">
<li> <span class="ssqxbtn active"> <i class="iconfont icon-502tongji_zhexiantu"></i> 实时曲线</span></li>
<li> <span class="lsqxbtn"> <i class="iconfont icon-shishiquxian1"></i> 历史曲线</span></li>
</ul>
</div>
<!-- button end -->
<script>
$(function(){
$(".ssqxbtn").click(function(){
$(".ssqxbtn").addClass("active");
$(".lsqxbtn").removeClass("active");
$("#Box").attr("src","/实时曲线.html");
});
$(".lsqxbtn").click(function(){
$(".ssqxbtn").removeClass("active");
$(".lsqxbtn").addClass("active");
$("#Box").attr("src","/历史曲线.html");
});
})
</script>
<!-- 历史曲线内容 -->
<div class="lsqz-content">
<!-- star 历史电流 -->
<div class="itemcon">
<div class="itemcon-title cleatfloat">
<i class="iconfont icon-dianliu"></i>
<p>A/B/C电流历史曲线</p>
</div>
<div class="lsqxri clearfloat">
<input type="button" onClick="WdatePicker()" >
<span> - </span>
<input type="button" onClick="WdatePicker()" >
<button>查询</button>
</div>
<div class="itemcon-content">
<div id="lsqxdianliu"></div>
</div>
</div>
<!-- 历史电流 end -->
<!-- star 电压 -->
<div class="itemcon">
<div class="itemcon-title cleatfloat">
<i class="iconfont icon-dianya2"></i>
<p>A/B/C电压历史曲线</p>
</div>
<div class="lsqxri clearfloat">
<input type="button" onClick="WdatePicker()" >
<span> - </span>
<input type="button" onClick="WdatePicker()" >
<button>查询</button>
</div>
<div class="itemcon-content">
<div id="lsqxdianya"></div>
</div>
</div>
<!-- 电压 end -->
<!-- star 总有功率 -->
<div class="itemcon">
<div class="itemcon-title cleatfloat">
<i class="iconfont icon-gongshuai"></i>
<p>历史总有功功率</p>
</div>
<div class="lsqxri clearfloat">
<input type="button" onClick="WdatePicker()" >
<span> - </span>
<input type="button" onClick="WdatePicker()" >
<button>查询</button>
</div>
<div class="itemcon-content">
<div id="lsqxgongl"></div>
</div>
</div>
<!-- 总有功率 end -->
</div>
<script>
// 电流曲线
var myChart1= echarts.init(document.getElementById('lsqxdianliu'));
myChart1.setOption({
legend:{
left:'center',
top:0,
textStyle:{
color:'#000',
fontSize:14
}
},
tooltip: {
trigger: 'axis'
},
grid: {
left: 5,
right: 5,
top:35,
bottom: 5,
containLabel: true
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
}],
color:['#01da28', '#f8d903','#ff4873','#fdd100','#3fecff','#23e443'],
xAxis: {
type: 'category',
boundaryGap: false,
axisLine:{//x轴的样式控制
show: true, //显示与否
lineStyle:{//线条样式
color: '#50558b',
width: 1,
type: 'solid'
}
},
axisLabel: {//控制x轴上的文字的样式
show: true,//显示与否
textStyle: {
color: '#000',
},//控制x轴字体样式
fontSize:12,
margin:15
},
data: ['01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00']
},
yAxis: {
type: 'value',
name:'A',
nameTextStyle:{
color:'#000',
fontSize:12
},
splitLine: {//控制网格的线条样式
show:true,
lineStyle:{
color: '#3d427a',
width: 1,
type: 'deshed'
}
},
axisLine:{//x轴的样式控制
show: true, //显示与否
lineStyle:{//线条样式
color: '#50558b',
width: 1,
type: 'solid'
}
},
axisTick:{
show:false
},
axisLabel: {//控制x轴上的文字的样式
show: true,//显示与否
textStyle: { color: '#000' },//控制x轴字体样式
fontSize:12
}
},
series: [
{
name:'A电流',
type:'line',
itemStyle: {
normal: {
lineStyle: {
width:1.5// 0.1的线条是非常细的了
}
}
},
stack: '总量',
smooth:true,
data:[120, 132, 101, 134, 90, 180, 110,120, 132, 161, 134, 90, 230, 150]
},
{
name:'B电流',
type:'line',
itemStyle: {
normal: {
lineStyle: {
width:1.5// 0.1的线条是非常细的了
}
}
},
stack: '总量',
smooth:true,
data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
},
{
name:'C电流',
type:'line',
itemStyle: {
normal: {
lineStyle: {
width:1.5// 0.1的线条是非常细的了
}
}
},
stack: '总量',
smooth:true,
data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
}
]
});
// 电压曲线
var myChart2= echarts.init(document.getElementById('lsqxdianya'));
myChart2.setOption({
legend:{
left:'center',
top:0,
textStyle:{
color:'#000',
fontSize:14
}
},
tooltip: {
trigger: 'axis'
},
grid: {
left: 5,
right: 5,
top:35,
bottom: 5,
containLabel: true
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
}],
color:['#a0ec00', '#00a4ff','#7e00f3','#fdd100','#3fecff','#23e443'],
xAxis: {
type: 'category',
boundaryGap: false,
axisLine:{//x轴的样式控制
show: true, //显示与否
lineStyle:{//线条样式
color: '#50558b',
width: 1,
type: 'solid'
}
},
axisLabel: {//控制x轴上的文字的样式
show: true,//显示与否
textStyle: {
color: '#000',
},//控制x轴字体样式
fontSize:13,
margin:15
},
data: ['01:00','02:00','03:00','04:00','05:00','06:00','07:00','08:00','09:00','10:00','11:00','12:00','13:00','14:00','15:00']
},
yAxis: {
type: 'value',
name:'V',
nameTextStyle:{
color:'#000',
fontSize:12
},
splitLine: {//控制网格的线条样式
show:true,
lineStyle:{
color: '#3d427a',
width: 1,
type: 'deshed'
}
},
axisLine:{//x轴的样式控制
show: true, //显示与否
lineStyle:{//线条样式
color: '#50558b',
width: 1,
type: 'solid'
}
},
axisTick:{
show:false
},
axisLabel: {//控制x轴上的文字的样式
show: true,//显示与否
textStyle: { color: '#000' },//控制x轴字体样式
fontSize:13
}
},
series: [
{
name:'A电压',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
width:1.5// 0.1的线条是非常细的了
}
}
},
data:[120, 132, 101, 134, 90, 180, 110,120, 132, 161, 134, 90, 230, 150]
},
{
name:'B电压',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
width:1.5// 0.1的线条是非常细的了
}
}
},
data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
},
{
name:'C电压',
type:'line',
stack: '总量',
smooth:true,
itemStyle: {
normal: {
lineStyle: {
width:1.5// 0.1的线条是非常细的了
}
}
},
data:[220, 182, 191, 234, 290, 330, 310,220, 182, 191, 234, 290, 330, 310]
}
]
});
// 总有功功率
var myChart3 = echarts.init(document.getElementById('lsqxgongl'));
myChart3.setOption({
tooltip: {
trigger: 'axis'
},
grid: {
left: 5,
right: 5,
top:30,
bottom: 5,
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
axisLine:{//x轴的样式控制
show: true, //显示与否
lineStyle:{//线条样式
color: '#50558b',
width: 1,
type: 'solid'
}
},
axisLabel: {//控制x轴上的文字的样式
show: true,//显示与否
textStyle: {
color: '#000',
},//控制x轴字体样式
fontSize:13,
margin:15
},
data: ['01', '02', '03', '04', '05', '06', '07', '08', '09']
},
dataZoom: [
{
type: 'inside',
start: 0,
end: 100,
}],
yAxis: {
type: 'value',
name:'kW',
nameTextStyle:{
color:'#000',
fontSize:12
},
splitLine: {//控制网格的线条样式
show:true,
lineStyle:{
color: '#3d427a',
width: 1,
type: 'deshed'
}
},
axisLine:{//x轴的样式控制
show: true, //显示与否
lineStyle:{//线条样式
color: '#50558b',
width: 1,
type: 'solid'
}
},
axisTick:{
show:false
},
axisLabel: {//控制x轴上的文字的样式
show: true,//显示与否
textStyle: { color: '#000' },//控制x轴字体样式
fontSize:13
}
},
series: [
{
type: 'line',
symbolSize: 5, // 设定实心点的大小
data: [320, 372, 171, 156, 210, 140, 180, 170,165,190,222],
smooth: true,
itemStyle: {
color: '#1fbcfe'
},
areaStyle: {
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
offset: 0,
color: 'rgba(31, 188, 254,0.8)'
}, {
offset: 1,
color: 'rgba(31, 188, 254,0)'
}])
}
}
]
})
</script>
<div >
<iframe width="100%" id="Box" frameborder="0" scrolling="0" src="/实时曲线.html"></iframe>
</div>
<script type="text/javascript">
function reinitIframe(){
var iframe = document.getElementById("Box");
try{
var bHeight = iframe.contentWindow.document.body.scrollHeight;
var dHeight = iframe.contentWindow.document.documentElement.scrollHeight;
var height = Math.max(bHeight, dHeight);
iframe.height = height;
console.log(height);
}catch (ex){}
}
window.setInterval("reinitIframe()", 200);
</script>
</div>
</body>
</html>
Loading...
举报
请认真填写举报原因，尽可能描述详细。
请选择举报类型
误判申诉
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化