本文介绍了一个使用Echarts、jQuery、jsp和My97日历插件，结合Java SpringMVC后端实现的按周、按月查询功能。用户可以选择开始和结束时间，查询结果以Echarts图表展示。按周查询时，起始日期必须为周一，按月查询则只显示月份。查询过程包括前端表单提交、后端控制器处理、SQL查询以及数据转换为JSON。
前端：jquery,jsp,html，日历插件：my97 后端 java springmvc
该实现方式代码写的很low，欢迎提出意见改正！
实现效果：
（1）按周查询，选择日期只能从周一开始。 这是日历控件my97控制实现的，可到其官网查询使用文档
（2）按月查询，只看到月份
（3）按周查询效果图：横坐标是第几周
（4）按月查询结果图：横坐标是几月
1、引入echarts.js或者echarts.min.js
2、html代码：采用表单提交
<html>
<head>
<title>绩效管理</title>
<meta name="decorator" content="default"/>
<script type="text/javascript" src="${ctxStatic}/echarts/echarts.js"></script>
</head>
<body>
<ul class="nav nav-tabs">
<li class="active"><a href="${ctx}/bespeakweb/bespeakPerformanceweb/list">绩效管理</a></li>
</ul>
<form:form id="searchForm" modelAttribute="performance" action="${ctx}/bespeakweb/bespeakPerformanceweb/list"
method="post" class="breadcrumb form-search">
<input id="pageNo" name="pageNo" type="hidden" value="${page.pageNo}"/>
<input id="pageSize" name="pageSize" type="hidden" value="${page.pageSize}"/>
<ul class="ul-form">
<li><label>开始日期：</label>
<input name="startDate" type="text" id="BeginTime" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="${performance.startDate}"
onclick="WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,maxDate:'#F{$dp.$D(\'EndTime\')||\'%y-%M-%d/\'}'});"/>
</li>
<li><label>结束日期：</label>
<input name="endDate" type="text" id="EndTime" readonly="readonly" maxlength="20" class="input-medium Wdate"
value="${performance.endDate}"
onclick="WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,minDate:'#F{$dp.$D(\'BeginTime\')}',maxDate:'%y-%M-%d'});"/>
</li>
<li style="padding-left: 18px"><label>查询方式：</label>
<select name="unit" id="selectdep" style="width: 92px;" onchange="editDate()">
<option value="0" <c:if test="${performance.unit=='0'}">selected</c:if>>按周</option>
<option value="1" <c:if test="${performance.unit=='1'}">selected</c:if>>按月</option>
</select>
</li>
<li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
<li class="clearfix"></li>
</ul>
</form:form>
<sys:message content="${message}"/>
<div id="main" 
最低0.47元/天 解锁文章
扫一扫
2514
到【灌水乐园】发言
