首页 > 代码库 > Echart输出图形

Echart输出图形

2024-11-19 06:56:02   204人阅读

<%@ 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=http://www.mamicode.com/"js/echarts.common.min.js"></script>
    <script src=http://www.mamicode.com/"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>

 

Echart输出图形


联系
我们