ECharts + jsp 图表
...
<%@ 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 图表的更多相关文章
- Echarts导出为pdf echarts导出图表(包含背景)
Echarts好像是只支持png和jpg的导出,不支持pdf导出.我就想着只能够将png在后台转为pdf了. 首先介绍一下jsp界面的代码. var thisChart = echarts.init( ...
- ECharts数据图表系统? 5分钟上手!
目录: 前言 简介 方法一:模块化单文件引入(推荐) 方法二:标签式单文件引入 [前言] 最近在捣鼓各种插件各种框架,发现这个ECharts还是比较不错的,文档也挺全的,还是中文的,给大家推荐一下. ...
- knockout+echarts实现图表展示
一.需要学习的知识 knockout, require, director, echarts, jquery.简单的入一下门,网上的资料很多,最直接就是进官网校习. 二.效果展示 三.require的 ...
- Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距
Echarts调整图表上下左右的间距,Echarts调整柱状图左右的间距 >>>>>>>>>>>>>>>> ...
- echarts使用技巧(一)echarts的图表自适应resize问题、单选、缩放等
这些东西要是有精力和时间可以通读echarts文档,里面都有配置详细介绍.该博客只是把自己使用echarts遇到的问题记录下,并不全,加深印象,抛砖引玉而已,完整学习的请移步官方文档 1.legend ...
- echarts的图表根据父容器大小的改变而改变(弹窗easy-ui的window窗口)
1.echarts的图表只绘制一次,所以要想大小随着父容器变化就得调方法重新绘制.所以把绘制图表的方法提出来. <div class="echart"> <div ...
- echarts 实战 : 图表竖着或横着是怎样判定的?
这个问题比较简单. echarts 的图表默认是竖着的. 只要 xAxis 和 yAxis 互换,竖着的图就变成了横着的图了. 所以我们可以可以写一个xy轴互换的方法. reverseXYAxis = ...
- ECharts开源图表使用方法简单介绍
ECharts图表是基于Canvas,纯Javascript图表库,基于BSD开源协议,官网地址:http://echarts.baidu.com/index.html 需要先下载插件:https:/ ...
- ECharts JavaScript图表库 ECharts
ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图.值 ...
随机推荐
- 【MySQL】MySQL进阶(外键约束、多表查询、视图、备份与恢复)
约束 外键约束 外键约束概念 让表和表之间产生关系,从而保证数据的准确性! 建表时添加外键约束 为什么要有外键约束 -- 创建db2数据库 CREATE DATABASE db2; -- 使用db2数 ...
- Ueditor Version 1.4.3.3 SSRF
点以前挖的洞.Ueditor是支持获取远程图片,较为经典的进行限制url请求,但是可以通过DNS重绑定绕过其验证. 代码分析 一般请求的url如下,其中source为数组,值为图片地址: /edito ...
- 如何发现 Kubernetes 中服务和工作负载的异常
大家好,我是来自阿里云的李煌东,今天由我为大家分享 Kubernetes 监控公开课的第二节内容:如何发现 Kubernetes 中服务和工作负载的异常. 本次分享由三个部分组成: 一.Kuberne ...
- Serverless:这真的是未来吗?(一)
原文 | https://www.pulumi.com/blog/is_serverless_the_future_part_1/ 作者 | Lee Briggs & Piers Karsen ...
- Winfrom窗体初始化和窗体Load方法前后
运行结果为 [窗体初始化之前!]>[窗体初始化!]>[窗体Load!]
- Java(34)IO流之字符流
作者:季沐测试笔记 原文地址:https://www.cnblogs.com/testero/p/15228453.html 博客主页:https://www.cnblogs.com/testero ...
- kviy TextInput 触发事件
from kivy.uix.widget import Widget from kivy.app import App from kivy.lang import Builder Builder.lo ...
- 第0次 Beta Scrum Meeting
本次会议为Beta阶段第0次Scrum Meeting会议 会议概要 会议时间:2021年5月27日 会议地点:「腾讯会议」线上进行 会议时长:1小时 会议内容简介:本次会议为Beta阶段启程会议,主 ...
- Go 里的超时控制
前言 日常开发中我们大概率会遇到超时控制的场景,比如一个批量耗时任务.网络请求等:一个良好的超时控制可以有效的避免一些问题(比如 goroutine 泄露.资源不释放等). Timer 在 go 中实 ...
- 使用spire.doc导出支持编辑Latex公式的标准格式word
背景 之前有的教辅标注需求,在导出题库的时候希望顺便导出可以查看word,方便线下预览成品效果,因为只是用来预览并且为了沿用前端的样式,当时方案就是直接生成html,写个word的文件头,这样就可以用 ...