ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图， echarts3+ajax+json+SpringMVC+mybatis

用于统计的盒形图，用于地理数据可视化的地图、热力图、线图，

，多维数据可视化的平行坐标，还有用于 BI 的漏斗图，仪表盘，并且支持图与图之间的混搭。

官方网址：https://echarts.baidu.com/

ECharts

提供大量常用的数据可视化图表，底层基于ZRender（一个全新的轻量级canvas类库），创建了坐标系，图例，提示，工具箱等基础组件，并在此上构建出折线图（区域图）、柱状图（条状图）、散点图（气泡图）、饼图（环形图）、K线图、地图、力导向布局图以及和弦图，同时支持任意维度的堆积和多图表混合展现。

Echarts整合spring boot进行开发

一、开始前的准备

Echarts官网下载： https://echarts.baidu.com/download.html

二、开发流程

1、准备js文件

2、将js放到static资源文件夹下

3、前端页面模板，后端Controller模板、实体模板

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 2 <html xmlns:th="http://www.thymeleaf.org">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 5     <title>分析图表</title>
 6     <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon" />
 7     <script th:src="@{/js/jquery.js}"></script>
 8     <script th:src="@{/js/echarts.js}"></script>
 9 </head>
10 <body>
11 <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
12 <div id="main" style="width: 800px;height:400px;"></div>
13 <script type="text/javascript">
14     $(document).ready(function(){
15         // 基于准备好的dom，初始化echarts实例
16         var myChart = echarts.init(document.getElementById('main'));
17         //数据加载完之前先显示一段简单的loading动画
18         myChart.showLoading();
19         var names=[];    //横坐标数组（实际用来盛放X轴坐标值）
20         var values=[];    //纵坐标数组（实际用来盛放Y坐标值）
21         var year = [[${year}]];
22         $.ajax({
23             type : "post",
24             async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
25             url : "/es",    //请求发送到dataActiont处
26             data : {"year":year},
27             dataType : "json",        //返回数据形式为json
28             success : function(result) {
29                 //请求成功时执行该函数内容，result即为服务器返回的json对象
30                 if (result.code == 1) {
31                     myChart.hideLoading();    //隐藏加载动画
32                     for(var i=0;i<result.data.length;i++){
33                         names.push(result.data[i].name);
34                         values.push(result.data[i].num);
35                     }
36                     myChart.setOption({        //加载数据图表
37                         title: {
38                             text: year+'年度就业竞争力指数图'
39                         },
40                         dataset: {
41                             source: {
42                                 'product': names,
43                                 'amount': values,
44                                 'score': values
45                             }
46                         },
47                         grid: {},
48                         xAxis: {name: '分数'},
49                         yAxis: {type: 'category',
50                         name: '学院',
51                         data: names},
52                         series: [
53                             {
54                                 name: '分数',
55                                 type: 'bar',
56                                 encode: {
57                                     // Map the "amount" column to X axis.
58                                     x: 'amount',
59                                     // Map the "product" column to Y axis
60                                     y: 'product'
61                                 },
62                                 label: {
63                                     normal: {
64                                         show: true,
65                                         position: 'right',
66                                         textStyle: {
67                                             color: 'red'
68                                         }
69                                     }
70                                 },
71                                 data:values
72                             }
73                         ]
74                     });
75                 }else {
76                     alert(result.msg);
77                     window.close();
78                 }
79             },
80             error : function(errorMsg) {
81                 //请求失败时执行该函数
82                 alert("图表请求数据失败!");
83                 myChart.hideLoading();
84             }
85         });//end ajax
86     });
87 </script>
88 </body>
89 </html>

 1 @PostMapping(value = "/es")
 2 public Result allEchars(Integer year){
 3     List<Last> lastList = finalData(year);
 4     List<Echars> all = new ArrayList<>();
 5     for (int i = 0; i < lastList.size(); i++) {
 6         Echars e = new Echars();
 7         e.setName(lastList.get(i).getCollege());
 8         try {
 9             e.setNum(Double.parseDouble(lastList.get(i).getLastEmployment()));
10         }catch (NullPointerException e1){
11             return new Result(0,"该年度数据不全，无法进行分析");
12         }
13         all.add(e);
14     }
15     return new Result(1,"图表加载成功",all);
16 }
17 
18 
19 @GetMapping(value = "/e")
20 public ModelAndView echarts4(Integer year){
21     ModelAndView modelAndView = new ModelAndView();
22     modelAndView.setViewName("Echars");
23     modelAndView.addObject("year",year);
24     return modelAndView;
25 }

 1 package org.wlgzs.index_evaluation.pojo;
 2 
 3 
 4 import lombok.Data;
 5 
 6 
 7 /**
 8 * @author zsh
 9 * @company wlgzs
10 * @create 2019-04-01 9:06
11 * @Describe 图表测试类
12 */
13 @Data
14 public class Echars {
15     private String name;
16     private double num;
17 }

