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

已于 2023-03-17 15:59:18 修改
阅读量963 收藏 5
点赞数 1
文章标签： java javascript 前端 Powered by 金山文档
于 2023-03-17 15:59:06 首次发布
原文链接：https://blog.csdn.net/LuuvyJune/article/details/84586415
版权

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

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

<script type="text/javascript">
     editDate();
     //触发事件，改变按周或者按月查询，日历跟着变
     function editDate(){
        var s = $("#selectdep").val();
        if(s=="0"){
            $("#BeginTime").attr("onclick","WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,maxDate:'#F{$dp.$D(\\'EndTime\\')||\\'%y-%M-%d/\\'}'});");
            $("#EndTime").attr("onclick","WdatePicker({disabledDays:[2,3,4,5,6,0],dateFmt:'yyyy-MM-dd',isShowClear:true,maxDate:'#F{$dp.$D(\\'EndTime\\')||\\'%y-%M-%d/\\'}'});");
        }else{
            $("#BeginTime").attr("onclick","WdatePicker({dateFmt:'yyyy-MM',isShowClear:true,maxDate:'#F{$dp.$D(\\'EndTime\\')||\\'%y-%M-%d/\\'}'});");
            $("#EndTime").attr("onclick","WdatePicker({dateFmt:'yyyy-MM',isShowClear:true,maxDate:'#F{$dp.$D(\\'EndTime\\')||\\'%y-%M-%d/\\'}'});");
        }
     }
 
    var time = ${nlist};    //类别数组（实际用来盛放X轴坐标值）
    var series1 = []; //booking
    var series2 = []; //deal
    var jsonList = ${list};
    var mounthBooking = [];
    var mounthDeal = [];
    var weekBooking = [];
    var weekDeal =[];
    var bool = false;
    console.log(jsonList);
    console.log(jsonList[0].booking);
 
    if(jsonList[0].booking.length!=0 && jsonList[0].deal.length!=0){
        if(jsonList[0].booking[0].week==undefined){
            /**
             * 月预约
             */
            for(var i=0;i<jsonList[0].booking.length;i++){
                mounthBooking.push(jsonList[0].booking[i].month.substr(5));
                console.log(mounthBooking);
            }
 
            /**
             * 月处理
             *
             */
            for(var i=0;i<jsonList[0].deal.length;i++){
                mounthDeal.push(jsonList[0].deal[i].month.substr(5));
                console.log(mounthDeal);
            }
            var c = 0;
            for (var j = 0; j < time.length; j++) {
                //月预约
                if (mounthBooking.indexOf(time[j]) > -1) {
                    series1.push(jsonList[0].booking[c].bookingNum);
                    c++;
                } else {
                    series1.push(0);
                }
            }
            var d=0;
            for (var j = 0; j < time.length; j++) {
                //月处理
                if (mounthDeal.indexOf(time[j]) > -1) {
                    series2.push(jsonList[0].deal[d].dealNum);
                    d++;
                } else {
                    series2.push(0);
                }
 
            }
 
        }else{
            /**
             * 周预约
             */
            for(var i=0;i<jsonList[0].booking.length;i++){
                weekBooking.push(jsonList[0].booking[i].week.substr(5));
                console.log(weekBooking);
            }
            /**
             * 周处理
             */
            for(var i=0;i<jsonList[0].deal.length;i++){
                weekDeal.push(jsonList[0].deal[i].week.substr(5));
                console.log(weekDeal);
            }
 
            var a = 0;
            for (var j = 0; j < time.length; j++) {
                //周预约
                if (weekBooking.indexOf(time[j]) > -1) {
                    series1.push(jsonList[0].booking[a].bookingNum);
                    a++;
                } else {
                    series1.push(0);
                }
            }
            var b=0;
            for (var j = 0; j < time.length; j++) {
                //周处理
                if (weekDeal.indexOf(time[j])>-1) {
                    series2.push(jsonList[0].deal[b].dealNum);
                    a++;
                } else {
                    series2.push(0);
                }
            }
 
        }
    }
 
    var myChart = echarts.init(document.getElementById('main'));
 
    var option = {
        title: {
            text: '绩效管理'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['实际预约人数', '已处理']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: time
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '实际预约人数',
                type: 'line',
                stack: '总量1',
                data: series1
            },
            {
                name: '已处理',
                type: 'line',
                stack: '总量2',
                data: series2
            }
        ]
 
    };
 
    myChart.setOption(option);
 
