ajax请求获取数据，前端绘制Echarts折线图

我只绘制折线图，其他的没做

1. 需要引入echarts.js
   下载地址：百度的下载链接

2. 前端页面和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);
   					}
   				});
   			});
   
   		});
   

3. 后台

   @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;
   }