4、最终效果图

echarts3+ajax+json+SpringMVC+mybatis

最近使用的东西有点多，就不分开描述了，写在一起，也比较连贯

最近在写统计查询，所以用到了echarts3，用了几个小时看了下，还是不错的，主要准备好字符串，直接嵌入就可以

下面我描述下需求，这样在看代码还能有一些针对性

需求：实现对访问记录的统计，每天一个访问记录表，需要根据时间段进行查询（这里面就设计到联调查询），同时，在页面点击某一天的数据时，需要显示这一天每个时段的访问人数（这里面就有点意思了，用到了ajax+json）

好，先附一张截图

这就是最后显示的样子，下面来点实惠的，上代码~

我将按照前台到后台的顺序进行描述

1.首先是页面

<script src="${ctxStatic}/echarts/echarts.js" type="text/javascript"></script>

使用echarts，这是必须的

 1 <form:form id="searchForm" action="${ctx}/manage/main/visitTime" method="post" class="breadcrumb form-search">
 2         <ul class="ul-form" >
 3                 <li><label>访问时间：</label>
 4                     <fmt:parseDate value="${beginTime}" pattern="yyyy-MM-dd" var="beginTimeShow"/>
 5                     <fmt:parseDate value="${endTime}" pattern="yyyy-MM-dd" var="endTimeShow"/>
 6                     <input name="beginTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
 7                         value="<fmt:formatDate value="${beginTimeShow}" pattern="yyyy-MM-dd"/>"
 8                         onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,maxDate:'%y-%M-%d'});"/> - 
 9                     <input name="endTime" type="text" readonly="readonly" maxlength="20" class="input-medium Wdate"
10                         value="<fmt:formatDate value="${endTimeShow}" pattern="yyyy-MM-dd"/>"
11                         onclick="WdatePicker({dateFmt:'yyyy-MM-dd',isShowClear:false,maxDate:'%y-%M-%d'});"/>
12                 </li>
13                 <li class="btns"><input id="btnSubmit" class="btn btn-primary" type="submit" value="查询"/></li>
14                 <li class="clearfix"></li>
15             </ul>
16     </form:form>

根据时间段查询，这里面用到了fmt的标签，

fmt:parseDate 和 fmt:formatDate  的配合使用，在页面现实的时候还是不错的，这里时间控件用的是WdatePicker，引入也非常简单，这里就不赘述了

 1 <div class="container-fluid">
 2         <hr>
 3             <div class="row-fluid">
 4                 <div class="span6" align="center">
 5                     <div id="show" ></div>
 6                 </div>
 7                 <div class="span6" align="center">
 8                     <table id="contentTable" class="table table-striped table-bordered table-condensed" >
 9                         <thead>
10                             <tr>
11                                 <th width="20%">时间段</th>
12                                 <th width="20%">访问量</th>
13                                 <th width="20%">访问人数</th>
14                             </tr>
15                         </thead>
16                         <tbody id="target">
17                             <tr></tr>
18                         </tbody>
19                     </table>
20                 </div>
21             </div>
22 </div>


这部分是显示信息的主体部分，id是show的div，是用于显示折线图的目标div，下方的table，是根据选中的信息ajax动态显示每个时段信息的主体

 1 <script type="text/javascript">
 2 var show = echarts.init(document.getElementById('show'));
