Echarts 后台传入数据

时间：2024-03-15 21:44:25

jsp页面：

[html] view plain copy
  1. <body>  
  2.     <!-- 为ECharts准备一个具备大小（宽高）的Dom -->  
  3.     <div id="main" style="width: 600px;height:400px;"></div>  
  4.     <script type="text/javascript">  
  5.         // 基于准备好的dom，初始化echarts实例  
  6.         var myChart = echarts.init(document.getElementById('main'));  
  7.          
  8.      // 初始 option  
  9.        option = {  
  10.             title: {  
  11.                 text: '异步数据加载示例'  
  12.             },  
  13.             tooltip: {},  
  14.              legend: {  
  15.            data:["销售0","销售1","销售2"]  
  16.        },  
  17.          
  18.             xAxis: {  
  19.                 type : "category",  
  20.                 data :[]  
  21.             },  
  22.             yAxis: [{  
  23.                 type : "value",  
  24.                   
  25.             }],  
  26.               
  27.               
  28.               
  29.               
  30.               
  31.   
  32.             series: [  
  33.                        {  
  34.                            name:"销售0",  
  35.                            type:"bar",  
  36.                            data:[]  
  37.                        },  
  38.                        {  
  39.                            name:"销售1",  
  40.                            type:"bar",  
  41.                            data:[]  
  42.                        },  
  43.                        {  
  44.                            name:"销售2",  
  45.                            type:"bar",  
  46.                            data:[]  
  47.                        }  
  48.     ]  
  49.                        
  50.                            
  51.                       
  52.         };  
  53.        myChart.showLoading();  
  54.         //通过Ajax获取数据  
  55.         $.ajax({  
  56.             type : "post",  
  57.             async : true, //异步执行  
  58.             url : "AcceptData",  
  59.             dataType : "json", //返回数据形式为json  
  60.             success : function(json) {  
  61.                    
  62.                 if (json) {  
  63.                      fetchData(function (data) {  
  64.                             myChart.hideLoading();  
  65.                             myChart.setOption({  
  66.                                   
  67.                                 xAxis:{  
  68.                                     data:json.xAxisData  
  69.                                 },  
  70.                                   
  71.                                   
  72.                                 series: json.seriesList  
  73.                                            
  74.                                            
  75.                                   
  76.                                   
  77.                             });  
  78.                                       
  79.                 });  
  80.             }  
  81.             },  
  82.             error : function(errorMsg) {  
  83.                 alert("请求数据失败");  
  84.             }  
  85.         });  
  86.         myChart.setOption(option);  
  87.     </script>  
  88. </body>  
  89. </html>  

 Servlet：

[html] view plain copy
  1. package com.cdm.Hive;  
  2.   
  3.   
  4. import java.io.IOException;  
  5. import java.io.PrintWriter;  
  6. import java.util.ArrayList;  
  7. import java.util.HashMap;  
  8. import java.util.List;  
  9. import java.util.Map;  
  10.   
  11.   
  12. import javax.servlet.ServletException;  
  13. import javax.servlet.http.HttpServlet;  
  14. import javax.servlet.http.HttpServletRequest;  
  15. import javax.servlet.http.HttpServletResponse;  
  16. import javax.servlet.http.HttpSession;  
  17.   
  18.   
  19. import net.sf.json.JSONObject;  
  20. public class AcceptData  extends HttpServlet {  
  21.  JSONObject jsonObject=null;  
  22.      public void doGet(HttpServletRequest req,HttpServletResponse resp)throws ServletException,IOException{  
  23.         try{  
  24.         req.setCharacterEncoding("utf-8");  
  25.             resp.setContentType("utf-8");  
  26.             resp.setCharacterEncoding("utf-8");  
  27.               
  28.             PrintWriter write = resp.getWriter();  
  29.             Map<String,String[]> map = new HashMap<String,String[]>();   
  30.             List<String> xAxisData = new ArrayList<String>();  
  31.                 List< JSONObject> seriesList = new ArrayList< JSONObject>();  
  32.                   
  33.                 for (int i = 1; i < 13; i++) {  
  34.                 xAxisData.add(i+"月");  
  35.                 }  
  36.   
  37.   
  38.                 for (int i = 0; i < 3; i++) {  
  39.                     List<Integer> list = new ArrayList<Integer>();  
  40.                     for (int j = 1; j < 13; j++) {  
  41.                         list.add((int)(Math.random()*40));  
  42.                     }  
  43.                     Series series = new Series("销售"+i, Series.TYPE_LINE, list);  
  44.                                          JSONObject jsonObject2 = new JSONObject();  
[html] view plain copy
  1.                                          jsonObject2.put("name", series.toName());  
  2.                                          jsonObject2.put("type","bar");  
  3.                                           jsonObject2.put("data",series.data);  
  4.                                           seriesList.add(jsonObject2);  
  5.                                        }  
  6.   
  7.   //xAxisData和seriesList转为json  
  8.   
  9. JSONObject jsonObject1 = new JSONObject();  
  10.    
  11. jsonObject1.put("xAxisData", xAxisData);  
  12.    
  13. jsonObject1.put("seriesList", seriesList);  
  14. //发送给前台  
  15. write.write(jsonObject1.toString());  
  16. write.flush();  
  17. write.close();  
  18. }catch (IOException e) {  
  19. e.printStackTrace();  
  20. }  
  21.   
  22. }  
  23.    
  24.  public void doPost(HttpServletRequest req, HttpServletResponse resp)throws ServletException,IOException{  
  25.    
  26. doGet(req,resp);  
  27. }  
  28. }<strong>  
  29. </strong>  

 Series：

[html] view plain copy
  1. import java.util.List;  
  2.   
  3. import org.json.JSONObject;  
  4.   
  5. public class Series {  
  6.       
  7.     public String name;  
  8.     public String type;  
  9.     public List<Integer> data;  
  10.     public static String TYPE_LINE = "line";  
  11. public static String TYPE_BAR = "bar";  
  12. public Series( String name, String type, List<Integer> data) {    
  13.       
  14.     this.name = name;    
  15.     this.type = type;    
  16.     this.data = data;    
  17. }    
  18. public String toName(){  
  19.     return name;  
  20. }  
  21.   
  22. }  


结果：

Echarts 后台传入数据

相关文章