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請求跨域情況如何解決。敬請關注!


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章