//点击事件是这样调用的，当时因为写这个点击事件，我可折腾了好久，写出来才发现，好简单有木有
 3 show.on("click",handleClick);
//option就是折线图的主体
 4 option = {
 5         title: {
 6             text: '访问时段统计'
 7         },
 8         tooltip: {
 9             trigger: 'axis'
10         },
11         legend: {
12             data:['访问人数']
13         },
14         grid: {
15             left: '3%',
16             right: '4%',
17             bottom: '15%',
18             containLabel: true
19         },
20         xAxis: {
21             type: 'category',
22             boundaryGap: false,
　　　　　　　　//这块的el就是在后台拼好的字符串，然后直接用于显示
23             data: [${period}],
　　　　　　　　　//这块有点意思的，是个小细节，因为显示的是时间，所以显示内容比较长，所以，我让他竖着显示，这样，在数据多的情况下，显示也很明朗了
24             axisLabel: {
25                 rotate: 90,
26            }
27         },
28         yAxis: {
29             type: 'value'
30         },
31         series: [
32             {
33                 name:'访问人数',
34                 type:'line',
35                 stack: '总量',　　　　　　　　　　　
36                 data:[${visitNumber}]
37             }
38         ]
39     };
40 
41 show.setOption(option);
//这块就是点击时间的function，注意，括号里要写param，不然你会崩溃的
42 function handleClick(param){
43     var current = param.name;//name获得是X轴的信息，data获得是Y轴的信息，这块当时也让老夫好找啊。。
　　　　//这块就是ajax的请求了，返回json，直接用each进行解析，append到目标显示主体，当然，记得append之前要html下，不然，后果你懂得
44     $.ajax({ 
45                type: "post", 
46                url: "${ctx}/manage/main/findVisitCurrentInfo", 
47                data:{current:current},
48                dataType: "json", 
49                success: function (data) { 
50                    $("#target").html("");
51                    $.each(data, function(commentIndex, comment){
52                       $("#target").append("<tr>"+"<td>"+comment['period']+"</td>"+
53                                                   "<td>"+comment['number']+"</td>"+
54                                                   "<td>"+comment['userNumber']+"</td>"+
55                                            "</tr>");
56                  });
57                }, 
58                error: function (XMLHttpRequest, textStatus, errorThrown) { 
59                        alert(errorThrown); 
60                } 
61        });
62 }
63 </script>


这部分js还是有点意思的~

下面就是java程序的入口了，Controller

 1 @RequestMapping(value = {"visitTime"})
 2     public String visitTime( HttpServletRequest request, HttpServletResponse response, Model model) {
 3         String beginTime = request.getParameter("beginTime");
 4         String endTime = request.getParameter("endTime");
 5         StringBuilder visitNumber = new StringBuilder();
 6         StringBuilder period = new StringBuilder();
 7         if(StringUtils.isNotBlank(beginTime) && StringUtils.isNotBlank(endTime)){
 8             LogVisit logVisit = new LogVisit();
 9             logVisit.setBeginVisittime(DateUtils.strToDate(beginTime,"yyyy-MM-dd"));
10             logVisit.setEndVisittime(DateUtils.strToDate(endTime,"yyyy-MM-dd"));
11             List<ShowVisitStatistics> list = logVisitService.findVisitInfo(logVisit);
12             for(ShowVisitStatistics statistics : list){
13                 visitNumber.append(statistics.getNumber() +",");
14                 period.append("\""+statistics.getPeriod() +"\"" +",");
15             }
16         }
17         model.addAttribute("beginTime", beginTime);
18         model.addAttribute("endTime", endTime);
19         model.addAttribute("visitNumber", visitNumber);
20         model.addAttribute("period", period);
21         return "modules/manage/visitTime";
22     }