</script>

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中代码：

        <dependency>
            <groupId>net.sf.json-lib</groupId>
            <artifactId>json-lib</artifactId>
            <version>2.4</version>
            <classifier>jdk15</classifier>
        </dependency>

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>
        <!--    <if test="depId != null and depId != ''">
                AND a.depId = #{depId}
            </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>
        <!--    <if test="depId != null and depId != ''">
                AND a.dep_Id = #{depId}
            </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>
            <!--<if test="depId != null and depId != ''">-->
                <!--AND a.depId = #{depId}-->
            <!--</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>
            <!--<if test="depId != null and depId != ''">-->
                <!--AND a.depId = #{depId}-->
            <!--</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}]}]

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

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

姓王名礼
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
echarts 统计图周月切换_用echarts做报表按统计时间数据记录
weixin_39791386的博客
12-19 2032
自己也来整理一下，好记好消化↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑↓↑按日查询：createtime：数据表里面的时间字段t_voipchannelrecord ：表名SELECT COUNT(*),DATE(CreateTime) FROM t_voipchannelrecord WHERE YEAR(CreateTime)='2016' GROUP BY DAY(CreateTime...
echarts实现时间甘特图、时间切片、状态切片图效果
最新发布
a497314013的博客
05-21 689
以时间甘特图的形式显示某天24小时状态切片图，空白时间轴使用其他背景颜色填充。坐标轴固定0-24h。
非常完美Java实现年、月、日、周访问量统计
06-15
非常完美Java实现年、月、日、周访问量统计、欢迎jia3456.com大家下载！
echarts图表页面，sql 按日，周，月统计
weixin_43190879的博客
08-14 5666
首先先说需求，页面echarts图形控件，需要根据时间跨度间隔不同，页面不知如何实现不同时间跨度，所以用sql实现， 数据库表接口，日期字段是day 格式是vachar(2),统计字段userAdd 如果你表内时间字段格式是date类型的就不用to_date(day,‘YYYY-MM-dd’)转换了， 1.按天统计sql语句很好写 传入参数，开始时间startDate，结束时间endDate,统计...
java查询当月及上月_java获取本月开始时间和结束时间、上个月第一天和最后一天的时间以及当前日期往前推一周、一个月...
weixin_30984001的博客
02-23 767
importjava.text.SimpleDateFormat;importjava.util.Calendar;importjava.util.Date;importjava.util.GregorianCalendar;importorg.junit.Test;public classTestDateUtil {//1、获取当月第一天@Testpublic voidtestForDate()...
JAVA基础：输入月份查询季节。
qq_53951746的博客
10-03 1079
输入月份，输出月份所属季节： ​ import java.util.Scanner; /*输入月份，输出月份所属季节 *3,4,5为春季 *6,7,8为夏季 *9,10,11为秋季 *12,1,2为冬季 */ public class Demo5{ public static void main(String [] args){ System.out.println("请输入月份："); Scanner input = new Scanner(System.in); int a = i
java 日、周、月统计
Maxianghua95的博客
11-16 1095
日、周、月统计
1【源码】数据可视化：基于 Echarts +Java SpringBoot 实现的动态实时大屏范例-互联网企业数据分析
03-18
在本文中，我们将深入探讨如何使用Echarts与Java SpringBoot框架来实现一个动态实时的数据可视化大屏，这对于互联网企业的数据分析至关重要。数据可视化是现代商业智能的核心组成部分，它可以帮助企业快速理解海量...
简易的echarts+java的可视化项目
06-16
**简易的Echarts+Java可视化项目详解** 在现代软件开发中，数据可视化是不可或缺的一部分，它可以帮助用户更直观地理解复杂的数据。本项目结合了Echarts库与Java技术，为开发者提供了一个简单易用的解决方案，用于...
Echarts+ajax+java+mysql实现饼图+折线图+柱状图
07-13
在这个项目中，Echarts与AJAX和Java后端结合，利用MySQL数据库来实现动态的数据展示。接下来，我们将详细讨论这个实现过程中的关键知识点。 1. **Echarts图表库**： Echarts是一个基于SVG/VML/Canvas的高性能、跨...
3【源码】数据可视化：基于 Echarts + Java SpringBoot 实现的动态实时大屏范例-物联网平台大屏.zip
03-22
YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码） https://yydatav.blog.csdn.net/article/details/123652970 另有：YYDatav的数据可视化大屏《精彩案例汇总》（Python&Echarts源码） ...
java实现日期控件
07-09
java实现日期控件，日期控件是每个项目里，必须应用的控件，在这里给大家上传一个好用的日期控件。
自定义日历控件 支持左右无限滑动 周月切换 标记日期显示 自定义显示效果跳转到指定日期
12-04
日历样式完全自定义，拓展性强 左右滑动切换上下周月，上下滑动切换周月模式 抽屉式周月切换效果 标记指定日期（marker） 跳转到指定日期
Echarts+ajax+java+mysql实现饼图+折线图+柱状图-Java代码类资源
02-23
在这个Java代码类资源中，开发者利用Echarts与AJAX、Java以及MySQL数据库相结合，实现了动态从数据库获取数据并实时更新图表的功能。以下是关于这些技术的详细解释： 1. **Echarts**：Echarts是由百度开发的一款...
使用java实现年月日日期查询
weixin_35756624的博客
01-04 1489
在Java中可以使用 java.util.Calendar 类来实现年月日日期查询。 你可以使用 Calendar.getInstance() 方法获取当前日期，然后使用以下方法来获取年份、月份、日期： Calendar calendar = Calendar.getInstance();int year = calendar.get(Calendar.YEAR); int month = cal...
JAVA实现查询每月周一开始的时间段跨月
Java后端
09-11 476
public static void main(String[] args) { String date = "2020-09-01"; DateTime monthBegin = DateUtil.parseDate(date); DateTime monthEnd = DateUtil.endOfMonth(monthBegin); long days = DateUtil.between(monthBegin, monthEnd, D..
Java如何在MySql数据库中查找一年中每个月的数据
weixin_57228276的博客
02-22 767
上面查询的是2022年一月的数据,条数自己用arrayList封装的时候调用size方法就能得知数据的多少.上面必须得加上百分号(%),这个百分号表示查询含有2022开头的数据,后面无论是啥都会被查出来。
echarts图表按年月搜索筛选
ICode联盟
09-18 1659
echarts.js图表插件按年月搜索筛选功能示例。
【echarts样例】X轴为显示一周的时间轴
热门推荐
yapeee的博客
07-11 1万+
源码 代码片段： var data = [ {name:'"2018-07-05 18:00:29"', value:["2018-07-05 18:00:29", 37]}, {name:'2018-07-04 18:00:29', value:["2018-07-04 18:00:29", 36]}, {name:'2018-07-03 18:00:29', va...
echarts +java springboot 实现的动态实时下载
10-16
ECharts是一个强大的数据可视化库，而Spring Boot是一个快速构建Java应用程序的开发框架。它们结合使用可以实现动态实时下载功能。 首先，你可以使用Java的Spring Boot框架搭建一个Web应用程序。该应用程序可以提供前端页面以及后台服务接口。 接着，你可以使用ECharts来构建动态实时下载所需的图表。ECharts提供了丰富的图表类型，可以轻松地展示实时数据。 在后台服务接口中，你可以通过与数据库或其他数据源交互，实时获取最新数据并传递给前端页面。你可以使用定时任务或WebSocket等技术来定期或实时地更新数据。 在前端页面中，你可以使用ECharts的API来动态更新图表数据。将后台传递的实时数据通过ECharts的接口传递给图表对象，然后重新绘制图表即可实现动态实时下载的效果。 最后，你可以在前端页面中添加下载按钮，当用户点击下载按钮时，可以将当前图表的数据导出为Excel、CSV或其他格式的文件进行下载。 综上所述，使用ECharts和Java的Spring Boot框架可以实现动态实时下载的功能。通过后台服务接口获取实时数据，并通过ECharts的API实时更新图表数据，用户可以通过前端页面下载最新的图表数据。这样的实现能够满足用户对动态数据实时下载的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值