項目整理--Echarts前端後臺的貫通寫法
項目整理–Echarts前端後臺的貫通寫法
注：下面全部內容創建在FH admin開源框架和eharts插件基礎上，建議觀看本案例者進行了解。javascript
業務邏輯
繪製兩張圖表。分別顯示城市空間庫和其它數據倉庫的信息（城市空間庫單獨繪製）。要求：城市空間庫顯示數據庫的實際使用量和剩餘用量。其它庫顯示百分比。html
效果展現
默認顯示狀態
鼠標指向狀態
前端
實現過程
1.後臺數據處理
表結構設計
java
數據庫數據
注：此處數據爲顯示數據，並非項目使用數據，僅做測試使用。web
Mapper文件寫法ajax
注1：此處在前端頁面需要繪製兩個圖表，所以用兩條sql語句。差異爲提供查詢的type字段不一樣。此字段也可由傳參帶入。使用一條sql分別實現查詢，這次爲了展現直觀，採用第一種作法。spring
注2：由於採用框架，此處數據爲採用實體類封裝，而是採用HashMap封裝。可以依據本身習慣。建立實體類來存儲數據庫中數據。sql
apache
<?xml version="1.0" encoding="UTF-8"?數據庫
> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="SjkyxMapper"> <!-- 列表（無實際意義，爲之後擴展功能用） --> <select id="datalist" parameterType="page" resultType="pd"> SELECT a.id, a.dept, a.order, a.score FROM cms_yw_fwxl AS a ORDER BY a.order </select> <!-- 獲取城市空間庫的信息 --> <select id="getcskjcharts" parameterType="page" resultType="pd"> SELECT c.type, c.id, c.`name`, c.volume_total, c.volume_total_unit, c.volume_use, c.volume_use_unit, c.create_time, c.creator, c.update_time, c.updater, c.remark FROM cms_yw_sjkyx AS c WHERE type = 1 </select> <!-- 獲取其它庫的信息 --> <select id="getothercharts" parameterType="page" resultType="pd"> SELECT c.type, c.id, c.`name`, c.volume_total, c.volume_total_unit, c.volume_use, c.volume_use_unit, c.create_time, c.creator, c.update_time, c.updater, c.remark FROM cms_yw_sjkyx AS c WHERE type = 2 </select> </mapper>Service中寫法
注1:此處採用的已有框架，使用已經提供的統一的Dao。假設使用傳統的SSM寫法。可以本身稍加改動，在此不作贅述。
注2：依據業務邏輯理解代碼，當中封裝了createData方法來實現不一樣的業務邏輯。
@Service("sjkyxService")
public class SjkyxService {
@Resource(name = "daoSupport")
private DaoSupport dao;
/* *數據資源列表 */
public List<PageData> list(Page page)throws Exception{
return (List<PageData>)dao.findForList("SjkyxMapper.datalist", page);
}
/* * 用來返回城市空間庫使用信息 */
public Map<String, Object> getcskjcharts(int type)throws Exception{
List<PageData> list = (List<PageData>)dao.findForList("SjkyxMapper.getcskjcharts", null);
return createData(list,type);
}
/* * 用來返回其它庫所用信息 */
public Map<String, Object> getothercharts(int type)throws Exception{
List<PageData> list = (List<PageData>)dao.findForList("SjkyxMapper.getothercharts", null);
return createData(list,type);
}
/* * 內部設計的方法。用於封裝查詢數據 */
private Map<String, Object> createData(List<PageData> list,int type)throws Exception{
Map<String,Object> resultMap = new HashMap<String,Object>();
//x軸現實的信息
String[] xAxisArr = new String[list.size()];
//總量信息
Integer[] restArr = new Integer[list.size()];
//已使用信息
Integer[] usedArr = new Integer[list.size()];
if(1==type){
for(int i=0;i<list.size();i++){
xAxisArr[i] =(String) list.get(i).get("name");
usedArr[i] = Integer.parseInt(new java.text.DecimalFormat("0").format((Double) list.get(i).get("volume_use")));
double restData = (Double)list.get(i).get("volume_total")-(Double) list.get(i).get("volume_use");
restArr[i] = Integer.parseInt(new java.text.DecimalFormat("0").format(restData));
}
}else if(2==type){
for(int i=0;i<list.size();i++){
xAxisArr[i] =(String) list.get(i).get("name");
double perData = (Double) list.get(i).get("volume_use")/(Double) list.get(i).get("volume_total")*100;
usedArr[i] = Integer.parseInt(new java.text.DecimalFormat("0").format(perData));
double restData = ((Double)list.get(i).get("volume_total")-(Double) list.get(i).get("volume_use"))/(Double) list.get(i).get("volume_total")*100;
restArr[i] = Integer.parseInt(new java.text.DecimalFormat("0").format(restData));
}
}
resultMap.put("xAxisArr", xAxisArr);
resultMap.put("restArr", restArr);
resultMap.put("usedArr", usedArr);
return resultMap;
}
}
Controller中寫法
主要用於跳轉頁面和Ajax傳遞數據，涉及權限管理的部分可以不用看。
package com.bonc.dgioc.portal.web.controller.portal.operate;
import java.text.DateFormat;
import java.text.SimpleDateFormat;
import java.util.Date;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import javax.annotation.Resource;
import org.apache.shiro.SecurityUtils;
import org.apache.shiro.session.Session;
import org.apache.shiro.subject.Subject;
import org.springframework.beans.propertyeditors.CustomDateEditor;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.WebDataBinder;
import org.springframework.web.bind.annotation.InitBinder;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import com.bonc.dgioc.portal.common.utils.Const;
import com.bonc.dgioc.portal.common.utils.PageData;
import com.bonc.dgioc.portal.domain.entity.Page;
import com.bonc.dgioc.portal.service.portal.operate.FwxlService;
import com.bonc.dgioc.portal.service.portal.operate.SjkyxService;
import com.bonc.dgioc.portal.service.portal.operate.SjzyService;
import com.bonc.dgioc.portal.web.controller.base.BaseController;
/** * 功 能:運維首頁數據庫執行狀況 * 類名稱：SjkyxController * 建立人：@author Xiaoqi * 建立時間：2016-03-29 */
@Controller
@RequestMapping(value="/operate/sjkyx")
public class SjkyxController extends BaseController {
@Resource(name="sjkyxService")
private SjkyxService sjkyxService;
/** * 獲取sjkyx列表 * @author Xiaoqi * @date 2016-03-30 */
@RequestMapping(value="/getsjkyxlist")
public ModelAndView list(Page page){
logBefore(logger, "列表sjkyx信息");
ModelAndView mv = this.getModelAndView();
PageData pd = new PageData();
try{
pd = this.getPageData();
page.setPd(pd);
List<PageData> varList = sjkyxService.list(page); //列出sjkyx列表
mv.setViewName("portal/operate/sjkyx_list");
mv.addObject("varList", varList);
mv.addObject("pd", pd);
mv.addObject(Const.SESSION_QX,this.getHC()); //button權限
} catch(Exception e){
logger.error(e.toString(), e);
}
return mv;
}
/** * 返回城市空間庫的圖表信息 * @return 返回城市空間庫的圖表信息 * @date 2016-04-11 */
@ResponseBody
@RequestMapping(value="/getcskjcharts")
public Map<String,Object> getcskjcharts(){
logBefore(logger, "獲取城市空間庫圖表信息");
Map<String,Object> resultMap = new HashMap<String,Object>();
try{
resultMap = sjkyxService.getcskjcharts(1); //獲取其它庫圖表信息
} catch(Exception e){
logger.error(e.toString(), e);
}
return resultMap;
}
/** * 返回城市空間庫以外的其它庫的圖表信息 * @return 返回城市空間庫以外的其它庫的圖表信息 * @date 2016-04-11 */
@ResponseBody
@RequestMapping(value="/getothercharts")
public Map<String,Object> getothercharts(){
logBefore(logger, "獲取其它庫圖表信息");
Map<String,Object> data = new HashMap<String,Object>();
try{
data = sjkyxService.getothercharts(2); //獲取其它庫圖表信息
} catch(Exception e){
logger.error(e.toString(), e);
}
return data;
}
/* ===============================權限================================== */
public Map<String, String> getHC(){
Subject currentUser = SecurityUtils.getSubject(); //shiro管理的session
Session session = currentUser.getSession();
return (Map<String, String>)session.getAttribute(Const.SESSION_QX);
}
/* ===============================權限================================== */
@InitBinder
public void initBinder(WebDataBinder binder){
DateFormat format = new SimpleDateFormat("yyyy-MM-dd");
binder.registerCustomEditor(Date.class, new CustomDateEditor(format,true));
}
}
2.前端頁面處理
下面爲分部代碼解讀，最下方有前端頁面全部代碼。
引入echarts和jQuery文件
注：此處bootstrap爲前端框架，此處知道當中含有jQuery文件就能夠。
<!-- 引入 -->
<%@ include file="../../common/bootstrap_js.jsp"%>
<script type="text/javascript" src="<%=basePath%>/resources/module/echarts/echarts.js"></script><!-- 引入echarts -->
創建div存放不一樣的圖表
注：echarts中一個div僅僅能繪製一張圖表
<div>
<div id="chkj" style="height:160px;width:20%;text-align:right;float:left;">
</div>
<div id="other" style="height:160px;width:80%;text-align:right;float:right;">
</div>
</div>
echarts代碼解讀
引入echarts的主題和各類組件，調用繪製圖表的方法drawotherCharts和drawchkjCharts
require.config({
paths:{
echarts:'<%=basePath%>/resources/module/echarts'
}
});
require(
['echarts',
'echarts/theme/macarons',
'echarts/chart/line', //使用折線圖,就需要加載line模塊,按需加載（柱圖:bar;餅圖:pie;地圖:map;）
'echarts/chart/bar',
'echarts/chart/pie'
],
function (ec,theme) {
drawotherCharts(ec,theme),
drawchkjCharts(ec,theme)
});
繪製圖表：
function drawotherCharts(ec,theme){
var myChart = ec.init(document.getElementById("other"),theme);
option = {
tooltip : {
trigger: 'axis',
axisPointer : { // 座標軸指示器，座標軸觸發有效
type : 'shadow' // 默以爲直線，可選爲：'line' | 'shadow'
},
formatter: function (params){ //用來編輯鼠標指向時的文字信息
return params[0].name + '<br/>'
+ params[0].seriesName + ' : ' + params[0].value + '<br/>'
+ params[1].seriesName + ' : ' + (params[1].value + params[0].value);
}
},
legend: { //此處爲圖例
selectedMode:false,
data:['已使用', '未使用']
},
grid:{ //此處控制圖表在div中的位置
x:20,
y:60,
x2:0,
y2:35
},
toolbox: { //此處爲控制圖表的工具欄，設置show選項爲false，可以將show的false改成true來查看效果。
show : false,
feature : {
mark : {show: true},
dataView : {show: true, readOnly: false},
restore : {show: true},
saveAsImage : {show: true}
}
},
calculable : false, //取消加載時的動態效果
xAxis : [ //x軸現實信息配置
{
type : 'category',
data : [],
splitLine:{
show:false
},
axisTick:false,
axisLine:false,
axisLabel:{
rotate:0,
margin:10,
textStyle:{
fontSize : '2px',
fontFamily : '微軟雅黑',
color: '#00A3D1'
}
},
}
],
yAxis : [ //y軸數據配置
{
type : 'value',
axisLine:false,
splitLine:{
show:false
},
axisTick:false,
boundaryGap: [0, 0.1],
axisLabel:{
show:false
}
}
],
series : [
{
name:'已使用',
type:'bar',
stack: 'sum',
barCategoryGap: '50%',
barWidth:45,
itemStyle: {
normal: {
color: '#00A3D1',
barBorderColor: '#00A3D1',
barBorderWidth: 4,
barBorderRadius:0,
label : {
show: true, position: 'insideTop'
}
}
},
data:[]
},
{
name:'未使用',
type:'bar',
stack: 'sum',
itemStyle: {
normal: {
color: '#fff',
barBorderColor: '#00A3D1',
barBorderWidth: 3,
barBorderRadius:0,
label : {
show: true,
position: 'top',
textStyle: {
fontSize : '10',
fontFamily : '微軟雅黑',
color: '#00A3D1'
}
}
}
},
data:[]
}
]
};
myChart.showLoading({
text: "圖表數據正在努力加載..."
});
//經過ajax向後臺發送請求。傳遞數據。
$.ajax({
type: 'GET',
url : '<%=path %>/operate/sjkyx/getothercharts',
dataType: 'json',
success:function(data){
debugger;
option.xAxis[0]['data']=data.xAxisArr;
option.series[0]['data']=data.usedArr;
option.series[1]['data']=data.restArr;
myChart.setOption(option);
},
error:function(){
debugger;
},
complete:function(){
//不管數據接口成功或異常，都最終加載提示
myChart.hideLoading();//中止動畫加載提示
}
})
}
echarts完整代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Widgets - Ace Admin</title>
<base href="<%=basePath%>">
<!-- 引入 -->
<%@ include file="../../common/bootstrap_js.jsp"%>
<script type="text/javascript" src="<%=basePath%>/resources/module/echarts/echarts.js"></script><!-- 引入echarts -->
<script type="text/javascript"> require.config({ paths:{ echarts:'<%=basePath%>/resources/module/echarts' } }); require( ['echarts', 'echarts/theme/macarons', 'echarts/chart/line', //使用折線圖,就需要加載line模塊,按需加載（柱圖:bar;餅圖:pie;地圖:map;） 'echarts/chart/bar', 'echarts/chart/pie' ], function (ec,theme) { drawotherCharts(ec,theme), drawchkjCharts(ec,theme) }); function drawotherCharts(ec,theme){ var myChart = ec.init(document.getElementById("other"),theme); option = { tooltip : { trigger: 'axis', axisPointer : { // 座標軸指示器，座標軸觸發有效 type : 'shadow' // 默以爲直線。可選爲：'line' | 'shadow' }, formatter: function (params){ //用來編輯鼠標指向時的文字信息 return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value + '<br/>' + params[1].seriesName + ' : ' + (params[1].value + params[0].value); } }, legend: { //此處爲圖例 selectedMode:false, data:['已使用', '未使用'] }, grid:{ //此處控制圖表在div中的位置 x:20, y:60, x2:0, y2:35 }, toolbox: { //此處爲控制圖表的工具欄，設置show選項爲false，可以將show的false改成true來查看效果。 show : false, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : false, //取消加載時的動態效果 xAxis : [ //x軸現實信息配置 { type : 'category', data : [], splitLine:{ show:false }, axisTick:false, axisLine:false, axisLabel:{ rotate:0, margin:10, textStyle:{ fontSize : '2px', fontFamily : '微軟雅黑', color: '#00A3D1' } }, } ], yAxis : [ //y軸數據配置 { type : 'value', axisLine:false, splitLine:{ show:false }, axisTick:false, boundaryGap: [0, 0.1], axisLabel:{ show:false } } ], series : [ { name:'已使用', type:'bar', stack: 'sum', barCategoryGap: '50%', barWidth:45, itemStyle: { normal: { color: '#00A3D1', barBorderColor: '#00A3D1', barBorderWidth: 4, barBorderRadius:0, label : { show: true, position: 'insideTop' } } }, data:[] }, { name:'未使用', type:'bar', stack: 'sum', itemStyle: { normal: { color: '#fff', barBorderColor: '#00A3D1', barBorderWidth: 3, barBorderRadius:0, label : { show: true, position: 'top', textStyle: { fontSize : '10', fontFamily : '微軟雅黑', color: '#00A3D1' } } } }, data:[] } ] }; myChart.showLoading({ text: "圖表數據正在努力加載..." }); //經過ajax向後臺發送請求。傳遞數據。 $.ajax({ type: 'GET', url : '<%=path %>/operate/sjkyx/getothercharts', dataType: 'json', success:function(data){ debugger; option.xAxis[0]['data']=data.xAxisArr; option.series[0]['data']=data.usedArr; option.series[1]['data']=data.restArr; myChart.setOption(option); }, error:function(){ debugger; }, complete:function(){ //不管數據接口成功或異常。都最終加載提示 myChart.hideLoading();//中止動畫加載提示 } }) } function drawchkjCharts(ec,theme){ var myChart = ec.init(document.getElementById("chkj"),theme); options = { tooltip : { show:false, trigger: 'axis', axisPointer : { // 座標軸指示器。座標軸觸發有效 type : 'shadow' // 默以爲直線，可選爲：'line' | 'shadow' }, formatter: function (params){ return params[0].name + '<br/>' + params[0].seriesName + ' : ' + params[0].value + '<br/>' + params[1].seriesName + ' : ' + (params[1].value + params[0].value); } }, grid:{ x:20, y:50, x2:0, y2:35 }, toolbox: { show : false, feature : { mark : {show: true}, dataView : {show: true, readOnly: false}, restore : {show: true}, saveAsImage : {show: true} } }, calculable : false, xAxis : [ { type : 'category', data : [], splitLine:{ show:false }, axisTick:false, axisLine:false, axisLabel:{ rotate:0, margin:10, textStyle:{ fontSize : '2px', fontFamily : '微軟雅黑', color: 'red' } }, } ], yAxis : [ { type : 'value', axisLine:false, splitLine:{ show:false }, axisTick:false, boundaryGap: [0, 0.1], axisLabel:{ show:false } } ], series : [ { name:'已使用', type:'bar', stack: 'sum', barCategoryGap: '50%', barWidth:45, itemStyle: { normal: { color: 'red', barBorderColor: 'red', barBorderWidth: 4, barBorderRadius:0, label : { show: true, position: 'insideTop', formatter:'{c}'+'T' } } }, data:[] }, { name:'未使用', type:'bar', stack: 'sum', itemStyle: { normal: { color: '#fff', barBorderColor: 'red', barBorderWidth: 3, barBorderRadius:0, label : { show: true, position: 'top', formatter:'{c}'+'T', textStyle: { fontSize : '10', fontFamily : '微軟雅黑', color: 'red' } } } }, data:[] } ] }; myChart.showLoading({ text: "圖表數據正在努力加載..." }); $.ajax({ type: 'GET', url : '<%=path %>/operate/sjkyx/getcskjcharts', dataType: 'json', success:function(data){ debugger; options.xAxis[0]['data']=data.xAxisArr; options.series[0]['data']=data.usedArr; options.series[1]['data']=data.restArr; myChart.setOption(options); }, error:function(){ debugger; }, complete:function(){ //不管數據接口成功或異常，都最終加載提示 myChart.hideLoading();//中止動畫加載提示 } }) } </script>
</head>
<body style="height:160px;width:450px;text-align:left;">
<div>
<div id="chkj" style="height:160px;width:20%;text-align:right;float:left;">
</div>
<div id="other" style="height:160px;width:80%;text-align:right;float:right;">
</div>
</div>
</body>
</html>
相關文章
- 1. React項目（後臺管理）(echarts圖表)
- 2. 一套完整java項目:後臺+管理+前端
- 3. Vue完整前後臺項目介紹
- 4. 先後端分離的項目中springboot項目和前端項目的整合
- 5. 商城項目後臺前端
- 6. 完整後臺管理項目GloryFast
- 7. vue項目前端知識點整理
- 8. 前端項目報錯整理
- 9. 後臺開發寫前端的思路
- 10. 前端寫項目經驗
- 更多相關文章...
- • Mozilla 項目 - 瀏覽器信息
- • Maven 項目模板 - Maven教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
- • Docker 清理命令
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. React項目（後臺管理）(echarts圖表)
- 2. 一套完整java項目:後臺+管理+前端
- 3. Vue完整前後臺項目介紹
- 4. 先後端分離的項目中springboot項目和前端項目的整合
- 5. 商城項目後臺前端
- 6. 完整後臺管理項目GloryFast
- 7. vue項目前端知識點整理
- 8. 前端項目報錯整理
- 9. 後臺開發寫前端的思路
- 10. 前端寫項目經驗