echarts代码记录

编程语言 2018-11-15 14:51:42 阅读次数: 0

页面 ： 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head th:include="include/syshead :: commonHead('访客进出统计')">
</head>
<body>
<div class="panel-style panel-top panel-no-shadow" style="overflow: hidden;">
	<div class="page-title-box">
		<a class="page-title">
			<i class="iconfont font-page-icon-size system-color">&#xe61c;</i>
			<span class="font-page-title-size">访客进出统计</span>
		</a>
	</div>
    <div id="collapseTable" class="panel-collapse collapse in">
		<div class="panel panel-style">
		    <div class="col-sm-2" >
			 	<br/>
	            <div class="col-sm-12" id="div">
	            	<label class="">分布方式:</label>
	            	<select class="form-control" id="select" onchange = "change()">
				        <option value="year">年</option>
				        <option value="month">月</option>
				        <option value="day">日</option>
				    </select>
	                <label class="">日期:</label>
	                <input id="year" class="form-control times" placeholder="选择日期"/>
	                <input id="month" style="display: none;" class="form-control times" placeholder="选择日期"/>
	                <input id="day" style="display: none;" class="form-control times" placeholder="选择日期"/>
	             </div>
			 </div>
		 <div class="col-sm-8" >
		 	<div id = "echartsDiv" style="width: 900px;height:400px;"></div>
		 </div>
		</div>
	</div>
</div>
</body>
<script th:src="@{/js/modules/report/report_fangke_status.js}"></script>
<!-- echarts主题 -->
<!-- <script th:src="@{/js/echarts/theme/dark.js}"></script>
<script th:src="@{/js/echarts/theme/vintage.js}"></script> -->
</html>

js :

$(function(){
	init(new Date().getFullYear(),"月份","月","year");
	initYear();
	initMonth();
	initDay();
});

function change(){
	$(".times").hide();
	var val = $("#select").val();
	if(val=="year"){
		$("#year").show();
	}else if(val=="month"){
		$("#month").show();
	}else{
		$("#day").show();
	}
}

function initYear(){
	$('#year').datetimepicker({  
	    startView: 'decade',  
	    minView: "decade",  
	    format: 'yyyy',  
	    maxViewMode: 2,  
	    minViewMode:2,  
	    autoclose: true,
	    language:  'zh-CN',
	}).on('changeDate',function(ev){
		var year = $('#year').val();
		init(year,"月份","月","year");
	});
}


function initMonth(){
	$('#month').datetimepicker({  
		startView: 'year',  
	    minView: "year",  
	    format: 'yyyy-mm',  
	    maxViewMode: 2,  
	    minViewMode:2,  
	    autoclose: true,
	    language:  'zh-CN',
	}).on('changeDate',function(ev){
		var year = $('#month').val();
		init(year,"日","","month");
	});
}

function initDay(){
	$('#day').datetimepicker({  
		minView: "month", //选择日期后，不会再跳转去选择时分秒 
	    language:  'zh-CN',
	    format: 'yyyy-mm-dd',
	    todayBtn:  1,
	    autoclose: 1,
	}).on('changeDate',function(ev){
		var year = $('#day').val();
		init(year,"小时","","day");
	});
}

function init(value,hangdanwei,danwei,url){
	$.ajax({
		url : baseURL + "report/"+ url,
		data : {
			value : value
		},
		success : function(r) {
			initEcharts(r,hangdanwei,danwei);
		}
	});
}

