关于echarts的timeline图： ajax获取后台的map类型的jsonarray数据

package echarts.servlet;



import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.HashMap;

import java.util.Map;



import javax.servlet.ServletException;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;



import net.sf.json.JSONArray;



import echarts.bean.Record;

import echarts.bean.Starttime;

import echarts.dao.RecordDAO;



public class RecordServlert extends HttpServlet {



	public void doGet(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {



		request.setCharacterEncoding("utf-8");

		response.setCharacterEncoding("utf-8");



		RecordDAO redao = new RecordDAO();

		ArrayList<Starttime>  arr = redao.getStarttime();

		Map<String, ArrayList<Record>> map = redao.getAll(arr);

		

        JSONArray json=JSONArray.fromObject(map);

        response.setContentType("text/html; charset=utf-8");

        System.out.println("转成json");

        System.out.println(json.toString());

        //返回给前段页面

        PrintWriter out = response.getWriter();  

        out.print(json);  

        out.flush();  

        out.close();  

		 

		

	}



	public void doPost(HttpServletRequest request, HttpServletResponse response)

			throws ServletException, IOException {



		doGet(request, response);

		

	}

	



}

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<%

String path = request.getContextPath();

String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";

%>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

  <head>

    <base href="<%=basePath%>">

    

    <title>Echarts_demo01</title>

    <script src="./js/echarts.js"></script>

    <script src="./js/esl.js"></script>

    <script src="./js/jquery-1.7.2.min.js"></script>



  </head>

  

  <body>

  

  		<!-- 为ECharts准备一个具备大小（宽高）的Dom -->

	<div id="main" style="height:400px;width:700px;"></div>

		

	<script type="text/javascript">

		

		// 基于准备好的dom，初始化echarts图表

		var myChart = echarts.init(document.getElementById('main'));

		myChart.showLoading({text:'正在加载数据'});

							

		option = {

		    baseOption: {

		        timeline: {

		            // y: 0,

		            axisType: 'category',

		            // realtime: false,

		            // loop: false,

		            autoPlay: true,

		            // currentIndex: 2,

		            playInterval: 1000,

		            // controlStyle: {

		            //     position: 'left'

		            // },

		            data:(function(){

                             var arr=[];

                             $.ajax({

                                 type : "post",

                                 async : false, //同步执行

                                 url : "RecordServlet",

                                 data : {},

                                 dataType : "json", //返回数据形式为json

                                 success : function(result) {

                                 console.log("s");

	                                 if (result) {

	                                      for(var i=0;i<result.length;i++){

		                                      console.log(result[i].starttime);

		                                      arr.push(result[i].starttime);

                                 		  }    

                               		 }

                                        

                             	  },

                              error : function(errorMsg) {

	                              alert("图表请求数据失败!");

	                              myChart.hideLoading();

                              }

                          })

                           return arr;

                        }),

		                

		            

		            label: {

		                formatter : function(s) {

		                    return (new Date(s)).getFullYear();

		                }

		            }

		        },

		        title: {

		            text: '每日各地市漫游次数统计'

		        },

		        tooltip: {},

		        legend: {

		            x: 'right',

		            data: ['漫游次数'],

		            

		        },

		        calculable : true,

		        grid: {

		            top: 80,

		            bottom: 100

		        },

		        xAxis: [

		            {

		                type:'category',

		                axisLabel:{'interval':0},

		                data:[],

		                splitLine: {show: false}

		            }

		        ],

		        yAxis: [

		            {

		                type: 'value',

		                name: '次数（次）',

		                // max: 53500

		                max: 20000

		            }

		        ],

		        series: [

		            {name: '漫游次数',

		             type: 'bar',

		             data:[]

		            },

		        ]

		    },

		    

		};	

				// 为echarts对象加载数据 

				myChart.setOption(option); 	

				

				getChartData();

				

		function getChartData(){

					var options = myChart.getOption();

                             $.ajax({

                                 type : "post",

                                 async : false, //同步执行

                                 url : "${pageContext.request.contextPath}/RecordServlet",

                                 data : {},

                                 dataType : "json", //返回数据形式为json

                                 success : function(result) {

	                                 if (result) {

		                                 for(var i=0;i<result.length;i++){

												options.xAxis[0].data = result[i].record.name;

												options.series[0].data = result[i].record.num;

						

												myChart.hideLoading();

												myChart.setOption(options);

										}

                               		 }

                                        

                             	  },

                              error : function(errorMsg) {

	                              alert("请求数据失败!");

	                              myChart.hideLoading();

                              }

                          })

                        }

		

	</script>								

				

	

   

  </body>

</html>