...

<%@ page language="java"  pageEncoding="UTF-8"%>

<%@page import="com.e6soft.base.util.WebUtil"%>

<%@page import="com.e6soft.base.util.SysUtil"%>

<%@page import="com.e6soft.base.util.DateUtil"%>

<%@page import="com.e6soft.project.workDate.GrzyActionServices"%>

<%@page import="java.util.Calendar"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

    // 登录人 id

String fileSaverId = java.net.URLDecoder.decode(SysUtil.getUserId(),"UTF-8");

Calendar date = Calendar.getInstance();

int year = date.get(Calendar.YEAR); // 年份

int yf = date.get(Calendar.MONTH); // 月份

yf +=1;

%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <meta http-equiv="content-type" content="text/html; charset=UTF-8" />

        <script src="<%=basePath %>common/boot.web.miniui.js" type="text/javascript"></script>

        <!--  <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>-->

        <script src="<%=basePath %>common/js/echarts.js" type="text/javascript"></script>

        <script src="<%=basePath %>common/jquery/1.9.1/jquery.js" type="text/javascript"></script>

        <script src="<%=basePath %>common/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

    </head>

    <body>

        <div style="width:100%;height:100%;">

            <div class="mini-toolbar" style="border-top:0;border-bottom:0;padding:0px;">

                <table class="form-table" border="0" cellpadding="1" cellspacing="2">

                    <tr>

                        <td class="form-label" style="width:60px;">查询时间</td>

                        <td style="width:350px">

                            <input id="time1" name="time1" class="mini-datepicker" value="<%=year+"-"+yf+"-01" %>"/> -

                            <input id="time2" name="time2" class="mini-datepicker" value="<%=DateUtil.today() %>"  />

                        </td>

                        <td colspan=2 align=right>

                            <a class="mini-button" iconCls="icon-search" onclick="search()">查询</a>

                            <a class="mini-button" iconCls="icon-arrow_rotate_clockwise" onclick="reset()">重置</a>

                        </td>

                    </tr>

                </table>

            </div>

            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

            <div id="main" style="width: 100%;height:98%;"></div>

        </div>

    </body>

    <script type="text/javascript">

    mini.parse();

        //var main = mini.get("main");

        $(function() {

            search();

        });

        function search() {

            var time1 = mini.get("time1").getText();

            var time2 = mini.get("time2").getText();

                $.post("<%=basePath %>grzy/workStat.do", {

                    Id: "<%=fileSaverId%>",

                    time1:time2,

                    time1:time2

                }, function(result) {

                    clire(result);

                })

        }

        function clire(data) {

            /*[{"rc1":0,"ybglsp":0,"zbdlwtsp":0,"zbglsp":0,"zjxxsp":0,"xtyh_id":"admin","bm_id":"402881e563f834030163f8382fb90007","wjdaxxsp":0,"xmjsxxsp":0,

            "lxspsp":0,"htxxsp":0,"rn":1,"xmpbsp":0,"xtyh_xm":"admin","rc0":0}]*/

            //转换成JSON

            //console.log(data);

            var json = JSON.parse(data);

            //console.log("++++++++++++++++++++++++++++++++++++++");

            /*"xtyh_xm" 姓名,"rc0" 会议,"rc1" 出差,"lxspsp" 立项审批,"zbglsp" 招标审批,"xmpbsp" 抽取评标专家审批,"zbdlwtsp" 招标委托代理审批,

                "htxxsp" 合同审批,"zjxxsp" 送审文件审批,"wjdaxxsp" 文件定案审批,"xmjsxxsp" 结算审批*/

            //var bm = json[0].bm_id; // 类型 number

            var hy = json[0].rc0; //

            var cc = json[0].rc1;

            var tj1 = json[0].lxspsp;

            var tj2 = json[0].zbglsp;

            var tj3 = json[0].xmpbsp;

            var tj4 = json[0].zbdlwtsp;

            var tj5 = json[0].htxxsp;

            var tj6 = json[0].zjxxsp;

            var tj7 = json[0].wjdaxxsp;

            var tj8 = json[0].xmjsxxsp;

            var cs = 88;

            //alert(typeof hy);

            //console.log(json);

            /*

          for(var i in json){//遍历packJson 数组时，i为索引

           alert(json[i].bm_id);

        } */

            // 基于准备好的dom，初始化echarts实例

            var myChart = echarts.init(document.getElementById('main'));

            // 指定图表的配置项和数据

            var option = {

                title: {

                    text: '个人工作统计'

                },

                tooltip: {},

                legend: {

                    data: ['事项']

                },

                xAxis: {

                    data: ["会议", "出差 ", "立项审批", " 招标审批", " 抽取评标专家审批", "招标委托代理审批", "合同审批", "送审文件审批", "文件定案审批", "结算审批"]

                },

                yAxis: {},

                series: [{

                    name: '事项',

                    type: 'bar', // 型

                    // hy,cc,tj1,tj2,tj3,tj4,tj5,tj6,tj7,tj8,tj9,tj10,tj11,tj12,tj13,tj14,tj15,tj16

                    data: [hy, cc, tj1, tj2, tj3, tj4, tj5, tj6, tj7, tj8],

                    //5, 20, 36, 10, 10, 20,7,8,9,10,11,12,13,14,15,16,17,18],

                    // 普通样式。

                    itemStyle: {

                        // 点的颜色。

                        color: '#4D4DFF'

                    }

                }]

            };

            // 使用刚指定的配置项和数据显示图表。

            myChart.setOption(option)

        };

        //search();

    </script>

