第一次使用echart從後臺獲取資料動態顯示到頁面
阿新 • • 發佈：2019-01-04
第一次使用Echart繪製圖表，看了兩天，終於結合後臺給整出來了。走過之後再看看，其實很簡單的。不多說了，直接上圖：
第一步：去echarts官方下載最新的js; 官方地址 ： echarts.baidu.com
我下的是3.4.0版的：echarts.min.js
第二步：建立一個ReportDataBean，在該類中設定兩個屬性：List<String>categories 和 List<Integer> data，具體如下圖
ReportDataBean:用來記錄和儲存需要傳遞到前臺頁面中顯示的資料集合
public class ReportDataBean { private List<String> categories; private List<Integer> data; public List<String> getCategories() { return categories; } public void setCategories(List<String> categories) { this.categories = categories; } public List<Integer> getData() { return data; } public void setData(List<Integer> data) { this.data = data; } }
第三步：建立EchartReportService ，TestDataService，和各自實現。EchartReportService是所以對外呼叫的主Service，而TestDataService是具體的業務Service
1.EchartReportService:模板介面，用來以後進行不同模板間進行擴充套件
public interface EchartReportService {
public JSONObject getDataJson();
}public interface TestDataService extends EchartReportService { }
3.EchartReportServiceImpl
@Service
public class EchartReportServiceImpl implements EchartReportService {
@Override
public JSONObject getDataJson() {
return null;
}
}4.TestDataServiceImpl
@Service public class TestDataServiceImpl extends EchartReportServiceImpl implements TestDataService { /** * 模擬獲取資料庫後的資料 * @return */ @Override public JSONObject getDataJson() { ReportDataBean bean = new ReportDataBean(); List<String> categories = Arrays.asList("襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"); List<Integer> data = Arrays.asList(5, 20, 36, 10, 10, 20); bean.setCategories(categories); bean.setData(data); JSONObject jsonObj = (JSONObject) JSON.toJSON(bean); return jsonObj; } }
第四步：testReport.jsp是具體顯示統計圖表的頁面，裡面有三個最重要的方法。這裡只做最簡單的實現
callbackFn方法是處理從後臺獲取的資料然後前臺解析的。
initReport方法是初始化基本圖示橫軸和縱軸的方法。在這個方法裡，只留有xAxis.data和series.data是動態從資料庫獲取後賦值的。
createTestReport方法是將callbackFn和initReport方法合併的入口方法。這樣為以後可以在同一型別的圖表顯示模板進行編輯和處理進行擴充
testReport.jsp 程式碼如下:
<#assign base=request.contextPath />
<!DOCTYPE html>
<html>
<head>
<title>報表測試</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<meta name="keywords" content="">
<meta name="description" content="">
<link href="${base}/statics/css/bootstrap.min.css" rel="stylesheet">
<link href="${base}/statics/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="${base}/statics/css/animate.css" rel="stylesheet">
<link href="${base}/statics/css/style.css?v=4.1.0" rel="stylesheet"><base target="_blank">
<!-- jqgrid-->
<link href="${base}/statics/css/plugins/jqgrid/ui.jqgrid.css" rel="stylesheet">
<style>
/* Additional style to fix warning dialog position */
#alertmod_table_list_2 {
top: 900px !important;
}
</style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
<div class="row">
<div class="col-sm-12">
<div class="ibox ">
<div class="ibox-title">
<h5>測試報表</h5>
</div>
<div class="ibox-content">
<div id="main" style="width: 600px;height:400px;"></div>
</div>
</div>
</div>
</div>
</div>
<script src="${base}/statics/js/jquery.min.js?v=2.1.4"></script>
<script src="${base}/statics/js/bootstrap.min.js?v=3.3.6"></script>
<script src="${base}/statics/js/plugins/layer/layer.min.js"></script>
<script src="${base}/statics/js/demo/layer-demo.js"></script>
<script src="${base}/statics/js/plugins/peity/jquery.peity.min.js" ></script>
<script src="${base}/statics/js/plugins/jqgrid/i18n/grid.locale-cn.js" ></script>
<script src="${base}/statics/js/plugins/jqgrid/jquery.jqGrid.min.js" ></script>
<script src="${base}/statics/js/content.js" ></script>
<script src="${base}/statics/js/jgrid/data.js"></script>
<script src="${base}/statics/js/echarts/echarts.min.js"></script>
<script type="text/javascript">
// 直接頁面寫的呼叫ajax的方法
function callbackFn(myChart,jsonURL){
$.ajax({
url:jsonURL,
dataType:"json",
success:function(jsonData){
myChart.setOption({
xAxis: {
data: jsonData.categories
},
series: [{
// 根據名字對應到相應的系列
name: '銷量',
data: jsonData.data
}]
});
// 設定載入等待隱藏
myChart.hideLoading();
}
});
}
// 初始化echar報表的方法
function initReport(myChart){
// 顯示標題，圖例和空的座標軸
myChart.setOption({
title: {
text: '非同步資料載入示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: []
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: []
}]
});
}
function createTestReport(showDivId,jsonURL){
var myChart = echarts.init(document.getElementById(showDivId));
// 初始化report物件
initReport(myChart);
myChart.showLoading({text: '正在努力的讀取資料中...' });
// 呼叫後臺獲取json資料
callbackFn(myChart,jsonURL);
}
</script>
<script type="text/javascript">
$(document).ready(function(){
var showDivId = 'main';
var jsonURL = "${base}/report/v1/getTestReportJson.do";
createTestReport(showDivId,jsonURL);
});
</script>
</body>
</html>注意事項及說明：
由於此功能是整合到其他功能上的，所以只進行了涉及到的基本的程式碼編寫和上傳。功能擴充套件和細節還不完善，只是做個引子拋磚引玉用
執行結果：
