<%@ 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:100%;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%',
bottom:5,
x:'center',
},
tooltip: {//提示框组件
trigger: 'axis', //坐标轴触发
axisPointer:{
type:'cross', //指示器类型，十字准星指示器（两个正交的轴）
}
},
legend: [
{ //图例组件，展示不同系列标记，颜色和名字
show:true,
data:['上行使能电压','上行开门电压','上行锁闭电压','下行使能电压','下行开门电压','下行锁闭电压'],
x:'center',
//bottom:10,
// left:'80px',
},{
show:true,
data:['上行使能电流','上行开门电流','上行锁闭电流','下行使能电流','下行开门电流','下行锁闭电流'],
x:'center',
}],
grid:[ //设置了2个grid组件
{
left: '3%',//grid组件离容器左侧的距离
right: '3%',
height:'35%',
containLabel: true //是否显示坐标轴的刻度标签
},{
left: '3%',//grid组件离容器左侧的距离
right: '3%',
height:'35%',
top:'55%',
containLabel: true //是否显示坐标轴的刻度标签
}],
toolbox: { //工具栏
feature: {
saveAsImage: {}
}
},
dataZoom: [ //区域缩放组件，位于grid容器的最下方
{
show:true,
//type: 'inside', //支持单独的滑动条缩放
realtime:true,
start: 50, //默认数据初始缩放范围为10%到90%
end: 70,
xAxisIndex:[0,1],
},
{
show:true,
type: 'inside', //支持单独的滑动条缩放
realtime:true,
start: 50, //默认数据初始缩放范围为10%到90%
end: 70,
xAxisIndex:[0,1],
}
],
xAxis: [
{
type: 'category', //坐标轴类别，类目轴，适用于离散的类目数据，通过data设置类目数据
boundaryGap: false, //此处设置为false，影响第一个和最后一个数据点的显示，坐标轴两边留白策略
data: [],
},{
gridIndex:1, //表示是第二个grid的X轴
type: 'category',
boundaryGap: false,
data: [],
//position:'top',
}],
yAxis:[
{
gridIndex:0,
name:'电压值',
type: 'value'//数值轴，用于连续数据
},{
gridIndex:1,
name:'电流值',
type: 'value'//数值轴，用于连续数据
}],
series: [
{
name:'上行使能电压',
type:'line',
xAxisIndex:0,
yAxisIndex:0,
hoverAnimation: false, //是否开启hover在拐点标志上的提示动画效果
//stack: '总量',
data:[]
},
{
name:'上行开门电压',
type:'line',
xAxisIndex:0,
yAxisIndex:0,
hoverAnimation: false,
// stack: '总量',
data:[]
},
{
name:'上行锁闭电压',
type:'line',
xAxisIndex:0,
yAxisIndex:0,
hoverAnimation: false,
//stack: '总量',
data:[]
},
{
name:'下行使能电压',
type:'line',
xAxisIndex:0,
yAxisIndex:0,
hoverAnimation: false,
//stack: '总量',
data:[]
},
{
name:'下行开门电压',
type:'line',
xAxisIndex:0,
yAxisIndex:0,
hoverAnimation: false,
//stack: '总量',
data:[]
},
{
name:'下行锁闭电压',
type:'line',
xAxisIndex:0,
yAxisIndex:0,
hoverAnimation: false,
//stack: '总量',
data:[]
},
{
name:'上行使能电流',
type:'line',
xAxisIndex:1,
yAxisIndex:1,
hoverAnimation: false, //是否开启hover在拐点标志上的提示动画效果
//stack: '总量',
data:[]
},
{
name:'上行开门电流',
type:'line',
xAxisIndex:1,
yAxisIndex:1,
hoverAnimation: false, //是否开启hover在拐点标志上的提示动画效果
//stack: '总量',
data:[]
},
{
name:'上行锁闭电流',
type:'line',
xAxisIndex:1,
yAxisIndex:1,
hoverAnimation: false, //是否开启hover在拐点标志上的提示动画效果
//stack: '总量',
data:[]
},
{
name:'下行使能电流',
type:'line',
xAxisIndex:1,
yAxisIndex:1,
hoverAnimation: false, //是否开启hover在拐点标志上的提示动画效果
//stack: '总量',
data:[]
},
{
name:'下行开门电流',
type:'line',
xAxisIndex:1,
yAxisIndex:1,
hoverAnimation: false, //是否开启hover在拐点标志上的提示动画效果
//stack: '总量',
data:[]
},
{
name:'下行锁闭电流',
type:'line',
xAxisIndex:1,
yAxisIndex:1,
hoverAnimation: false, //是否开启hover在拐点标志上的提示动画效果
//stack: '总量',
data:[]
}
] //这个中括号是series的结束括号
};
$(document).ready(function(){
setInterval("getNewData()",5000);
})
function getNewData(){
var upenablevol =[];//上行使能电压数组
var upopenvol =[];//上行开门电压数组
var uplockingvol=[];//上行门锁闭电压数组
var downenablvol=[];//下行门使能电压数组
var downopenvol =[];//下行开门电压数组
var downlockvol =[];//下行门锁闭电压数组
var upenabelcur=[];//电流
var upopencur=[];
var uplockingcur=[];
var downenablecur =[];
var downopencur=[];
var downlockingcur =[];
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);
upenabelcur.push(result[i].upenablecurrent);
upopencur.push(result[i].upopencurrent);
uplockingcur.push(result[i].uplockingcurrent);
downenablecur.push(result[i].downenablecurrent);
downopencur.push(result[i].downopencurrent);
downlockingcur.push(result[i].downlockingcurrent);
dates.push(result[i].currenttimestr);//填入X轴的数据
}
myChart.setOption({ //载入数据
xAxis: [
{
data: dates, //填入X轴数据,
},{
gridIndex:1,
data: dates, //填入X轴数据,
}],
series: [ //填入系列（内容）数据
{
name: '上行使能电压', // 根据名字对应到相应的系列
xAxisIndex:0,
yAxisIndex:0,
data: upenablevol,
},
{
name: '上行锁闭电压',
xAxisIndex:0,
yAxisIndex:0,
data: uplockingvol,
},
{
name:'上行开门电压',
xAxisIndex:0,
yAxisIndex:0,
data: upopenvol,
},
{
name:'下行门使能电压',
xAxisIndex:0,
yAxisIndex:0,
data: downenablvol,
},
{
name:'下行锁闭电压',
xAxisIndex:0,
yAxisIndex:0,
data: downlockvol,
},
{
name:'下行开门电压',
xAxisIndex:0,
yAxisIndex:0,
data: downopenvol,
},
{
name:'上行使能电流',
xAxisIndex:1,
yAxisIndex:1,
data:upenabelcur ,
},
{
name:'上行开门电流',
xAxisIndex:1,
yAxisIndex:1,
data:upopencur ,
},
{
name:'上行锁闭电流',
xAxisIndex:1,
yAxisIndex:1,
data:uplockingcur,
},
{
name:'下行使能电流',
xAxisIndex:1,
yAxisIndex:1,
data:downenablecur,
},
{
name:'下行开门电流',
xAxisIndex:1,
yAxisIndex:1,
data:downopencur,
},
{
name:'下行锁闭电流',
xAxisIndex:1,
yAxisIndex:1,
data:downlockingcur,
},
]
});
}
else {
//返回的数据为空时显示提示信息
alert("图表请求数据为空，您可以稍后再试！");
// myChart.hideLoading();
}
},
})
}//function getnewdata 的结束
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
</script>
</body>
</html>
浙公网安备 33010602011771号