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

时间:2024-05-20 13:53:22

前端:jquery,jsp,html,日历插件:my97   后端 java springmvc

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

实现效果:

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

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

(2)按月查询,只看到月份

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

(3)按周查询效果图:横坐标是第几周

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

(4)按月查询结果图:横坐标是几月

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

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">

     //触发事件,改变按周或者按月查询,日历跟着变
     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, HttpServletRequest request, HttpServletResponse response, Model model) throws ParseException {
        User user = UserUtils.getUser();
        performance.setDepId(user.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);
            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);
            }

            int num1 = Integer.parseInt(performance.getStartDate().substring(5,7));
            int num2 = Integer.parseInt(performance.getEndDate().substring(5,7));
            for(int i =num1;i<=num2;i++){
                nlist.add(String.valueOf(i));
            }
            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}]}]