一、去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 }
五、查看效果