四步完成 echarts 条形、线形、饼形统计图（动态），包含mybatis → case when else end 语句的使用...

最新推荐文章于 2022-12-21 17:26:25 发布

weixin_30553065

最新推荐文章于 2022-12-21 17:26:25 发布

阅读量178

点赞数

文章标签： java javascript json ViewUI

原文链接：http://www.cnblogs.com/anpieBlog/p/8058079.html

版权

一、去Echarts引入JS 网址：http://echarts.baidu.com/download.html

echarts-all.js

二、下面这些是我实际用到的SQL，有几个地方也需要记一下，正好放在这儿了，查询结果一定是名称 and 值

 1 /*=============================主题====================================================
 2  已有全APP主题数量 时间段发布数量 select COUNT(id) from app_user_theme 
 3 
 4  1.发布主题数量前五的主题 select TABLE_A.themeName,TABLE_A.counts from 
 5 (select aut.themeId,aut.themeName,count(*) as counts from app_user_theme aut GROUP BY aut.themeId,aut.themeName)
 6 TABLE_A ORDER BY TABLE_A.counts desc 
 7 
 8  2.发布主题数量最多的城市
 9  select ar.adName as statisticsName,COUNT(*)AS counts from app_user as ar 
10             left join app_user_theme aut on ar.appUserSeries= aut.appUserSeries 
11             where 1=1 and aut.createDate>'2017-12-17 00:00:00'
12             GROUP BY ar.adName ORDER BY COUNT(*) desc*/
13 
14   
15 
16  /*3.每一个时间段发布主题的数量 select HOUR(createDate) as statisticsName, count(*) as counts 
17             from app_user_theme group by statisticsName ORDER BY counts desc 
18 
19 全APP主题感兴趣的数量 时间段感兴趣的数量 select COUNT(id) from app_user_theme_interestion 
20 
21 全APP主题订单的数量 时间段主题订单数量 select COUNT(*) from app_user_theme_order
22 
23 ==============================用户==================================================
24 
25 
26 
27 全APP用户数量 时间段注册数量 select COUNT(id) from app_user */
28 
29  /*1.APP用户最多的城市
30 select TABLE_A.adName as statisticsName,TABLE_A.adCode,TABLE_A.counts from (select ar.adName,ar.adCode,COUNT(*)AS counts 
31 from app_user ar where 1=1
32  and ar.createTime >= trim('2017-06-06 00:00:00') 
33 GROUP BY ar.adCode,ar.adName)TABLE_A ORDER BY TABLE_A.counts DESC */
34 
35  /*2.发布主题人群的职业统计
36 select ar.professionName as statisticsName,COUNT(*)AS counts from app_user as ar 
37 left join app_user_theme aut on ar.appUserSeries= aut.appUserSeries where ar.professionName!=''
38 GROUP BY ar.professionName ORDER BY COUNT(*) desc 
39 
40  3.发布主题人群的学历统计
41 select ar.educationName as statisticsName,COUNT(*)AS counts from app_user as ar 
42 left join app_user_theme aut on ar.appUserSeries= aut.appUserSeries where ar.educationName!=''
43 and aut.createDate >= trim('2017-12-04 00:00:00')
44 and aut.createDate <= trim('2017-12-30 00:00:00')
45 GROUP BY ar.educationName ORDER BY COUNT(*) desc */
46 
47 /* 4.发布主题人群的性别统计 
48

select CASE ar.sex WHEN 0 THEN '男' ELSE '女' END as statisticsName,COUNT(*)AS counts from app_user as ar
left join app_user_theme aut on ar.appUserSeries= aut.appUserSeries where ar.educationName!=''

50 and aut.createDate>'2017-02-01 00:00:00'
51 GROUP BY ar.sex ORDER BY COUNT(*) desc */

三、controller代码饼图数据格式单独整理，柱形和条形用的是同一种数据格式。

