Echarts 后台传入数据

来源：互联网发布：mac 网盘知乎编辑：程序博客网时间：2024/05/16 18:02

jsp页面：

[html] view plain copy
<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：

[html] view plain copy
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();  

[html] view plain copy
                                         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：

[html] view plain copy
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;  
}  
  
}  

结果：

0 0