echarts圖表動態獲取後臺數據詳解（二）

前篇文章介紹瞭如何在現有的頁面中，建立容器存放echarts圖表，如何引入echarts.js文件，和配置圖表庫的路徑。並將靜態數據在頁面上呈現出來。相當於是爲動態獲取後臺數據做了鋪墊。那麼這篇文章，就實際的介紹一下，怎麼從後臺數據庫獲取數據，並展示在echarts圖表上。
1.在前一篇文章介紹中的xxx.js文件裏，加入ajax請求，dataType爲json。

2.然後再ajax的success返回函數中，設置echarts圖表的各種屬性，這些屬性當中，除了legend的data的值、series的data
值需要從後臺數據庫獲取意外，其他的都是echarts官方的數據格式。直接複製粘貼即可。



3.  java後臺比較簡單，後臺的sql語句和service這裏就不贅述了，相信這些大家都沒問題。這裏介紹一下在action前端控制器中
怎麼返回echarts想要的數據格式。echarts的數據格式在官網的例子中不難看出，option裏面的legend下面的data，數據格式是一個
數組[]，series裏面的data是一個數組中包含的鍵值對（key，value）。那麼我們在後臺就必須將數據封裝成鍵值對的形式，再轉換
成json數據格式，返回給前臺。

下圖是echarts官方的series中的data數據格式：

4.有了前臺需要的數據格式，後臺就好辦了。先封裝一個class類，類的屬性爲name和value，目的是將數據封裝好，返回給series

的data使用。因爲series的數據格式必須要是key，value鍵值對的形式。

5.建一個action，建一個方法，對應前臺ajax請求路徑。將從數據庫獲取的數據封裝成List集合。然後轉換成json格式，這裏我

用到的是阿里巴巴的fastjson（自行百度）。然後傳給前臺。直接上源碼：

@Controller
@RequestMapping(value="/population")
public class Population_big {

    @Autowired
    private PopulationBo populationBo;

@RequestMapping(value="/populationCount")
    @ResponseBody
    public String populationCount(HttpServletRequest request, HttpServletResponse response) {
        
        List list = new ArrayList();
        List<String> popSexList = this.populationBo.getAllPopulation();
        System.out.println("popSexList:"+popSexList);
        for(int i=0;i<popSexList.size();i++){
            Integer countSex = this.populationBo.countPopByPopSex(popSexList.get(i));
            Pop_bigData pop_bigData = new Pop_bigData(countSex,popSexList.get(i));
            list.add(pop_bigData);
        }
        String data = JSON.toJSONString(list);
        System.out.println("data:"+data);
        return data;
    }

解釋：requestMapping路徑，對應ajax的請求路徑，ajax請求中，有請求參數請自行加入，我這裏沒有請求參數。建List集合，將

數據封裝進去，popSexList對應前臺頁面中ecahrts的legend裏的data數據格式。pop_bigData是我封裝的key，value鍵值對的一個類

（前面已經說到），將從數據庫中獲取的name值，value值，添加到pop_bigData這個對象中。然後也封裝到一個List集合中。最後，

將這個list對象轉換成json格式，返回給前臺。

下圖是封裝好的數據，轉換成爲了json格式之後，前臺就能使用了：

6.前臺頁面在獲取到後臺傳過來的數據之後，就能使用了。在success的回調函數中，將數據直接展示在echarts的option中的

legend下的data，和series下的data中。直接使用~~方便快捷。。見代碼（乾貨）：

 $.ajax({
                url:'population/populationCount.do?'+(new Date()).getTime(),
                type:'post',
                async: true,
                dataType:'json',
                success:function (result) {
                    pie_data.hideLoading();//隱藏加載動畫

                    pie_data.setOption({
                        tooltip : {
                            trigger: 'item',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : 'vertical',
                            x : 'left',
                            // data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
                            data:result
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {
                                    show: true,
                                    type: ['pie', 'funnel'],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            width: '50%',
                                            funnelAlign: 'left',
                                            max: 1548
                                        }
                                    }
                                },
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        series : [
                            {
                                name:'訪問來源',
                                type:'pie',
                                radius : '55%',
                                center: ['50%', '60%'],
                                data:result
                            }
                        ]
                    });
                },

到這裏爲止，從後臺數據庫動態獲取數據就算成功了，下面是展示圖，請對比控制檯打印的那張圖看數據對不對：

PS：這裏介紹的是在同一個項目下，ajax請求，動態的從後臺獲取數據並展示的情況。後面我將繼續介紹：ajax請求，在跨域的

情況下，動態的獲取後臺數據。即：ajax請求跨域情況如何解決。敬請關注!