***********JSP頁面***************
查詢數據的jsp頁面內容:
a標籤: href=”GetDataServlet/selectJobs”>點擊獲取招聘信息
表格:
<c:forEach items="${jobList}" var="job">
<tr>
<td>${job.id}</td>
<td>${job.jobName}</td>
<td>${job.company}</td>
<td style="color:gray;">${job.address}</td>
<td style="color: red;">${job.salary}</td>
<td>
<a href="#">修改</a> |
<a href="#">刪除</a>
</td>
</tr>
</c:forEach>
用圖狀顯示數據:
<script type="text/javascript">
// 基於準備好的dom,初始化echarts實例
var myChart = echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option = {
title: {
text: '不同薪酬的情況'
},
tooltip: {},
legend: {
data:['薪資']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '薪資',
type: 'bar',
data: []
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
// 發起請求
var xhr = new XMLHttpRequest();
// 定義url連接
var url = "GetDataServlet/selectAvgSal";
// 打開到服務器的連接
xhr.open("get", url, true);
// 綁定回調函數
xhr.onreadystatechange = function () {
if(xhr.readyState == 4){// 響應完成
if(xhr.status == 200){ // 響應正常200 ok
// 響應回來的text字符串數據
var data = xhr.responseText;
// 將字符串轉換爲json對象
var json = JSON.parse(data);
//綁定到myChart
myChart.setOption({
xAxis: {
data: json.jobNames
},
series: [{
// 根據名字對應到相應的系列
name: '平均薪酬',
data: json.avgSals
}]
});
}
}
};
// 發送請求
xhr.send(null);
</script>
由於數據沒有處理好,在圖狀顯示的時候有點瑕疵,望大佬們見諒
項目jar包:
***********END***************