/**
         * 主题城市统计
         * @user  Anear   
         * @time  上午11:29:38
         */
        @ResponseBody
        @RequestMapping("/*****")
        public Map<String, Object> themeCityStatistics(String statisticsType,String startTime,String endTime,String pageNo,HttpServletRequest request,HttpServletResponse response,ModelMap model){
            PageProperty pp = new PageProperty();
            Integer pageNum = 0;
            Integer pageSizeNum =20;
            if (!"".equals(pageNo)) {
                pageNum = Utils.parseInt(pageNo, 1); // 将字符串数字转化为int型数字,把pageNo传进去，转换为整型，默认为1
            }
            pp.setNpage(pageNum);
            pp.setNpagesize(pageSizeNum);
            pp.putParamMap("startTime", startTime);
            pp.putParamMap("endTime", endTime);
            
            PageList<AppUserTheme> appPageList = new PageList<AppUserTheme>();
            

              Map<String, Object> resultMap=new HashMap<String, Object>();
              String shuoming = "主题数量";
            if (statisticsType.equals("0")) {
                appPageList = hourThemeCount(pp);//时间段发布主题数量统计
            }else if (statisticsType.equals("1")){
                appPageList = getIssueThemeCount(pp);//发布主题数量统计 降序 
            }else {
                  appPageList = cityThemeCount(pp);//获取发布主题城市统计 降序 默认显示
            }
            resultMap.clear();
              
              String strings = "";
              String interString = "";
              if (appPageList.getRecords().size()>=1) {//如果查询到了数据
                  for (AppUserTheme appUserTheme : appPageList.getRecords()) {
                    strings += ""+appUserTheme.getStatisticsName()+",";
                    interString += appUserTheme.getCounts()+",";
                }
                  //String [] ssStrings = strings.split(",");
                  String[] strarr = interString.split(",");
                  
                  int[] table_ids = new int[strarr.length];
                  for(int i=0;i<strarr.length;i++){
                      table_ids[i]=Integer.parseInt(strarr[i]);
                  }
                  appPageList.setValues(table_ids);
              }else {
                strings += "暂无";
                int[] table_ids = {0};
                  appPageList.setValues(table_ids);
            }
            
            List<JSONObject>  data=new ArrayList<JSONObject>(); //阿里巴巴的jar  饼图
            JSONObject tp=null;
            for (int i = 0; i < appPageList.getRecords().size(); i++) {
                tp=new JSONObject();
                tp.put("value", appPageList.getRecords().get(i).getCounts());
                tp.put("name", appPageList.getRecords().get(i).getStatisticsName());
                data.add(tp);
            }
              appPageList.setMap(data);
              
              appPageList.setShuoming(shuoming);
              appPageList.setCategories(strings.split(","));
              appPageList.setCount(appPageList.getRecords().size());
              resultMap.put("pageList", appPageList.getRecords());
              resultMap.put("apppageList", appPageList);
              
            
            
            return resultMap;
        }

　　　　　　　　　　　　另外 PageList 需要添加以下这几个属性

　　　　　　　　　　private String[] categories;//x轴数组
　　　　　　　　　　private int[] values;//y轴数组
　　　　　　　　　　private String shuoming;//说明
　　　　　　　　　　private int count;//条数

　　　　　　　　　　private List<JSONObject> map;

四、JSP、HTML代码 and JS

