Java前端引入echart外掛
阿新 • • 發佈：2018-11-09
前端HTML檔案中引入外掛：
<div class="row"> <div class="col-md-5 col-md-offset-1"> <div class="float-e-margins"> <div class="echarts" id="proGrade"> </div> </div> </div> <div class="col-md-5 "> <div class="ibox float-e-margins"> <div class="echarts" id="backup"> </div> </div> </div> </div>
因為引入了echart外掛，所以要引入echart
<script src="/js/plugins/echarts/echarts-all.js"></script>還要引入成各種圖的js檔案
var prefix = "/nsmp/dept"; $(function () { $('#myTab li:eq(0) a').tab('show'); pie("sysCount","各單位系統總數情況","/nsmp/analysis/info_sys/count_dept"); bar("deptTime","系統等保評估時間","/nsmp/analysis/info_sys/count_create_date"); pie("proGrade","系統等級分佈情況","/nsmp/analysis/info_sys/pro_grade"); pie("backup","系統是否備案情況","/nsmp/analysis/info_sys/backup"); pie("revise","系統是否整改情況","/nsmp/analysis/info_sys/revise"); pie("dept_result","系統是否測評情況","/nsmp/analysis/info_sys/dept_result"); load(); }); function pie(id,title,url){ var allData=[]; var legendData=[]; $.ajax({ type : "post", url : url, contentType: "application/json; charset=utf-8", async : false, dataType: 'json', success : function(datas) { $.each(datas, function(index,value) { var data = {value:value.cnt, name:value.name} allData.push(data); legendData.push(value.name); }) } }); var pieChart = echarts.init(document.getElementById(id)); var pieoption = { title : { text: title, x:'center' }, tooltip : { trigger: 'item', formatter: "{a} <br/>{b} : {c} ({d}%)" }, toolbox: { show : true, feature : { restore : {show: true}, saveAsImage : {show: true} } }, legend: { orient : 'vertical', x : 'left', data: legendData }, calculable : true, series : [ { name:title, type:'pie', radius : '55%', center: ['50%', '60%'], data:allData } ] }; pieChart.setOption(pieoption); // window.onresize = barChart.resize; 寫在外面 } function bar(id,title,url){ var seriesData =[]; var x_Data =[]; $.ajax({ type : "post", url : url, contentType: "application/json; charset=utf-8", async : false, dataType: 'json', success : function(datas) { $.each(datas, function(index,value) { x_Data.push(value.createDate); seriesData.push(value.cnt); }) } }); var barChart = echarts.init(document.getElementById(id)); var baroption = { title : { text: title, x:'center' }, tooltip : { trigger: 'axis' }, toolbox: { show : true, feature : { restore : {show: true}, magicType: {show: true, type: ['line', 'bar']}, saveAsImage : {show: true} } }, grid:{ x:30, x2:40, y2:24 }, calculable : true, xAxis : [ { type : 'category', //data : ['1月','2月','3月','4月','4月','6月','7月','8月','9月','10月','11月','12月'] data :x_Data } ], yAxis : [ { type : 'value' } ], series : [ { name:title, type:'bar', //data:[2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3], data:seriesData, markPoint : {//最大值最小值標識 data : [ {type : 'max', name: '最大值'}, {type : 'min', name: '最小值'} ] }, markLine : {//平均值 data : [ {type : 'average', name: '平均值'} ] } } ] }; barChart.setOption(baroption); }
在js層中往後端controller層裡邊傳送請求
有一段程式碼不知道有沒有用，檔案中注掉了，所以我就單獨拿出來放到這裡了。
/*function load() { $('#departTable') .bootstrapTable( { method : 'get', // 伺服器資料的請求方式 get or post url : prefix + "/list", // 伺服器資料的載入地址 striped : true, // 設定為true會有隔行變色效果 dataType : "json", // 伺服器返回的資料型別 pagination : true, // 設定為true會在底部顯示分頁條 // queryParamsType : "limit", // //設定為limit則會發送符合RESTFull格式的引數 singleSelect : false, // 設定為true將禁止多選 iconSize : 'outline', pageSize : 10, // 如果設定了分頁，每頁資料條數 pageNumber : 1, // 如果設定了分佈，首頁頁碼 search : true, // 是否顯示搜尋框 showColumns : true, // 是否顯示內容下拉框（選擇顯示的列） sidePagination : "server",// 設定在哪裡進行分頁，可選值為"client" 或者 // "server" // queryParams : queryParams, // //請求伺服器資料時，你可以通過重寫引數的方式新增一些額外的引數，例如 toolbar 中的引數 如果 // queryParamsType = 'limit' ,返回引數必須包含 // limit, offset, search, sort, order 否則, 需要包含: // pageSize, pageNumber, searchText, sortName, // sortOrder. // 返回false將會終止請求 columns : [ { field : 'id', // 列欄位名 title : '序號' // 列標題 }, { field : 'deptNamee', title : '單位名稱' }, { field : 'detailAddress', title : '單位地址' }, { field : 'postalcode', title : '郵政編碼' }, { field : 'adminDivision', title : '行政區劃程式碼' }, { field : 'principalName', title : '單位負責人' }, { field : 'principalJob', title : '職務' }, { field : 'principalPhone', title : '辦公電話' }, { field : 'principalCellPhone', title : '行動電話' }, { field : 'principalEmail', title : '電子郵件' }, { field : 'subjection', title : '隸屬關係' }, { field : 'unitType', title : '單位型別' }, { field : 'industryType', title : '行業類別' }, { field : 'count', title : '資訊系統總數總數' }] }); } function reLoad() { $('#departTable').bootstrapTable('refresh'); }*/
然後是去controller層裡邊去寫介面：
/**
* 統計圖按照時間查詢資訊系統個數
* @return
*/
@Log("統計圖單位下的資訊系統個數")
@PostMapping("/info_sys/pro_grade")
@ResponseBody
public List<Map<String,Object>> getInfoSysByProGrade() {
List<Map<String,Object>> analysisList = analysisService.getInfoSysByProGrade();
return analysisList;
}
/**
* 統計圖按照備案民警查詢備案稽核情況
* @return
*/
@Log("統計圖單位下的備案稽核情況")
@PostMapping("/info_sys/backup")
@ResponseBody
public List<Map<String,Object>> getInfoSysByBackup() {
List<Map<String,Object>> analysisList = analysisService.getInfoSysByBackup();
return analysisList;
}這是controller層裡邊對應的兩個介面
後邊就是service層了：
List<Map<String,Object>> getInfoSysByProGrade();
/**
* 備案稽核情況分析
* @return
*/
List<Map<String,Object>> getInfoSysByBackup();接著是service層的實現類：
@Override
public List<Map<String, Object>> getInfoSysByProGrade() {
return analysisDao.getInfoSysByProGrade();
}
/**
* 備案稽核情況分析
* @return
*/
@Override
public List<Map<String, Object>> getInfoSysByBackup() {
return analysisDao.getInfoSysByBackup();
}
dao層，因為要調取後端的xml層去操作資料庫：
List<Map<String,Object>> getInfoSysByProGrade();
/**
* 備案稽核情況分分析
* @return
*/
List<Map<String,Object>> getInfoSysByBackup();最後邊了，就是xml層了。
第一個xml檔案的SQL語句：
<!--getInfoSysByProGrade-->
<select id="getInfoSysByProGrade" resultType="java.util.Map">
SELECT
count(g.id) AS cnt,
CONCAT(g.pro_grade,'級') AS name
FROM
info_sys AS info
LEFT JOIN grade g ON info.id = g.info_sys_id
WHERE
g.pro_grade != ""
GROUP BY
g.pro_grade;
</select>第二個檔案的xml檔案的SQL語句：
<!--getInfoSysByPolicName備案稽核情況分析-->
<select id="getInfoSysByBackup" resultType="java.util.Map">
SELECT
count(g.id) AS cnt,
IF(g.`backup`=1,'是','否') AS name
FROM
grade g
GROUP BY
g. BACKUP;
</select>好了，大概就是這樣子，讓我們回憶一下這個過程。
首先是HTML檔案——>其次是引用echart的外掛和自己本身的js檔案（用於和後端進行互動的）——>controller層開始寫介面——>service 層寫介面——>serviceImpl寫介面的實現類——>dao層需要和後端進行互動——>最後了，就是xml檔案中的SQL語句了。
告成。。。