echarts程式碼記錄
阿新 • • 發佈:2018-11-15
頁面 :
<!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"></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>