Echarts+Java实现根据开始时间和结束时间按周或者按月查询

最新推荐文章于 2024-06-22 17:46:34 发布

谢同学谢童鞋

最新推荐文章于 2024-06-22 17:46:34 发布

阅读量8.7k

点赞数 2

分类专栏：前端 Java

本文链接：https://blog.csdn.net/LuuvyJune/article/details/84586415

版权

本文介绍了一个使用Echarts、jQuery、jsp和My97日历插件，结合Java SpringMVC后端实现的按周、按月查询功能。用户可以选择开始和结束时间，查询结果以Echarts图表展示。按周查询时，起始日期必须为周一，按月查询则只显示月份。查询过程包括前端表单提交、后端控制器处理、SQL查询以及数据转换为JSON。

摘要由CSDN通过智能技术生成

前端：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>
        <

最低0.47元/天解锁文章

谢同学谢童鞋

关注

2
点赞
踩
28

收藏

觉得还不错? 一键收藏
9
评论
Echarts+Java实现根据开始时间和结束时间按周或者按月查询

前端：jquery,jsp,html，日历插件：my97 后端 java springmvc该实现方式代码写的很low，欢迎提出意见改正！实现效果：（1）按周查询，选择日期只能从周一开始。这是日历控件my97控制实现的，可到其官网查询使用文档（2）按月查询，只看到月份（3）按周查询效果图：横坐标是第几周（4）按月查询结果图：横坐标是几月1、引入ec...
复制链接

扫一扫

专栏目录