<%@ 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%;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>