</html>

ECharts + jsp 图表的更多相关文章

  1. Echarts导出为pdf echarts导出图表（包含背景）

    Echarts好像是只支持png和jpg的导出,不支持pdf导出.我就想着只能够将png在后台转为pdf了. 首先介绍一下jsp界面的代码. var thisChart = echarts.init( ...

  2. ECharts数据图表系统？ 5分钟上手！

    目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...

  3. knockout+echarts实现图表展示

    一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...

  4. Echarts调整图表上下左右的间距，Echarts调整柱状图左右的间距

    Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...

  5. echarts使用技巧（一）echarts的图表自适应resize问题、单选、缩放等

    这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...

  6. echarts的图表根据父容器大小的改变而改变（弹窗easy-ui的window窗口）

    1.echarts的图表只绘制一次,所以要想大小随着父容器变化就得调方法重新绘制.所以把绘制图表的方法提出来. <div class="echart"> <div ...

  7. echarts 实战 : 图表竖着或横着是怎样判定的？

    这个问题比较简单. echarts 的图表默认是竖着的. 只要 xAxis 和 yAxis 互换,竖着的图就变成了横着的图了. 所以我们可以可以写一个xy轴互换的方法. reverseXYAxis = ...

  8. ECharts开源图表使用方法简单介绍

    ECharts图表是基于Canvas,纯Javascript图表库,基于BSD开源协议,官网地址:http://echarts.baidu.com/index.html 需要先下载插件:https:/ ...

  9. ECharts JavaScript图表库 ECharts

    ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...

随机推荐

  1. CentOS7 Docker容器无法ping通宿主机ip问题解决记录

    Docker服务部署启动容器发现docker容器内访问宿主机IP不通,于是进入容器内ping宿主机IP,发现无法ping通,容器IP为172.17.0.2,于是继续ping172.17.0.1也不通, ...

  2. 数据库语法整理及WAF绕过方式

    关系型数据库 关系型数据库:指采用了关系模型来组织数据的数据库. 直白的说就是:关系型数据库最典型的数据结构是表,由二维表及其之间的联系所组成的一个数据组织 当今主流的关系型数据库有:Oracle,M ...

  3. C语言数组实现三子棋

    C语言实现三子棋(通过数组) 需要包含的头文件 #include <stdio.h> #include <stdlib.h> #include <time.h> 创 ...

  4. 数据结构与算法——克鲁斯卡尔（Kruskal）算法

    目录 应用场景-公交站问题 克鲁斯卡尔算法介绍 克鲁斯卡尔算法图解 克鲁斯卡尔算法分析 如何判断回路? 代码实现 无向图构建 克鲁斯卡尔算法实现 获取一个点的终点解释 应用场景-公交站问题 某城市新增 ...

  5. asp.net core 集成swagger ui

    什么是Swagger? 说swagger 之前,我们先说一下OpenApi 规范. OpenApi 是一种和语言无关的用于描述RESTAPIs 接口功能的一种规范,对RESTAPIs 接口的描述包括: ...

  6. Java程序的执行过程

    Java程序的执行过程 编译器将 Java 源代码编译成字节码class文件 类加载到 JVM 里面后,执行引擎把字节码转为可执行代码 执行的过程,再把可执行代码转为机器码,由底层的操作系统完成执行

  7. MySQL MHA 运行状态监控

    一 项目描述 1.1 背景 MHA(Master HA)是一款开源的 MySQL 的高可用程序,它为 MySQL 主从复制架构提供了 automating master failover 功能.MHA ...

  8. 初入CTF（封神榜第一关）

    注:网址中的%20是空格的意思 1判断是否存在注入点 构造?id=1 and 1=1(不报错) 构造?id=1 and 1=2(报错或者不显示内容) 报错说明and后面的语句被识别 2判断回显字段的长 ...

  9. 【Spring】IoC容器 - Spring Bean作用域Scope（含SpringCloud中的RefreshScope ）

    前言 上一章学习了[依赖来源],本章主要讨论SpringBean的作用域,我们这里讨论的Bean的作用域,很大程度都是默认只讨论依赖来源为[Spring BeanDefinition]的作用域,因为在 ...

  10. Coursera Deep Learning笔记 逻辑回归典型的训练过程

    Deep Learning 用逻辑回归训练图片的典型步骤. 笔记摘自:https://xienaoban.github.io/posts/59595.html 1. 处理数据 1.1 向量化(Vect ...