1.echarts的官網上的demo，都是直接寫死的隨機數據，沒有和數據庫的交互，所以就自己寫了一下，ok，我們開始一步一步走一遍整個流程吧。
就以官網最簡單的那個小demo來做修改吧。官網上的小demo的效果圖如下：（很熟悉，有沒有）
2.按照echarts的使用方法新建一個echarts.html文件。為ECharts准備一個具備大小（寬高）的Dom(講的有點細，熟悉的朋友直接跳過)
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> </body>
新建<script>標簽引入符合AMD規范的加載器，如esl.js，引入jquery為等一下AJAX發送POST請求做准備
<script src="echarts/esl.js"></script> <script src="echarts/jquery.min.js"></script>
路徑配置
// 路徑配置
require.config({
paths:{
'echarts' : 'echarts/echarts',
'echarts/chart/bar' : 'echarts/echarts'
}
});
最后是使用：以下代碼是官網上的，紅色部分的data數據等一下我們修改一下從數據庫中去讀取
// 使用
require(
[
'echarts',
'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載
],
function (ec) {
// 基於准備好的dom，初始化echarts圖表
var myChart = ec.init(document.getElementById('main'));
var option = {
tooltip: {
show: true
},
legend: {
data:['銷量']
},
xAxis : [
{
type : 'category',
data : ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
}
],
yAxis : [
{
type : 'value'
}
],
series : [
{
"name":"銷量",
"type":"bar",
"data":[5, 20, 40, 10, 10, 20]
}
]
};
// 為echarts對象加載數據
myChart.setOption(option);
}
);
整個前段頁面的代碼如下：主要就是修改了option中的xAxis的data和series中的data,這2個data在官網的demo中都是直接寫死的,這里我們采用AJAX發送post請求
<!DOCTYPE html> <head> <meta charset="utf-8"> <title>ECharts</title> <!-- 來自百度CDN --> <script src="echarts/esl.js"></script> <script src="echarts/jquery.min.js"></script> </head> <body> <!-- 為ECharts准備一個具備大小（寬高）的Dom --> <div id="main" style="height:400px"></div> <script type="text/javascript"> // 路徑配置 require.config({ paths:{ 'echarts' : 'echarts/echarts', 'echarts/chart/bar' : 'echarts/echarts' } }); // 使用 require( [ 'echarts', 'echarts/chart/bar' // 使用柱狀圖就加載bar模塊，按需加載 ], drewEcharts ); function drewEcharts(ec) { console.log("1"); // 基於准備好的dom，初始化echarts圖表 myChart = ec.init(document.getElementById('main')); console.log("2"); var option = { tooltip: { show: true }, legend: { data:['銷量'] }, xAxis : [ { type : 'category', } ], yAxis : [ { type : 'value' } ], series : [ { "name":"銷量", "type":"bar", } ] };
//加載數據 loadDATA(option); // 為echarts對象加載數據 myChart.setOption(option); } function loadDATA(option){ $.ajax({ type : "post", async : false, //同步執行 url : "bar.do", data : {}, dataType : "json", //返回數據形式為json success : function(result) { if (result) {
//初始化option.xAxis[0]中的data option.xAxis[0].data=[]; for(var i=0;i<result.length;i++){ option.xAxis[0].data.push(result[i].name); }
//初始化option.series[0]中的data option.series[0].data=[]; for(var i=0;i<result.length;i++){ option.series[0].data.push(result[i].num); } } } }); } </script> </body>
3.在前一步中AJAX的POST請求的路徑是 url : "bar.do" 在web.xml中配置以下映射如下圖：
<servlet> <servlet-name>helloBar</servlet-name> <servlet-class>com.helloBar</servlet-class> </servlet> <servlet-mapping> <servlet-name>helloBar</servlet-name> <url-pattern>/bar.do</url-pattern> </servlet-mapping>
這樣，通過bar.do就會找到com這個包下面的helloBar這個servlet.這個servlet的主要作用是向數據庫讀取數據並返回給前段頁面，這里我用的是局部數據源去鏈接，關於局部數據源怎么連這里我就不講述了，不會的同學可以在我的博客中找到。當然也可以使用最基本的JDBC去連接。
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//創建了一個bardao的對象，barDAO主要是對數據庫的連接和對數據庫的操作 barDAO bardao=new barDAO();
//調用bardao的select_all()方法把從數據庫中讀取所有的數據返回的是一個ArrayList，ArrayList里面放的是一個barBean ArrayList<barBean> array = bardao.select_all();
//設置返回時的編碼格式 response.setContentType("text/html; charset=utf-8");
//調用JSONArray.fromObject方法把array中的對象轉化為JSON格式的數組 JSONArray json=JSONArray.fromObject(array); System.out.println(json.toString());
//返回給前段頁面 PrintWriter out = response.getWriter(); out.println(json); out.flush(); out.close();
}
數據庫的bar表格式如下圖：
barBean的代碼：
import java.io.Serializable;
import java.sql.Date;
public class barBean {
private String name;
private int num;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getNum() {
return num;
}
public void setNum(int num) {
this.num = num;
}
}
barDAO的代碼：
public class barDAO { private static InitialContext context = null; private DataSource dataSource = null; private static final String SELECT_ALL = "SELECT*FROM bar "; public barDAO(){ try{ if(context == null){ context = new InitialContext(); } dataSource = (DataSource)context.lookup("java:comp/env/jdbc/sampleDS"); }catch(NamingException e2){ } } public Connection getConnection(){ Connection conn = null; try{ conn = dataSource.getConnection(); }catch(SQLException e){} return conn; } public ArrayList<barBean> select_all() { Connection conn = null; PreparedStatement pstmt = null; ResultSet rst = null; try{ conn = dataSource.getConnection(); pstmt = conn.prepareStatement(SELECT_ALL); rst = pstmt.executeQuery(); ArrayList<barBean> array = new ArrayList<barBean>(); while(rst.next()) { barBean bar = new barBean(); bar.setName(rst.getString("name")); bar.setNum(rst.getInt("num")); array.add(bar); } pstmt.close(); rst.close(); return array; }catch(SQLException e){ System.out.println("Error occured at barDAO->select_all()"); return new ArrayList<barBean>(); }finally{ try{ conn.close(); }catch(SQLException e){ System.out.println("Error occured at closing connection in barDAO"); } } } }
4.前段的頁面在確認ajax請求success以后，讀取返回后的數組的內容。就可以顯示了。