这块是整理折线图显示数据，因为访问日志是每天一个表，所以，service中进行了连表

 1 private static String select = "SELECT count(id) AS 'number',date_format(visittime,'%Y-%m-%d') AS 'period' FROM t_log_visit";
 2     /**
 3      * 查询时间段内的数据
 4      * @param logVisit
 5      * @return
 6      */
 7     public List<ShowVisitStatistics> findVisitInfo(LogVisit logVisit){
 8         StringBuilder sql = new StringBuilder();
 9         sql.append("select b.number AS number,b.period AS period from (");
10         StringBuilder childSql = new StringBuilder();
11         String targetChildSql = "";
12         Calendar cal = Calendar.getInstance();
13         cal.setTime(logVisit.getBeginVisittime());
14         Date endData = logVisit.getEndVisittime();
　　　　　　//这里需要进行一个判断，因为你要知道，如果时间区间的结束时间是当天，当天的表还没有结转，所以只能连接未结转的表
15         if(!DateUtils.getDate().equals(endData)){
16             handelChildSql(endData, childSql, cal);
17             targetChildSql = childSql.substring(0, childSql.length()-9);
18         }else{
19             Calendar cal1 = Calendar.getInstance();
20             cal1.add(Calendar.DATE, -1);
21             endData = cal1.getTime();
22             handelChildSql(endData, childSql, cal);
23             targetChildSql = childSql.append("(" + select +")").toString();
24             
25         }
26         sql.append(targetChildSql);
27         sql.append(") b order by b.period");
28         return visitDao.findVisitInfo(sql.toString());//动态拼接好sql，直接传给mybatis
29     }
30     private void handelChildSql(Date endData,StringBuilder childSql, Calendar cal) {
31         while(cal.getTime().compareTo(endData)<=0){
32             childSql.append("(" + select +"_"+ DateUtils.formatDate(cal.getTime(), "yyyyMMdd")+")");
33             childSql.append("UNION ALL");//每次append之后，都要加一天
34             cal.add(Calendar.DAY_OF_MONTH,1);
35         }
36     }

service中的重点代码就是这样啦

1 <select id="findVisitInfo" parameterType="String" resultType="ShowVisitStatistics">
2         ${value}
3     </select>

直接传入字符串，这样写就足够了，很爽~这样的流程走下来，折线图所需要的信息，就已经收集好了，直接返回给页面解析，就能看到效果了
接下来，看下ajax这块

 1 @RequestMapping(value = {"findVisitCurrentInfo"},method = RequestMethod.POST)
 2     @ResponseBody
 3     public String findVisitCurrentInfo( HttpServletRequest request, HttpServletResponse response, Model model) {
 4         String current = request.getParameter("current");
 5         if(StringUtils.isNotBlank(current)){
 6             current = current.replaceAll("-", "");//因为我的表结构是table20160323的结构，所以我就直接格式化好直接传入了
 7             List<ShowVisitStatistics> list = logVisitService.findVisitCurrentInfo(current);
 8             if(list != null && list.size() > 0){
 9                 return JsonUtil.pojoToJson(list);
10             }
11         }
12         return null;
13     }

这部分比较简单，接下来就直接看mybatis文件了

 1 <select id="findVisitCurrentInfo" parameterType="String" resultType="ShowVisitStatistics">
 2         SELECT 
 3             a.hour as period, 
 4             ifnull(b.number,0) AS number ,
 5             ifnull(b.userNumber,0) AS userNumber
 6           FROM t_hour a
 7         LEFT JOIN  
 8         (SELECT 
 9             visittime ,
10             count(id) AS number,
11             count(distinct accountno) AS userNumber
12         FROM t_log_visit_${value} 
13         GROUP BY hour(visittime)
14         ) b
15          ON a.id = hour(b.visittime)
16         ORDER BY a.id
17     </select>

获得当天每个时段的人数，这里我只能借助辅助表了，新建一个t_hour的表，辅助查询，这里面的group by hour，有点意思，这比case when then else end 效率高一些，不然这块我就写哭了

mybatis说一下的是，$和 #的用法，前者传什么是什么，后者，就变成字符串了，一个小细节，group by 的时候，要记得用$哈
至此，统计查询模块就OK了
记录下来，为了方便之人，也给自己做个总结

posted on 2021-01-25 21:49 shuzihua 阅读(444) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

xinxi2010

ECharts 提供了常规的折线图、柱状图、散点图、饼图、K线图， echarts3+ajax+json+SpringMVC+mybatis

ECharts

Echarts整合spring boot进行开发

echarts3+ajax+json+SpringMVC+mybatis

导航