echarts圖表動態獲取後臺數據詳解(一)

衆所周知,ecahrts官網只給出了一個demo,所有的數據都是靜態的。那麼,要想從後臺數據庫動態的將數據返回到前臺,展示到各個圖表上,我這裏說一下自己的體會,這篇文章是建立靜態數據的,相當於的動態獲取後臺數據的前站,此處是動態獲取後臺數據的鏈接(echarts圖表動態獲取後臺數據詳解二)。

1.首先,建一個頁面,html也好,jsp也好,或者直接在你現成的頁面上都可以,只要給這個圖表建立一個容器(粗俗點就是建個div)存放圖表。--此處echarts的官網有教程提示例:<div id="bar_div" style="width:800px;height:300px;"></div>,建個div標籤,設定一個id號(這個id號後面要用,必須設定),同時設置這個div的寬高。

我這裏是將圖表放在一個JSP頁面,頁面裏用到了bootstrap的格柵系統(col-md-6),然後在格柵系統裏添加了panel面板,在panel面板裏添加了一個div。這個div用來存放echarts圖表。

大家可以看到,我這個div裏面,除了id號和一些寬高樣式之外,什麼都沒有。在這裏,我並沒有像echarts官網的教程那樣,

單獨建立一個頁面來存放echarts圖表,所以我單獨寫了一個xxx.js文件,引入到了這個JSP文件中。相信在實際的項目中,

會經常遇到這種情況,

2.下載echarts插件,官網下載地址,打開後--點擊(下載),我下載的是(xxx.from baidu)。然後將壓縮包解壓,單純做項目的話,直接將build文件夾一起(包含build文件夾)複製到項目的資源文件夾下(webapp),不知道什麼是資源文件夾的我就無語了。



3.將echarts插件導入到項目之後,就要像官網教程提示一樣,引入echarts.js文件和圖表庫。若是單獨建立一個全新頁面的項目的話,我這裏就不敘述了,echarts官網上有教程。我這裏介紹一下,外部引入xxx.js文件情況下怎麼做:

1).剛纔介紹了,在項目的JSP頁面下,我使用了div標籤建一個容器。設置id號和寬高屬性。其他屬性也可以自己隨意添加。

2).新建一個xxx.js文件,將這個文件引入JSP文件<script type="text/javascript" src="js/test.js"></script>

3).然後打開這個xxx.js文件,將echarts的圖表庫進入進來(就是官網說的配置路徑)。

// 路徑配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });

這裏的路徑一定要配置正確,不然圖表出不來。上面介紹到建議將build文件夾一起復制到項目中,這裏就可以根據build文件夾的路徑,找到dist的位置,找到dist的路徑就ok了,我們需要的其實是dist文件夾下的chart文件夾,裏面存放的纔是所有的圖表庫。注意是相對路徑,不要寫成絕對路徑了。意思就是說:你的JSP頁面在什麼位置,就相對應的設置這個路徑。


下面是我的JSP頁面設置了項目的路徑,添加了一個base標籤。所以,所有的引用文件,不再需要什麼../   ../ “點點槓”之類的了。直接可以根據當前JSP頁面所在的位置,填寫所有的引入文件路徑。見下圖:


這裏可以在上面的圖片看到,我項目的echarts插件,存放的位置,然後這裏路徑就填寫成這樣。所以說,要根據項目的實際情況,填寫路徑的配置。


4).最後,將下面圖片中的所有配置添加到上面這張圖片的下方。


最終我的js文件中的代碼樣式是:

$(function () {
    // 路徑配置
    require.config({
        paths: {
            echarts: 'B-JUI/plugins/echarts/'
        }
    });
    //動態加載餅狀圖
    require(
        [
            'echarts',
            'echarts/chart/pie' // 使用柱狀圖就加載bar模塊,按需加載
        ],
        function (ec) {
            // 基於準備好的dom,初始化echarts圖表
            var pie_data = ec.init(document.getElementById('pie_data'));
            var option = {
                tooltip : {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient : 'vertical',
                    x : 'left',
                    data:['直接訪問','郵件營銷','聯盟廣告','視頻廣告','搜索引擎']
                },
                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:[
                            {value:335, name:'直接訪問'},
                            {value:310, name:'郵件營銷'},
                            {value:234, name:'聯盟廣告'},
                            {value:135, name:'視頻廣告'},
                            {value:1548, name:'搜索引擎'}
                        ]
                    }
                ]
            };
            // 爲echarts對象加載數據
            pie_data.setOption(option);
        }
    )
});

效果圖如下:


這樣,echarts的動態獲取後臺數據的第一步,就算完成。後面我會繼續編寫第二步,也是最重要的一步。敬請關注!

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