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

r囧r小猫 2024-03-25 20:05 141阅读 0赞

前端：[jquery][],jsp,html，日历插件：my97 后端 java springmvc

该实现方式代码写的很low，欢迎提出意见改正！

实现效果：

（1）按周查询，选择日期只能从周一开始。 这是日历控件my97控制实现的，可到其官网查询使用文档

![75f4fdd39562631a1ab7f41471d68fb7.png][]

（2）按月查询，只看到月份

![0a65e1f186b40814c3bf40dd197cd4cb.png][]

（3）按周查询效果图：横坐标是第几周

![065ee15f2a92dc4eff2e027bf40ecbab.png][]

（4）按月查询结果图：横坐标是几月

![e225d0ab41a4c40ffedf2564e6867791.png][]

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" style="width: 700px;height:400px;"></div>
    </body>
     
    </html>

3.js代码，这里没有使用ajax异步请求，因为根据需求初始化就需要查询数据，并且和页面上的提交按钮走的方法一致

4、java代码，controller层

@RequiresPermissions("bespeakweb:bespeakPerformance:view")
        @RequestMapping(value = {"list", ""})
        public String list(Performance performance, Model model) throws ParseException {
            //条件部门查询
            if (performance.getOffice() != null) {
                performance.setDepId(performance.getOffice().getId());
            }
            //初始化默认查询所有部门的
            Map map = new HashMap();
            List nlist = new ArrayList();
            //默认按周查询, 设置开始日期为当前日期的前一个月
            if (performance.getUnit() == null || "".equals(performance.getUnit()))
                performance.setUnit("0");
            //按周
            if ("0".equals(performance.getUnit())) {
                SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
                Calendar c = Calendar.getInstance();
                //初始化
                if ("".equals(performance.getStartDate()) || performance.getStartDate() == null) {
                    Date date = new Date();
                    String str1 = formatter.format(date);
                    //结束时间为当前
                    performance.setEndDate(str1);
     
                    c.setTime(date);
                    c.add(Calendar.MONTH, -1);
                    String mon = formatter.format(c.getTime());
                    performance.setStartDate(mon);
                }
     
                //计算两个日期之间相差几周formance.getStartDate()
    //            long from = formatter.parse(performance.getStartDate()).getTime();
    //            long to = formatter.parse(performance.getEndDate()).getTime();
    //            long n = (to - from) / (1000 * 3600 * 24 * 7);
                c.setTime(formatter.parse(performance.getStartDate()));
    //            int a = c.get(Calendar.WEEK_OF_YEAR);
    //            c.setTime(formatter.parse(performance.getEndDate()));
    //            int b = c.get(Calendar.WEEK_OF_YEAR);
     
                Calendar c2 = Calendar.getInstance();
                c2.setTime(formatter.parse(performance.getEndDate()));
     
     
                while (c.getTime().getTime() <= c2.getTime().getTime()) {
                    nlist.add(DateUtils.formatDate(c.getTime(), "yyyy") + "-" + c.get(Calendar.WEEK_OF_YEAR)+"周");
                    c.add(Calendar.WEEK_OF_YEAR, +1);
                }
     
    //           for (int i = a; i < b; i++) {.
    //               nlist.add(String.valueOf(i + 1));
    //           }
                List<Map<String, String>> weekBookingCount = bespeakPerformanceWebService.getWeekBookingCount(performance);
                List<Map<String, String>> weekDealCount = bespeakPerformanceWebService.getWeekDealCount(performance);
                map.put("booking", weekBookingCount);
                map.put("deal", weekDealCount);
     
            } else if ("1".equals(performance.getUnit())) {//按月
                if ("".equals(performance.getStartDate()) || performance.getStartDate() == null) {
                    Date date = new Date();
                    SimpleDateFormat formatter = new SimpleDateFormat("yyyy-MM");
                    String str1 = formatter.format(date);
                    //结束时间为当前月
                    performance.setEndDate(str1);
                    //开始时间为当前月的前一个月
                    Calendar c = Calendar.getInstance();
                    c.setTime(date);
                    c.add(Calendar.MONTH, -1);
                    String mon = formatter.format(c.getTime());
                    performance.setStartDate(mon);
                }
                Calendar c = Calendar.getInstance();
                c.setTime(DateUtils.parseDate(performance.getStartDate(), "yyyy-MM"));
                Calendar c2 = Calendar.getInstance();
                c2.setTime(DateUtils.parseDate(performance.getEndDate(), "yyyy-MM"));
    //            int num1 = Integer.parseInt(performance.getStartDate().substring(5,7));
    //            int num2 = Integer.parseInt(performance.getEndDate().substring(5,7));
                while (c.getTime().getTime() <= c2.getTime().getTime()) {
                    nlist.add(DateUtils.formatDate(c.getTime(), "yyyy-MM")+"月");
                    c.add(Calendar.MONTH, +1);
                }
                List<Map<String, String>> mounthBookingCount = bespeakPerformanceWebService.getMounthBookingCount(performance);
                List<Map<String, String>> mounthDealCount = bespeakPerformanceWebService.getMounthDealCount(performance);
                map.put("booking", mounthBookingCount);
                map.put("deal", mounthDealCount);
     
            }
     
            System.out.println(JSONArray.fromObject(map));
            model.addAttribute("list", JSONArray.fromObject(map));
            model.addAttribute("nlist", JSONArray.fromObject(nlist));
            return "modules/bespeakweb/bespeakPerformance";
        }
    }

