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