Echarts 后台传入数据

最新推荐文章于 2024-06-04 17:37:38 发布

Mr有妖气y

最新推荐文章于 2024-06-04 17:37:38 发布

阅读量2.3w

点赞数 5

文章标签： jsp 数据可视化

本文链接：https://blog.csdn.net/cwzcwz32/article/details/50977768

版权

jsp页面：

<body>
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 600px;height:400px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
       
     // 初始 option
       option = {
    	    title: {
    	        text: '异步数据加载示例'
    	    },
    	    tooltip: {},
    	     legend: {
           data:["销售0","销售1","销售2"]
    	 },
       
    	    xAxis: {
    	    	type : "category",
    	    	data :[]
    	    },
    	    yAxis: [{
				type : "value",
				
			}],
			
			
			
			
			

    	    series: [
    	               {
    	            	   name:"销售0",
    	            	   type:"bar",
    	            	   data:[]
    	               },
    	               {
    	            	   name:"销售1",
    	            	   type:"bar",
    	            	   data:[]
    	               },
    	               {
    	            	   name:"销售2",
    	            	   type:"bar",
    	            	   data:[]
    	               }
    ]
    	             
    	            	 
    	            
    	};
       myChart.showLoading();
    	//通过Ajax获取数据
    	$.ajax({
    		type : "post",
    		async : true, //异步执行
    		url : "AcceptData",
    		dataType : "json", //返回数据形式为json
    		success : function(json) {
    			 
    			if (json) {
    				 fetchData(function (data) {
    			            myChart.hideLoading();
    			            myChart.setOption({
    			    			
    		    				xAxis:{
    		    					data:json.xAxisData
    		    				},
    		    				
    		    				
    		    				series: json.seriesList
    		    				         
    		    				         
    		    				
    		    				
    		    			});
    		    					
    			});
    		}
    		},
    		error : function(errorMsg) {
    			alert("请求数据失败");
    		}
    	});
        myChart.setOption(option);
    </script>
</body>
</html>

Servlet：

package com.cdm.Hive;


import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;


import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;


import net.sf.json.JSONObject;
public class AcceptData  extends HttpServlet {
 JSONObject jsonObject=null;
     public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{
		try{
		req.setCharacterEncoding("utf-8");
			resp.setContentType("utf-8");
			resp.setCharacterEncoding("utf-8");
			
			PrintWriter write = resp.getWriter();
			Map<String,String[]> map = new HashMap<String,String[]>(); 
			List<String> xAxisData = new ArrayList<String>();
				List< JSONObject> seriesList = new ArrayList< JSONObject>();
				
				for (int i = 1; i < 13; i++) {
				xAxisData.add(i+"月");
				}


				for (int i = 0; i < 3; i++) {
					List<Integer> list = new ArrayList<Integer>();
					for (int j = 1; j < 13; j++) {
						list.add((int)(Math.random()*40));
					}
					Series series = new Series("销售"+i, Series.TYPE_LINE, list);
                                         JSONObject jsonObject2 = new JSONObject();

                                         jsonObject2.put("name", series.toName());
                                         jsonObject2.put("type","bar");
                                          jsonObject2.put("data",series.data);
                                          seriesList.add(jsonObject2);
                                       }

  //xAxisData和seriesList转为json

JSONObject jsonObject1 = new JSONObject();
 
jsonObject1.put("xAxisData", xAxisData);
 
jsonObject1.put("seriesList", seriesList);
//发送给前台
write.write(jsonObject1.toString());
write.flush();
write.close();
}catch (IOException e) {
e.printStackTrace();
}

}
 
 public void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException,IOException{
 
doGet(req,resp);
}
}<strong>
</strong>

Series：

import java.util.List;

import org.json.JSONObject;

public class Series {
	
	public String name;
	public String type;
	public List<Integer> data;
	public static String TYPE_LINE = "line";
public static String TYPE_BAR = "bar";
public Series( String name, String type, List<Integer> data) {  
    
    this.name = name;  
    this.type = type;  
    this.data = data;  
}  
public String toName(){
	return name;
}

}

结果：