• HighCharts终极版本


    <%@ page language="java" contentType="text/html; charset=UTF-8"
      pageEncoding="UTF-8"%>
    <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
    <%
        String path = request.getContextPath();
        String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
    %>
    <!DOCTYPE html>
    <html lang="zh">
    <head>
    <base href="<%=basePath%>">
    <!-- jsp文件头和头部 -->
    <%@ include file="../admin/top.jsp"%>
    </head>
    <body>
      <div class="container-fluid" id="main-container">
        <div id="page-content" class="clearfix">
          <div class="row-fluid">
            <div class="row-fluid">
              <div id="container" style="min- 700px; height: 500px"></div>
              <div id="main" style=" 100%; height: 500px"></div>
              <!-- 报表  -->
              <table id="table_report"
                class="table table-striped table-bordered table-hover center">
                <thead>
                  <tr class="center">
                    <th>序号</th>
                    <th>网元</th>
                    <th>采集粒度</th>
                    <th>收到消息(receive)</th>
                    <th>获取数据(process 2)</th>
                    <th>转换数据(process 3)</th>
                    <th>存储数据(process 5)</th>
                    <th>入库完成(process 7)</th>
                    <th>总时间</th>
                    <th class="center">错误信息</th>
                  </tr>
                </thead>
                <tbody>
                  <!-- 开始循环 -->
                  <c:choose>
                    <c:when test="${not empty resultList}">
                      <c:forEach items="${resultList}" var="result" varStatus="res">
                        <tr class="center">
                          <td class='center' style=" 30px;">${res.index+1}</td>
                          <td class="center"><a
                            href="task/pm_detail.do?pm_id=${PM_RESULT_ID} }">${result.NEID}</a></td>
                          <td class="center">${result.TIME_SPAN}</td>
                          <td class="center"><a style="cursor: pointer;"
                            target="mainFrame"
                            onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=1')">${result.RECEIVE_REPORT_MSG_TIME}</a></td>
                          <td class="center"><a style="cursor: pointer;"
                            target="mainFrame"
                            onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=2')">${result.PROCESS_GET_FILE_TIME}</a></td>
                          <td class="center"><a style="cursor: pointer;"
                            target="mainFrame"
                            onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=3')">${result.PROCESS_PARSE_TIME}</a></td>
                          <td class="center"><a style="cursor: pointer;"
                            target="mainFrame"
                            onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=5')">${result.PROCESS_STORE_TIME}</a></td>
                          <td class="center"><a style="cursor: pointer;"
                            target="mainFrame"
                            onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_detail.do?step=7')">${result.PROCESS_FINISH_TIME}</a></td>
                          <td style=" 60px;" class="center">${result.TOTAL_TIME}</td>
                          <td style=" 60px;" class="center"><a
                            style="cursor: pointer;" target="mainFrame"
                            onclick="result(${result.PM_RESULT_ID},${res.index+1},'task/pm_reslut_log.do?')">查看日志</a></td>
                        </tr>
                      </c:forEach>
                    </c:when>
                    <c:otherwise>
                      <tr class="main_info">
                        <td colspan="100" class="center">没有相关数据</td>
                      </tr>
                    </c:otherwise>
                  </c:choose>
                </tbody>
              </table>
              </form>
            </div>
    
    
            <!-- PAGE CONTENT ENDS HERE -->
          </div>
          <!--/row-->
    
        </div>
        <!--/#page-content-->
      </div>
      <!--/.fluid-container#main-container-->
    
    
      <!-- 引入 -->
      <script type="text/javascript">window.jQuery || document.write("<script src='static/js/jquery-1.9.1.min.js'>x3C/script>");</script>
      <script src="static/js/bootstrap.min.js"></script>
      <script src="static/js/ace-elements.min.js"></script>
      <script src="static/js/ace.min.js"></script>
      <!-- 引入 -->
    
    
    
      <script type="text/javascript">
            {
            $(top.hangge());
            
            //检索
            function search(){
                top.jzts();
                $("#Form").submit();
            }
            
            
            //删除
            function del(taskId){
                if(confirm("确定要删除?")){ 
                    top.jzts();
                    var url = '<%=basePath%>task/delete.do?taskId='+taskId;
                    $.get(url,function(data){
                        /* nextPage(${page.currentPage}); */
                    });
                }
            }
            </script>
    
      <script type="text/javascript">
            
            //全选 (是/否)
            function selectAll(){
                 var checklist = document.getElementsByName ("ids");
                   if(document.getElementById("zcheckbox").checked){
                   for(var i=0;i<checklist.length;i++){
                      checklist[i].checked = 1;
                   } 
                 }else{
                  for(var j=0;j<checklist.length;j++){
                     checklist[j].checked = 0;
                  }
                 }
            }
    
            
            
            //批量操作
            function makeAll(msg){
                
                if(confirm(msg)){ 
                    
                        var str = '';
                        for(var i=0;i < document.getElementsByName('ids').length;i++)
                        {
                              if(document.getElementsByName('ids')[i].checked){
                                  if(str=='') str += document.getElementsByName('ids')[i].value;
                                  else str += ',' + document.getElementsByName('ids')[i].value;
                              }
                        }
                        if(str==''){
                            alert("您没有选择任何内容!"); 
                            return;
                        }else{
                            if(msg == '确定要删除选中的数据吗?'){
                                top.jzts();
                                $.ajax({
                                    type: "POST",
                                    url: '<%=basePath%>task/deleteAll.do?tm='+new Date().getTime(),
                                    data: {DATA_IDS:str},
                                    dataType:'json',
                                    //beforeSend: validateData,
                                    cache: false,
                                    success: function(data){
                                         $.each(data.list, function(i, list){
                                                /* nextPage(${page.currentPage}); */
                                         });
                                         }
                                });
                            }
                        }
                }
            
            //导出excel
            function toExcel(){
                window.location.href='<%=basePath%>task/excel.do';
            }
            
            //查看报表
            function result(id,number,url){
                    top.mainFrame.tabAddHandler(id,"节点详细-"+number,url);
                if(url != "druid/index.html"){
                    jzts();
                }
            }
            </script>
    
    <script type="text/javascript">
            var myChart;
      myChart = echarts.init(document.getElementById('main'));
      
      
      var legendDate="";
    var series="";
    var ser="";
    var legend="";
    var option={};
     $.ajax({
          type: "post",
          async: false, //同步执行
          url: "",
          dataType: "json", //返回数据形式为json
          success: function (result) {
             
          },
          error: function (errorMsg) {
                 legendDate = ["2014","2015","2016"];
                 series =  [ { "name":"2014", "type":"bar", "data":[51, 2, 43],"len":"中国"} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4] ,"len":"美国"},{ "name":"2016", "type":"bar", "data":[5, 20, 40],"len":"英国"}];
                 ser = [ { "name":"2014", "type":"bar", "data":[51, 2, 43]} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4]},{ "name":"2016", "type":"bar", "data":[5, 20, 40]}];
                 legend = ["中国","美国","德国"];
           optionSeries();
           for(i=0;series.length>i;i++){
           option.series[i]=series[i];
           }
                 
          }
      });
      
      
     function optionSeries(){
      option = {
        title: {
            text: '性能数据采集入库效率趋势图'
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: legendDate
        }, 
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            boundaryGap: [0, 0.01]
        },
        yAxis: {
            type: 'category',
            data: legend
        },
        series: [ ]
    };
     }
     
    
     //通过Ajax获取数据
     
    
      myChart.setOption(option);
        </script>
    
      <script type="text/javascript">
      var legendDate="";
      var series="";
      var ser="";
      var legend="";
      var option={};
      function opSeries(){
        option ={
              title: {
                        text: '性能数据采集到入库关键节点处理效率报表'
                    },
                    xAxis: { 
                        title: {
                            text: '网元采集粒度'
                        }, 
                        categories: legendDate  
                    },
                    yAxis: {
                        title: {
                            text: '关键节点处理时间 (分钟)'
                        },
                        plotLines: [{
                            value: 0,
                             1,
                            color: '#808080'
                        }]
                    },
                    legend: {
                        layout: 'vertical',
                        align: 'right',
                        verticalAlign: 'middle',
                        borderWidth: 0
                    },                                                                 
                    tooltip: {                                                         
                        valueSuffix: ' 分钟'                                       
                    },                                                                 
                    plotOptions: {                                                     
                        bar: {                                                         
                            dataLabels: {                                              
                                enabled: true                                          
                            }                                                          
                        }                                                              
                    },                                                                
                    credits: {                                                         
                        enabled: false                                                 
                    },
                    series: []
          }
      }
      
      $(function () {
        $.ajax({
            type: "post",
            async: false, //同步执行
            url: "",
            dataType: "json", //返回数据形式为json
            success: function (result) {
               
            },
            error: function (errorMsg) {
                   legendDate = ["2014","2015","2016"];
                   series =  [ { "name":"2014", "type":"bar", "data":[51, 2, 43],"len":"中国"} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4] ,"len":"美国"},{ "name":"2016", "type":"bar", "data":[5, 20, 40],"len":"英国"}];
                   ser = [ { "name":"2014", "type":"bar", "data":[51, 2, 43]} ,{ "name":"2015", "type":"bar", "data":[55, 36, 4]},{ "name":"2016", "type":"bar", "data":[5, 20, 40]}];
                   legend = ["中国","美国","德国"];
                   //showChart();
             opSeries(); 
             for(i=0;series.length>i;i++){
                console.log("highchart循环内i的值:"+i);
                option.series[i]=series[i];
                console.log("option2.series["+i+"]--------"+"series["+i+"]:"+series[i]);
             }
            }
        }); 
        $("#container").highcharts(option); 
      });
      </script>
      <style type="text/css">
    li {
      list-style-type: none;
    }
    </style>
      <ul class="navigationTabs">
        <li><a></a></li>
        <li></li>
      </ul>
    </body>
    </html>
     
  • 相关阅读:
    简洁的JS代码片段
    1020. 飞地的数量
    Celery分布式任务队列
    C# 之 OpenFileDialog的使用
    Toad for SQL Server 优化记录
    go windows 后台运行
    Pytorch源代码完全解析S1
    Mybatis Plus动态代理源码分析
    Python常用脚本
    CocosCreator基于jenkins自动构建
  • 原文地址:https://www.cnblogs.com/onetwo/p/5622014.html
Copyright © 2020-2023  润新知