我只绘制折线图,其他的没做
-
需要引入echarts.js
下载地址:百度的下载链接 -
前端页面和ajax请求
<!-- 为echarts准备有大小的dom --> <div id="main" style="width: 100%;height:600px;"></div>
$().ready( function() { //制定图表配置和数据 var option = { title: { text: '分布图', //这里设置了标题居中显示 x:'center', y:'top', textAlign:'center' }, xAxis: { type: 'category', name:'关注数', axisLabel :{ //显示所有x轴数据 interval:0, //倾斜显示 rotate:-40, //x轴最后一位也显示 showMaxLabel: true }, data: [] }, tooltip: {//折线图上面节点显示信息 trigger: 'item', formatter: '{b} : {c}' }, yAxis: { type: 'value', name:'人数' }, series: { data: [], type: 'line', smooth: true } }; //var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表 //myChart.setOption(option); $(".newBtn").click(function() { var type=$(this).val(); $.ajax({ url:后台请求链接, type:'POST', data:{"type":type}, dataType:'json', success:function(result){ //x option.xAxis.data = result.x; //y option.series.data = result.y; // 基于准备好的dom,初始化echarts实例 var myChart = echarts.init(document.getElementById('main')); // 使用刚指定的配置项和数据显示图表 myChart.setOption(option); } }); }); });
-
后台
@RequestMapping("/query") @ResponseBody public Map query(HttpServletRequest request){ //这里是mongo数据库 从数据库分组查询排序的结果 List<AggregationServiceOrderCount> list = userService.queryByEcharts(); //因为要分开显示 所以这里拆分下数组 //标准小于8的 List<Integer> list5 = new ArrayList(); //标准大于等于8的 List<Integer> list8 = new ArrayList(); for (AggregationServiceOrderCount a : list) { if(a.get_id()!=null){ List<EnrollDef> enrollDefList = enrollDefService.queryByUserId(a.get_id(), 1); if(enrollDefList.size()>0){ double reward = Double.parseDouble((String)enrollDefList.get(0).getSuitDefs().get(0).get("reward")); if(reward>=8){ list8.add(Integer.parseInt(String.valueOf(a.getCountTotal()))); }else{ list5.add(Integer.parseInt(String.valueOf(a.getCountTotal()))); } } } } String type = request.getParameter("type"); if("1".equals(type)){ //拆分x轴y轴 Map splitList8 = splitList(list8); return splitList8; }else if("2".equals(type)){ //拆分x轴y轴 Map splitList5 = splitList(list5); return splitList5; }else{ return null; } } //拆分x轴y轴 返回map private Map splitList(List<Integer> list){ //Map map = new HashMap(); Map<String,List> map1 = new HashMap(); List<Integer> listx = new ArrayList<>(); List<Integer> listy = new ArrayList<>(); int count = 1;// 默认出现的次数为1 for (int i = 0; i < list.size(); i++) { count = 1; for (int j = i + 1; j < list.size(); j++) { if (list.get(i) == list.get(j)) { count++;// 次数+1 list.remove(j); j--; } } listx.add(list.get(i)); listy.add(count); //System.out.println(list.get(i) + "》》》出现了" + count); } //主要看这里返回的数据,上面都是处理数据,看你的情况处理 map1.put("x", listx); map1.put("y", listy); return map1; }