1 　　　　　　　　　　　　　　　　　　　　　　<h5 style="text-align: center;"> 柱图数据统计</h5>
2                                     <div class="chart" id="barChart"></div>
3                                     <h5 style="text-align: center;"> 条形数据统计</h5>
4                                     <div class="chart" id="lineChart"></div>
5                                     <h5 style="text-align: center;"> 饼图数据统计</h5>
6                                     <div class="chart" id="pieChart"></div>

  1 function gradeChange(){
  2            var sel = document.getElementById("pid");
  3            var selected_val = sel.options[sel.selectedIndex].value;
  4            var startTime = document.getElementById("startTime").value;
  5            var endTime = document.getElementById("endTime").value;
  6            $.ajax({
  7                 type : "post",
  8                 url : "${ctx}/appUserTheme/themeCityStatistics",
  9                 data : {"statisticsType" : selected_val,
 10                     "startTime" : startTime,
 11                     "endTime" : endTime},
 12                 dataType : "json",
 13                 error : function(XMLHttpRequest, textStatus, errorThrown) {
 14                     layer.open({
 15                         title : '提示',
 16                         content : "网络异常，稍后再试"
 17                     });
 18                 },
 19                 success : function(data) {
 20                     var getOption = function(chartType) {
 21                         var chartOption = chartType == 'pie' ? {
 22                             calculable: false,
 23                             series: [{
 24                                 name: '访问来源',
 25                                 type: 'pie',
 26                                 radius: '65%',
 27                                 center: ['50%', '50%'],
 28                                 itemStyle:{ 
 29                                     normal:{ 
 30                                           label:{ 
 31                                             show: true, 
 32                                             formatter: '{b} : {c} ({d}%)' 
 33                                           }, 
 34                                           labelLine :{show:true} 
 35                                         } 
 36                                     }, 
 37                                 data: data.apppageList.map 
 38                             }]
 39                         } : {
 40                             legend: {
 41                                 data: [data.apppageList.shuoming]
 42                             },
 43                             grid: {
 44                                 x: 35,
 45                                 x2: 10,
 46                                 y: 30,
 47                                 y2: 25
 48                             },
 49                             toolbox: {
 50                                 show: false,
 51                                 feature: {
 52                                     mark: {
 53                                         show: true
 54                                     },
 55                                     dataView: {
 56                                         show: true,
 57                                         readOnly: false
 58                                     },
 59                                     magicType: {
 60                                         show: true,
 61                                         type: ['line', 'bar']
 62                                     },
 63                                     restore: {
 64                                         show: true
 65                                     },
 66                                     saveAsImage: {
 67                                         show: true
 68                                     }
 69                                 }
 70                             },
 71                             calculable: false,
 72                             xAxis: [{
 73                                 type: 'category',
 74                                 data: data.apppageList.categories
 75                                 
 76                             }],
 77                             yAxis: [{
 78                                 type: 'value',
 79                                 splitArea: {
 80                                     show: true
 81                                 }
 82                             }],
 83                             series: [{
 84                                 name: data.apppageList.shuoming,
 85                                 type: chartType,
 86                                 data: data.apppageList.values,
 87                                 itemStyle: {  
 88                                 normal: {  
 89                                     label: {  
 90                                         show: true,//是否展示  
 91                                         textStyle: {  
 92                                             fontWeight:'bolder',  
 93                                             fontSize : '12',  
 94                                             fontFamily : '微软雅黑',  
 95                                         }  
 96                                     }  
 97                                 }  
 98                             },
 99                             }]
100                         };
101                         return chartOption;
102                     };
103                     var byId = function(id) {
104                         return document.getElementById(id);
105                     };
106 
107                     var crmHtmlr2 = '';
108                     var index = 0;
109                     var m = data.apppageList.count;
110                     $.each(data,function(i,aaa){
111                         $.each(aaa,function(n,comment){
112                             index ++;
113                             crmHtmlr2 +="<tr style='text-align: center;'><td><input type='checkbox' class='ids' value='${item.id }'/></td><td>"+index+"</td><td>"+comment.statisticsName+"</td><td>"+comment.counts+"</td></tr>";
114 
115                             if(parseInt(m) <= parseInt(index)) {
116                                 return false;
117                             }
118                         });
119                     });
120                     $('#statisticsBody').html(crmHtmlr2);
121                     
122                     var barChart = echarts.init(byId('barChart'));
123                     barChart.setOption(getOption('bar'));
124                     var lineChart = echarts.init(byId('lineChart'));
125                     lineChart.setOption(getOption('line'));
126                     var pieChart = echarts.init(byId('pieChart'));
127                     pieChart.setOption(getOption('pie'));
128                     
129                     byId("echarts").addEventListener('tap',function(){
130                         var url = this.getAttribute('data-url');
131                         plus.runtime.openURL(url);
132                     },false);
133                 }
134             });
135        }

五、查看效果

转载于:https://www.cnblogs.com/anpieBlog/p/8058079.html

weixin_30553065

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
四步完成 echarts 条形、线形、饼形统计图（动态），包含mybatis → case when else end 语句的使用...

一、去Echarts引入JS 网址：http://echarts.baidu.com/download.html echarts-all.js二、下面这些是我实际用到的SQL，有几个地方也需要记一下，正好放在这儿了，查询结果一定是名称 and 值 1 /*=============================主题======================...
复制链接

扫一扫