<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta charset="utf-8">
<title>广兰路电压模拟量显示</title>
<!-- 引入 echarts.js -->
<script src="js/echarts.common.min.js"></script>
<script src="js/jquery-1.8.3.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="height:500px;width:100%;margin:0 auto"></div>
<script type="text/javascript">
// 基于准备好的dom，初始化echarts实例
var myChart = echarts.init(document.getElementById(‘main‘));
option = {
title: {
text: ‘广兰路电压模拟量实时显示‘,
left:‘7%‘,
top:‘5%‘,
},
tooltip: {
trigger: ‘axis‘
},
legend: {
show:true,
data:[‘上行门使能‘,‘上行开门‘,‘上行门锁闭‘,‘下行门使能‘,‘下行开门‘,‘下行门锁闭‘],
// left:‘80px‘,
},
grid: {
left: ‘3%‘,//grid组件离容器左侧的距离
right: ‘4%‘,
bottom: ‘3%‘,
top:‘10%‘,
containLabel: true //是否显示坐标轴的刻度标签
},
toolbox: {//工具栏
feature: {
saveAsImage: {}
}
},
dataZoom: [
{
type: ‘slider‘, //支持鼠标滚轮缩放
start: 0, //默认数据初始缩放范围为10%到90%
end: 100
},
{
type: ‘inside‘, //支持单独的滑动条缩放
start: 0, //默认数据初始缩放范围为10%到90%
end: 100
}
],
xAxis: {
type: ‘category‘,//坐标轴类别，类目轴，适用于离散的类目数据，通过data设置类目数据
boundaryGap: true,
data: []
},
yAxis: {
type: ‘value‘//数值轴，用于连续数据
},
series: [
{
name:‘上行门使能‘,
type:‘line‘,
//stack: ‘总量‘,
data:[]
},
{
name:‘上行开门‘,
type:‘line‘,
// stack: ‘总量‘,
data:[]
},
{
name:‘上行门锁闭‘,
type:‘line‘,
//stack: ‘总量‘,
data:[]
},
{
name:‘下行门使能‘,
type:‘line‘,
//stack: ‘总量‘,
data:[]
},
{
name:‘下行开门‘,
type:‘line‘,
//stack: ‘总量‘,
data:[]
},
{
name:‘下行门锁闭‘,
type:‘line‘,
//stack: ‘总量‘,
data:[]
},
]
};
$(document).ready(function(){
setInterval(" getNewData()",10000);
})
function getNewData(){
var upenablevol =[];//上行使能电压数组
var upopenvol =[];//上行开门电压数组
var uplockingvol=[];//上行门锁闭电压数组
var downenablvol=[];//下行门使能电压数组
var downopenvol =[];//下行开门电压数组
var downlockvol =[];//下行门锁闭电压数组
var dates =[];//当前系统时间
$.ajax({ //使用JQuery内置的Ajax方法
type : "post", //post请求方式
async : true, //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
url : "GuangLanRoadUpVoltageServlet", //请求发送到 GuangLanRoadUpVoltageServlet 处
dataType : "json", //返回数据形式为json
cache:false,
success : function(result) {
//请求成功时执行该函数内容，result即为服务器返回的json对象
//debugger;
if (result != null && result.length > 0) {
for(var i=0;i<result.length;i++ ){
upenablevol.push(result[i].upenablevoltage); //挨个取出电压电流等数组
upopenvol.push(result[i].upopenvoltage);
uplockingvol.push(result[i].uplockingvoltage);
downenablvol.push(result[i].downenablevoltage);
downopenvol.push(result[i].downopenvoltage);
downlockvol.push(result[i].downlockingvoltage);
dates.push(result[i].currenttimestr);//填入X轴的数据
}
myChart.setOption({ //载入数据
xAxis: {
data: dates //填入X轴数据,
},
series: [ //填入系列（内容）数据
{
// 根据名字对应到相应的系列
name: ‘上行门使能电压‘,
data: upenablevol
},
{
name: ‘上行门锁闭电压‘,
data: uplockingvol
},
{
name:‘上行开门电压‘,
data: upopenvol
},
{
name:‘下行门使能电压‘,
data: downenablvol
},
{
name:‘下行门锁闭电压‘,
data: downlockvol
},
{
name:‘下行开门电压‘,
data: downopenvol
}
]
});
}
else {
//返回的数据为空时显示提示信息
alert("图表请求数据为空，您可以稍后再试！");
// myChart.hideLoading();
}
},
})
}//function getnewdata 的结束
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
时间： 2024-11-01 17:33:40