java+echarts實現動態圖表，jsp前臺頁面通過ajax非同步請求，controller層處理完資料返回前臺實現動態圖表。

一個簡單例項：

1. 前臺echarts圖表依賴js檔案：

echarts.js  下載地址 ：http://echarts.baidu.com/download.html

jquery-1.11.2.min.js  jquery依賴js檔案

2.前臺頁面：

引用echarts.js、jquery-1.11.2.min.js

編寫圖表：

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

                <script type="text/javascript">

//ajax非同步請求獲取後臺動態資料

$.ajax({
                    url:"login.do",//要請求的伺服器url
                    async:true,   //是否為非同步請求
                    cache:false,  //是否快取結果
                    type:"POST", //請求方式為POST
                    dataType:"json",   //伺服器返回的資料是什麼型別
                    success:function(result){  //這個方法會在伺服器執行成功是被呼叫 ，引數result就是伺服器返回的值(現在是json型別)
                        if(result){
                   myChart.setOption({        //給echarts圖示賦值
                   xAxis: {
                      data: result.xAxis
                  },
                  series: [{
                        data: result.series
                    }]
                });
                        }else{
                            alert(2)
                        }
                    }
                })

       
        // 基於準備好的dom，初始化echarts例項
        var myChart = echarts.init(document.getElementById('main'));

        // 指定圖表的配置項和資料
        var option = {                 
            title: {
                text: 'java+ECharts實現動態圖表'
            },
            tooltip: {},
            legend: {
                data:['銷量']
            },
            xAxis: {
                data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
            },
            yAxis: {},
            series: [{
                name: '銷量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用剛指定的配置項和資料顯示圖表。
        myChart.setOption(option);

        </script>

更多型別的圖表參考echarts官網，地址：http://echarts.baidu.com/examples/

2.java後臺controller層：

package controller;
import javax.servlet.http.HttpServletResponse;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import dao.JsonUtil;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;
import vo.User;


@Controller
public class Usercontroller {

@ResponseBody
@RequestMapping("/login.do")
public void login(HttpServletResponse response){
    JSONObject jo=new JSONObject();
    JSONArray arr=new JSONArray();
    arr.add(1);
    arr.add(2);
    arr.add(3);
    arr.add(4);
    arr.add(5);
    arr.add(6);
    JSONArray arr1=new JSONArray();
    arr1.add(10);
    arr1.add(20);
    arr1.add(30);
    arr1.add(40);
    arr1.add(50);
    arr1.add(60);
    jo.put("xAxis", arr);
    jo.put("series", arr1);

    System.out.println( "========>"+jo.toString());  

//後臺輸出的json格式：

//========>{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}
//========>{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}

    JsonUtil.write(response, jo);  //把值返回給前臺  
}
}

實際使用查詢出資料組裝成“{"xAxis":[1,2,3,4,5,6],"series":[10,20,30,40,50,60]}“這種格式json返回給前臺即可。

3.測試