//引入
<script src="./js/jquery-3.6.4.min.js"></script>
<script src="../layDate-v5.3.1/layDate-v5.3.1/laydate/laydate.js"></script>
<style href="./css/bootstrap.min.css" rel="stylesheet" type="text/css" ></style>
//----------------------------------------------------------------------------
<input type="text" id="riqi">
<button onclick="riqi2()" style="color:purple;">查询</button>
两行,两列
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-6"><div id="main" style=" height:400px; width: 400px;"></div></div>
<div class="col-xs-6 col-md-6"><div id="main01" style=" height:400px; width: 400px;"></div></div>
<div class="row"></div>
<div class="col-md-6 col-md-6"><div id="main02" style=" height:400px; width: 400px;"></div></div>
</div>
</div>
laydate.render({
elem: '#riqi'
,type:'datetime'
});
function riqi2()
// axaj异步请求
let t = $('#riqi').val()
$.ajax({
url:"http://10.1.10.41:8009/wast",
type:"get",
data:{time:t},
success:function(res){
console.log(res)
console.log(res.电流A)
console.log(res.电能)
let sa = res.电流B
let b =sa.toFixed(2) //保留两位小数
console.log("过滤后",b)
console.log(res.电压B.toFixed(2)) //保留两位小数
//--------------------------------------------------------
option01 = {
title:{ //标题 title
left:'left', // 对齐方式 left center right
itemGap:20,
text:'电压'},
//-------------------------------------------------------
color: ['#d88273','#d88273', '#d88273'], //修改颜色
//------------------------------------------------------
xAxis: {
type: 'category',
data: [ 'A电压', 'B电压', 'C电压']
},
yAxis: {
type: 'value'
},
series: [
{
data: [res.电压A.toFixed(2), res.电压B.toFixed(2), res.电压C.toFixed(2) ],
//-----------------------------------------------------------------------------
itemStyle:{ //柱形图上方显示数据
normal:{
label:{
show:true,
position:'top',
textsyle:{
color:'black',
fontSize:16
//------------------------------------------------------------------------------
}
}
}
},
type: 'bar',
showBackground: true,
backgroundStyle: {
color: 'rgba(180, 180, 180, 0.2)'
}
}
]
};