5、此处JSONArray.fromObject在net.sf.json-lib包中，maven pom.xml中代码：

6、查询sql，使用mybatis框架：

<select id="getMounthBookingCount" resultType="java.util.Map">
            SELECT
            count(d.id) AS "bookingNum",substr(a.booking_date, 0, 7) as "month"
            FROM bespeak_booking a
            left join bespeak_rel b on a.id=b.booking_id
            left join bespeak_citizen d on b.c_id=d.id
            <where>
                <if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
                    AND substr(a.booking_date, 0, 7) between #{startDate} and #{endDate}
                </if>
            
     
            </where>
            group by substr(a.booking_date, 0, 7)
            order by substr(a.booking_date, 0, 7)
        </select>
     
        <select id="getMounthDealCount" resultType="java.util.Map">
            SELECT
            count(a.id) AS "dealNum",substr(a.booking_date, 0, 7) as "month"
            FROM bespeak_booking a
            <where>
                a.booking_state = '1'
                <if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
                    AND substr(a.booking_date, 0, 7) between #{startDate} and #{endDate}
                </if>
            
     
            </where>
            group by substr(a.booking_date, 0, 7)
            order by substr(a.booking_date, 0, 7)
        </select>
     
     
        <select id="getWeekBookingCount" resultType="java.util.Map">
            SELECT
            count(d.id) AS "bookingNum",to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw') as "week"
            FROM bespeak_booking a
            left join bespeak_rel b on a.id=b.booking_id
            left join bespeak_citizen d on b.c_id=d.id
            <where>
                <if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
                    AND a.booking_date between #{startDate} and #{endDate}
                </if>
                
                    
                
     
            </where>
            group by to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw')
            order by to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw')
        </select>
     
        <select id="getWeekDealCount" resultType="java.util.Map">
            SELECT
            count(a.id) AS "dealNum",to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw') as "week"
            FROM bespeak_booking a
            <where>
                a.booking_state = '1'
                <if test="startDate != null and startDate != '' and endDate != null and endDate != ''">
                    AND a.booking_date between #{startDate} and #{endDate}
                </if>
                
                    
                
     
            </where>
            group by to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw')
            order by to_char(TO_DATE(booking_date, 'YYYY-MM-DD'), 'yyyy-iw')
        </select>

7、查询的结果转换为json，格式如下：

[{"booking":[{"week":"2018-48","bookingNum":13}],"deal":[{"week":"2018-48","dealNum":2}]}]

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

[jquery]: https://so.csdn.net/so/search?q=jquery&spm=1001.2101.3001.7020
[75f4fdd39562631a1ab7f41471d68fb7.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/c2aadc3cb4234dc79f4e2f0fced99d44.png
[0a65e1f186b40814c3bf40dd197cd4cb.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/b317767b5a9f462fad694ebf7c2cc48f.png
[065ee15f2a92dc4eff2e027bf40ecbab.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/8ae067b7f72a455b8bd313a3709a7e7d.png
[e225d0ab41a4c40ffedf2564e6867791.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/25/1be469ef6f7344f49ab83293c34ce16d.png
[https_blog.csdn.net_LuuvyJune_article_details_84586415]: https://blog.csdn.net/LuuvyJune/article/details/84586415