function initEcharts(data,hangdanwei,danwei){
	var laber = [];
	var jinru = [];
	var chuqu = [];
	var weichu = [];
	for (var i = 0; i < data.jinru.length; i++) {
		laber[i] = data.jinru[i].laber;
		jinru[i] = data.jinru[i].count;
		chuqu[i] = data.chuqu[i].count;
		weichu[i] = data.weichu[i].count;
	}
    var myChart = echarts.init(document.getElementById('echartsDiv'));
    var option = {
        title: {
            text: '访客进出统计',
            x:'center'
        },
        legend: {
        	type: 'scroll',
	        orient: 'vertical',
	        right: 5,
	        top: 30,
	        bottom: 20,
            data:['进入人数','出去人数','未出人数']
        },
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b}"+danwei+": {c} (人/次)"
        },
        toolbox: {
            feature: {
                magicType: {show: true, type: ['line', 'bar']},
                saveAsImage: {show: true}
            }
        },
        xAxis: {
            data: laber,
            name: hangdanwei,
            axisLabel: {
                formatter: '{value} '+danwei
            }
        },
        yAxis: {
            name: '访问次数',
            axisLabel: {
                formatter: '{value} 次'
            }
        },
        series: [{
            name: '进入人数',
            type: 'bar',
            data: jinru,
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },{
        	name: '出去人数',
            type: 'bar',
            data: chuqu,
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        },{
        	name: '未出人数',
            type: 'bar',
            data: weichu,
            markLine : {
                data : [
                    {type : 'average', name: '平均值'}
                ]
            }
        }]
    };
    myChart.setOption(option);
}

impl : 

package com.xhbhsl.contractcycle.modules.report.service.impl;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Collections;
import java.util.Comparator;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.xhbhsl.contractcycle.modules.report.dao.CountValueDao;
import com.xhbhsl.contractcycle.modules.report.entity.CountValue;
import com.xhbhsl.contractcycle.modules.report.service.CountValueService;
import com.xhbhsl.contractcycle.system.entity.SysDept;
import com.xhbhsl.contractcycle.system.entity.SysUser;
import com.xhbhsl.contractcycle.system.service.SysDeptService;
import com.xhbhsl.contractcycle.system.service.SysUserService;

@Service
public class CountValueServiceImpl implements CountValueService {

	private static List<String> MONTH = null;

	private static List<String> DAY = null;

	private static List<String> HOUR = null;

	@Autowired
	private CountValueDao countValueDao;

	@Autowired
	private SysDeptService sysDeptService;

	@Autowired
	private SysUserService sysUserService;

	public CountValueServiceImpl() {
		MONTH = setSum(MONTH, 12);
		HOUR = setSum(HOUR, 24);
	}

	// 查询年度访问量
	@Override
	public List<CountValue> getList(Map<String, String> map) {
		List<CountValue> arr = countValueDao.getList(map);
		return setValue(arr, MONTH);
	}

	@Override
	public List<Map<String, String>> getCountList(String deptId, String type) {
		List<Map<String, String>> reList = new ArrayList<>();
		Map<String, List<String>> selectmps = new HashMap<>();
		// 0部门
		if ("0".equals(type)) {
			Map<String, Object> selectmap = new HashMap<>();
			selectmap.put("PARENT_ID", deptId);
			selectmap.put("DEL_FLAG", "0");
			List<SysDept> deptList = sysDeptService.selectByMap(selectmap);
			for (SysDept sysDept : deptList) {
				List<String> deptIdList = sysDeptService.getSubDeptIdLists(sysDept.getDeptId());
				List<String> userIdList = sysUserService.UserListBydeptIds(deptIdList);
				if (deptIdList.size() > 0) {
					selectmps.put("deptIds", deptIdList);
				}
				if (userIdList.size() > 0) {
					selectmps.put("userIds", userIdList);
				}
				Integer sum = countValueDao.getDeptAndUserSum(selectmps);
				Map<String, String> map = new HashMap<>();
				map.put("name", sysDept.getName());
				map.put("value", String.valueOf(sum));
				reList.add(map);
			}
			// 1用户
		} else {
			List<String> arr = new ArrayList<>();
			arr.add(deptId);
			List<SysUser> userIdList = sysUserService.selectByPid(arr);
			if (null != userIdList && userIdList.size() > 0) {
				for (SysUser sysUser : userIdList) {
					arr.clear();
					arr.add(sysUser.getUserId());
					selectmps.put("userIds", arr);
					Integer sum = countValueDao.getDeptAndUserSum(selectmps);
					Map<String, String> map = new HashMap<>();
					map.put("name", sysUser.getUsername());
					map.put("value", String.valueOf(sum));
					reList.add(map);
				}
			}
		}
		return reList;
	}

