衆所周知,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的動態獲取後臺數據的第一步,就算完成。後面我會繼續編寫第二步,也是最重要的一步。敬請關注!