SSM中Ajax動態賦值給Echarts

1、JSP頁面

<script type="text/javascript" src="javascript/echarts.js"></script>

<!-- 爲ECharts準備一個具備大小（寬高）的Dom -->
<div id="sceneryChart" style="width:800px;height:500px;"></div>

 

2.JS

<script type="text/javascript">
$(function() {
	 // 基於準備好的dom，初始化echarts實例
    var myChart = echarts.init(document.getElementById('sceneryChart'));

    // 顯示標題，圖例和空的座標軸
    myChart.setOption({
        title: {
            text: '各熱門景區旅遊人次',
            subtext: '相關數量柱形圖和折線圖'
        },
        tooltip: {},
        legend: {
            data:['人次']
        },
        toolbox: {
            show: true,
            feature: {
                dataView: {show: true, readOnly: false},
                magicType: {show: true, type: ['line', 'bar']},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        calculable: true,
        xAxis: {
            data: []
        },
        yAxis: {},
        series: [{
            name: '人次',
            type: 'bar',
            itemStyle: { normal: { label: { show: true, position: 'top', textStyle: { color: '#615a5a' }, formatter:function(params){ if(params.value==0){ return ''; }else { return params.value; } } } } },
            data: [],
            markPoint: {
                data: [
                    {type: 'max', name: '最大值'},
                    {type: 'min', name: '最小值'}
                ]
            },
            markLine: {
                data: [
                    {type: 'average', name: '平均人次'}
                ]
            }
        }]
    });

    myChart.showLoading();    //數據加載完之前先顯示一段簡單的loading動畫

    var names=[];    //景區名數組（實際用來盛放X軸座標值）
    var nums=[];    //旅遊人次數組（實際用來盛放Y座標值）

    $.ajax({
        type : "post",
        async : true,            //異步請求（同步請求將會鎖住瀏覽器，用戶其他操作必須等待請求完成纔可以執行）
        url : "${pageContext.request.contextPath}/console/getSceneryViews",    //請求發送到TestServlet處
        data : {},
        dataType : "json",        //返回數據形式爲json
        success : function(result) {
            //請求成功時執行該函數內容，result即爲服務器返回的json對象
            if (result) {
                for(var i=0;i<result.length;i++){
                    names.push(result[i].sceneryName);    //挨個取出類別並填入類別數組
                }
                for(var i=0;i<result.length;i++){
                    nums.push(result[i].num);    //挨個取出銷量並填入銷量數組
                }
                myChart.hideLoading();    //隱藏加載動畫
                myChart.setOption({        //加載數據圖表
                    xAxis: {
                        data: names
                    },
                    series: [{
                        // 根據名字對應到相應的系列
                        name: '人次',
                        data: nums
                    }]
                });

            }

        },
        error : function(errorMsg) {
            //請求失敗時執行該函數
            alert("圖表請求數據失敗!");
            myChart.hideLoading();
        }
    })	
}); 
</script>

Controller.java

import java.util.ArrayList;
import java.util.List;
import javax.annotation.Resource;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import com.tour.entity.SceneryView;
import com.tour.entity.UserView;
import com.tour.service.IConsoleService;
import com.tour.service.IUserService;

import net.sf.json.JSONArray;

@Controller
@RequestMapping(value = "/console")
public class ConsoleController{
	
	@Resource(name="consoleService")
	private IConsoleService consoleService;
	
	@RequestMapping(value="/getSceneryViews",method=RequestMethod.POST)
	@ResponseBody
	public List<SceneryView> getSceneryViews(){
		List<SceneryView> sceneryViewList = new ArrayList<SceneryView>();
		sceneryViewList = consoleService.getSceneryViews();
		return sceneryViewList;
	}
}