	@Override
	public Map<String, List<CountValue>> year(String value) {
		Map<String, List<CountValue>> map = new HashMap<>();
		Map<String, String> selectMap = new HashMap<>();
		selectMap.put("value", value);
		List<CountValue> jinquarr = setValue(countValueDao.year(selectMap), MONTH);
		map.put("jinru", jinquarr);
		selectMap.put("endtime", "1");
		List<CountValue> chuquarr = setValue(countValueDao.year(selectMap), MONTH);
		map.put("chuqu", chuquarr);
		map.put("weichu", getWeiChuList(jinquarr, chuquarr, MONTH));
		return map;
	}

	@Override
	public Map<String, List<CountValue>> month(String value) {
		DAY = setSum(DAY, forDate(value));
		Map<String, List<CountValue>> map = new HashMap<>();
		Map<String, String> selectMap = new HashMap<>();
		selectMap.put("value", value);
		List<CountValue> jinquarr = setValue(countValueDao.month(selectMap), DAY);
		map.put("jinru", jinquarr);
		selectMap.put("endtime", "1");
		List<CountValue> chuquarr = setValue(countValueDao.month(selectMap), DAY);
		map.put("chuqu", chuquarr);
		map.put("weichu", getWeiChuList(jinquarr, chuquarr, DAY));
		return map;
	}

	@Override
	public Map<String, List<CountValue>> day(String value) {
		Map<String, List<CountValue>> map = new HashMap<>();
		Map<String, String> selectMap = new HashMap<>();
		selectMap.put("value", value);
		List<CountValue> jinquarr = setValue(countValueDao.day(selectMap), HOUR);
		map.put("jinru", jinquarr);
		selectMap.put("endtime", "1");
		List<CountValue> chuquarr = setValue(countValueDao.day(selectMap), HOUR);
		map.put("chuqu", chuquarr);
		map.put("weichu", getWeiChuList(jinquarr, chuquarr, HOUR));
		return map;
	}

	// 根据进去人数和出去人数获取未出人数。
	public List<CountValue> getWeiChuList(List<CountValue> jinquarr, List<CountValue> chuquarr, List<String> month) {
		List<CountValue> arr = new ArrayList<>();
		for (int i = 0; i < month.size(); i++) {
			if (jinquarr.get(i).getCount() == 0) {
				arr.add(new CountValue(0, jinquarr.get(i).getLaber()));
			} else {
				arr.add(new CountValue(jinquarr.get(i).getCount() - chuquarr.get(i).getCount(),
						jinquarr.get(i).getLaber()));
			}
		}
		return arr;
	}

	// 根据日期字符串获取当月有多少天
	public int forDate(String value) {
		Date date = new Date();
		SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM");
		try {
			date = sdf.parse(value);
			return getMonthLastDay(date);
		} catch (ParseException e) {
			e.printStackTrace();
			return 30;
		}
	}

	// 补足缺失的日期，并顺序排序。
	public List<CountValue> setValue(List<CountValue> arr, List<String> month) {
		for (String mon : month) {
			CountValue val = new CountValue(0, mon);
			if (!arr.contains(val)) {
				arr.add(val);
			}
		}
		Collections.sort(arr, new Comparator<CountValue>() {
			@Override
			public int compare(CountValue o1, CountValue o2) {
				return o1.getLaber().compareTo(o2.getLaber());
			}
		});
		return arr;
	}

	// 获取某月有多少天
	public int getMonthLastDay(Date date) {
		Calendar calendar = Calendar.getInstance();
		calendar.setTime(date);
		return calendar.getActualMaximum(Calendar.DAY_OF_MONTH);
	}

	// 根据大小获取01,02,03样式的排序。
	public List<String> setSum(List<String> arr, int sum) {
		arr = new ArrayList<>();
		for (int i = 1; i <= sum; i++) {
			if (i >= 10) {
				arr.add(String.valueOf(i));
			} else {
				arr.add("0" + String.valueOf(i));
			}
		}
		return arr;
	}
}

