Echarts - js-20160611

<%@ 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-width: 700px; height: 500px"></div>

                    <div id="main" style="width: 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="width: 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="width: 60px;" class="center">${result.TOTAL_TIME}</td>

                                            <td style="width: 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={};

var taskId=${pd.taskId};

 $.ajax({

      type: "post",

      async: false, //同步执行

      url: "task/result_charts",

      data: {taskId:taskId},

      dataType: "json", //返回数据形式为json

      success: function (result) {

          console.log("test:"+result);

          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":"英国"}];

          legend = ["中国","美国","德国"];

             optionSeries();

             for(i=0;series.length>i;i++){

             option.series[i]=series[i];

             }

      },

      error: function (errorMsg) {

      }

  });

 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">

           $(document).ready(function() {

                    var options = {

                          chart: {

                                       renderTo: 'container', //DIV容器ID

                                       type: 'bar'//报表类型

                                     },

                            //报表名称

                            title:{

                                     text:'测试'

                                    },

                              //补充说明

                      subtitle: {

                                      text: '报表说明'

                                     },

                                     //x轴显示内容

                                     xAxis: {

                                           categories: []

                                                 },

                          yAxis: {

                                       min: 0,

                                       title: {

                                               text: '单位(mm)'

                                               }

                                        },

                                        tooltip: {

                                            enabled: false,

                                            formatter: function() {

                                                return '<b>'+ this.series.name +'</b><br/>'+this.x +': '+ this.y +'分钟';

                                            }

                                        },

                                          plotOptions: {

                                              line: {

                                                  dataLabels: {

                                                      enabled: true

                                                  },

                                                  enableMouseTracking: false

                                              }

                                          },

                                //数据来源(多个对比的)

                                 series: [{},{},{},{}]

                                };

                               //json url 地址这里我使用的servlet

                                var url =  "task/test_charts";

                                $.getJSON(url,function(data) {

                                       var i,len=data.length;

                                        for( i=0;i<len;i++){

                                          //赋值 series

                                          options.series[i].data = data[i].list;

                                          options.series[i].name = data[i].name;

                                           //对报表X轴显示名称赋值

                                           options.xAxis.categories[i]=data[i].year;

                                      }

                                   var chart = new Highcharts.Chart(options);

                             });

                      });  

  </script>

    <style type="text/css">

li {

    list-style-type: none;

}

</style>

    <ul class="navigationTabs">

        <li><a></a></li>

        <li></li>

    </ul>

</body>

</html>

Echarts - js-20160611的更多相关文章

echarts3 -arcgis echarts&period;js修改
在echarts.js中修改修改 clone 方法其中 source instance of Array 修改为Object.prototype.toString.call(source) ...
前端数据可视化echarts&period;js使用指南
一.开篇首先这里要感谢一下我的公司,因为公司需求上面的新颖(奇葩)的需求,让我有幸可以学习到一些好玩有趣的前端技术,前端技术中好玩而且比较实用的我想应该要数前端的数据可视化这一方面,目前市面上的数据 ...
echarts&period;js 做图表的插件
<scripttype="text/javascript"src="{uiurl()}echarts/echarts.js"></script ...
echarts&period;js（图表插件）2&period;0版会导致 ZeroClipboard&period;js（复制插件）失效，3&period;0版未知。
解决方法:ZeroClipboard.js先于echarts.js加载.
图表工具--- ECharts&period;js学习（一）简单入门
ECharts.js学习(一) 在项目开发的时候,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库.具体有哪几种可以看: 前端开发者常用的9个JavaScript图表库 EChar ...
关于echarts&period;js 柱形图
echarts.js官网: http://www.echartsjs.com/index.html 这是我所见整理最详细echarts.js 柱形图博客: https://blog.csdn.net/ ...
前端数据可视化echarts&period;js
一.echarts.js的优势与总体情况 echarts.js作为国内的IT三巨头之一的百度的推出一款相对较为成功的开源项目,总体上来说有这样的一些优点 1.容易使用 echarts.js的官方文档比 ...
ECharts&period;js学习（一）简单入门
EChart.js 简单入门最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比 ...
ECharts JS应用：图表页面实现
因为要统计数据进行图表展示,所以就简单学习了 ECharts JS 的应用.它是一个纯Javascript图库,它依赖于一个轻量级的Canvas库 ZRender,并提供直观.生动.交互式和高度可定制 ...
echarts&period;js应用之map
最近项目中用到了echarts.js中的map,我画了一个简版的案例,如下所示: 效果图: 主要代码如下: <!DOCTYPE html> <html lang="en&q ...

随机推荐

jQuery源码分析之=&gt&semi;jQuery的定义
最近写前段的代码比较多,jQuery是用的最多的一个对象,但是之前几次看了源码,都没搞清楚jQuery是怎么定义的,今天终于看明白怎么回事了.记录下来,算是一个新的开始吧. (文中源码都是jQuery ...
JAVA中通过代码操作PC内容进行功能的实现
1.添加计划任务,用户项目中需要添加定时提醒功能: 计划任务只需要写一个继承java.util.TimerTask的类,覆盖其中的run方法即可,例如: import java.util.*; p ...
LINQ简介和LINQ to SQL语句之Where
LINQ是Language Integrated Query的简称,它是集成在.NET编程语言中的一种特性.已成为编程语言的一个组成部分,在编写程序时可以得到很好的编译时语法检查,丰富的元数据,智能感 ...
i386 和amd64 的意思
首先可以简化一个概念,i386=Intel 80386.其实i386通常被用来作为对Intel(英特尔)32位微处理器的统称. Windows NT类系统的安装盘上,通常i386是其根上的一个文件夹, ...
Eclipse Tips
一.取消拼写检查 Window -> Preferences -> General -> Editors -> Text Editors -> Spelling -&gt ...
Docker - Docker基础讲义
Docker Docker - 官网 Docker - Hub GitHub - Docker Docker中文社区虚拟化技术硬件级虚拟化(hardware-level-virtualizatio ...
【English】十四、英语
一.英语是词法(词) + 语法一个个拥有词法的词,就是材料.通过语法的规则将这些词合理组合排列起来.然后,就可以干很多事了.
基于C&num;的socket编程的TCP异步实现
一.摘要本篇博文阐述基于TCP通信协议的异步实现. 二.实验平台 Visual Studio 2010 三.异步通信实现原理及常用方法 3.1 建立连接在同步模式中,在服务器上使用Accept方法 ...
SyntaxError&colon; missing ) after argument list
消息语法错误: 参数列表后面缺少 ) 错误类型 SyntaxError. 什么地方出错了? 有一个函数在调用时出现错误.这可能是一个错误,丢失运算符或者转义字符等. 示例因为没有使用 ”+“ 操作 ...
MFC更换窗口图标
https://blog.csdn.net/deep_kang/article/details/72722692: MFC更换图标,图像默认为MFC,主要步骤有三步. 第一步找到一张图片(坑点: ...