XML:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.xhbhsl.contractcycle.modules.report.dao.CountValueDao">

	<resultMap id="BaseResultMap" type="com.xhbhsl.contractcycle.modules.report.entity.CountValue">
		<result column="count" property="count" javaType="java.lang.Integer" />
		<result column="laber" property="laber" />
	</resultMap>

	<select id="getList" parameterType="map" resultMap="BaseResultMap">
		SELECT 
		  COUNT(*) AS count ,
		  DATE_FORMAT(r.entryTime, '%m') AS laber
		FROM
		  tab_fangke_visit_record r 
		WHERE
			1=1
			<if test="full_year != null and full_year.trim() != ''">
				AND DATE_FORMAT(r.entryTime, '%Y') = #{full_year} 
			</if>
		GROUP BY DATE_FORMAT(r.entryTime, '%m')
	</select>
	
	<select id="year" parameterType="map" resultMap="BaseResultMap">
		SELECT 
		  COUNT(*) AS count ,
		  DATE_FORMAT(r.entryTime, '%m') AS laber
		FROM
		  tab_fangke_visit_person r
		WHERE
			1=1
			AND DATE_FORMAT(r.entryTime, '%Y') = #{value}
			<if test="endtime != null and endtime.trim() != ''">
				AND r.outTime is not null  
			</if>
		GROUP BY DATE_FORMAT(r.entryTime, '%m')
	</select>
	
	<select id="month" parameterType="map" resultMap="BaseResultMap">
		SELECT 
		  COUNT(*) AS count,
		  DATE_FORMAT(r.entryTime, '%d') AS laber
		FROM
		  tab_fangke_visit_person r 
		WHERE 
			1=1
			AND DATE_FORMAT(r.entryTime, '%Y-%m') = #{value}
			<if test="endtime != null and endtime.trim() != ''">
				AND r.outTime is not null  
			</if>
		GROUP BY DATE_FORMAT(r.entryTime, '%d')
	</select>
	
	<select id="day" parameterType="map" resultMap="BaseResultMap">
		SELECT 
		  HOUR(r.entryTime) AS laber,
		  COUNT(*) AS count
		FROM
		  tab_fangke_visit_person r 
		  WHERE 
			1=1
			AND DATE_FORMAT(r.entryTime, '%Y-%m-%d') = #{value}
			<if test="endtime != null and endtime.trim() != ''">
				AND r.outTime is not null  
			</if> 
		GROUP BY HOUR(r.entryTime) 

	</select>
	
	<select id="getDeptAndUserSum" parameterType="map" resultType="int">
		SELECT 
		  COUNT(*)
		FROM
		  tab_fangke_visit_record r 
		WHERE
			1=0 
			<if test="deptIds != null">
				or r.visitDeptId in 
				<foreach item="deptIds" collection="deptIds" open="(" separator="," close=")">
		            #{deptIds}
		        </foreach>
			</if>
			<if test="userIds != null">
		        or r.visitUserId in
		        <foreach item="userIds" collection="userIds" open="(" separator="," close=")">
		            #{userIds}
		        </foreach>
		    </if>
	</select>
	
</mapper>

猜你喜欢

转载自blog.csdn.net/kkkk6547/article/details/84101310
今日推荐
技术解析 GPT-4o：即时语音交互的突破与 GenAI 发展策略
开源大模型与闭源大模型
微信小程序授权登录获取用户的openid
亿级流量系统架构设计与实战
人工智能时代的程序设计教学与课程设计
纽交所技术问题致伯克希尔 (BRK.A) 显示跌近 100%
探索 api.maynor1024.live：一站式 AI 服务平台
AI一键去衣技术：窥见深度学习在图像处理领域的革命(最后有彩蛋)
艾体宝案例 | 使用Redis和Spring Ai构建rag应用程序
Apple M1 vs 高通8Gen2 vs Apple A12Z各方面比较
【升职加薪必备架构图】Springboot学习路线汇总_springboot四层架构流程图
与Apollo共创生态：Apollo7周年大会自动驾驶生态利剑出鞘
周排行
tensorflow 笔记：二（ 北大）
fork函数详解
unity单利模板
mac下的特殊键位指引（转自apple）
c语言入门-注释
Python--多任务[线程，进程，协程]
深度对抗学习在图像分割和超分辨率中的应用
【转】【Maven】Project configuration is not up-to-date with pom.xml错误解决方法
基本数据类型与常量池
部署自己的Intell项目的经历
每日归档
更多
2024-06-07(0)
2024-06-06(0)
2024-06-05(0)
2024-06-04(10)
2024-06-03(52)
2024-06-02(4)
2024-06-01(60)
2024-05-31(47)
2024-05-30(4)
2024-05-29(65)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022