專案中應用Echarts
阿新 • • 發佈：2019-02-11
首先介紹專案背景：
把如下圖所示，把這個做成表格然後打印出來。
點選顯示圖表出現如圖以下的介面：
1、首先匯入echarts所需要的js檔案，css檔案。
將echarts所需要的東西考進來（圖上的js檔案並不是所有的都需要。）
2、引入以下檔案
<title>藥品統計</title>
<!--ico圖示-->
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> -->
<%@ include file="/common/common_css.jsp"%>
<%@ include file="/common/common_js.jsp"%>
<script src="${baseurl}/business/analyze/js/echarts.js"></script>
<!--載入主題-->
<script src="${baseurl}/business/analyze/js/zhuti/macarons.js"></script>
<script src="${baseurl}/business/analyze/js/codemirror.js"></script> 3、js程式碼：
<script type="text/javascript">
function query(){
// Step:3 conifg ECharts's path, link to echarts.js from current page.
// Step:3 為模組載入器配置echarts的路徑，從當前頁面連結到echarts.js，定義所需圖表路徑
require.config({
paths: {
echarts: '/business/analyze/js'
}
});
// Step:4 require echarts and use it in the callback.
// Step:4 動態載入echarts然後在回撥函式中開始使用，注意保持按需載入結構定義圖表路徑
require(
[
'echarts',
'echarts/chart/bar',
'echarts/chart/line'
],
function(ec) {
//--- 宣告一個折柱 ---
myChart = ec.init(document.getElementById('main'), 'macarons');
initData();//載入資料
// --- 地圖 ---
/* 讀取資料時載入效果 */
myChart.showLoading();
initData();//載入資料
}
);
}
/* 載入資料ajax */
function initData(){
//表單引數序列化
var params = $("#drugyzreaqueryForm").serializeJson();
//重新整理datagride
$("#drugyzrealist").datagrid('reload',params);
$.ajax({
type : "post",
async : false, //非同步請求（同步請求將會鎖住瀏覽器，使用者其他操作必須等待請求完成才可以執行）
url : "${baseurl}/analyze/ajaxDrugyzrea_bar.action", //請求傳送到TestServlet處
data : params,
dataType : "json", //返回資料形式為json
success : function(result) {
//請求成功時執行該函式內容，result即為伺服器返回的json物件
//清空畫布，防止快取---------------------------------
myChart.clear();
// myChart.setOption({});//初始化資料
myChart.setOption(result);
myChart.hideLoading();
//如果不清空,圖形資料將不會更改
},
error : function(errorMsg) {
//請求失敗時執行該函式
alert("圖表請求資料失敗!");
}
})
}
</script> 4、表現層程式碼：
/**
* 該方法用於ajax獲取藥品統計資料的option
*
* @throws IOException
*/
public void ajaxDrugyzrea_bar() throws IOException {
// 建立資料承載物件
GsonOption option = new GsonOption();
// 初始化
List<Object> xAxisList = new ArrayList<>();
List<Object> barList = new ArrayList<>();
List<Object> barList2 = new ArrayList<>();
// ****準備資料,寫死了二十條
List<Yybusiness> ypxxList = yybusinessService.list_drugyzrea(yybusinessVo.getYybusinessQueryCustom(), 0, 20);
if (ypxxList!=null) {
for (Yybusiness yybusiness : ypxxList) {
xAxisList.add(yybusiness.getYpxx().getMc());
barList.add(yybusiness.getCgl());
BigDecimal cgjeBig = new BigDecimal(yybusiness.getCgje());
cgjeBig = cgjeBig.setScale(2, BigDecimal.ROUND_HALF_UP);
barList2.add(cgjeBig.doubleValue());
}
// ******設定基本屬性*******start
// 設定標題和子標題(子標題即主標題下的小文字說明)
option.title().text("藥品採購資料統計").subtext("一組");
// 設定滑鼠移入資料柱中提示框,可自行設定
option.tooltip().trigger(Trigger.axis);
// 新增圖示圖例,每個圖示僅可有一個圖例(就是統計圖上方的統計說明)
option.legend("採購量", "採購金額");
option.toolbox().show(true).feature(Tool.mark, Tool.dataView, new MagicType(Magic.line, Magic.bar).show(true),
Tool.restore, Tool.saveAsImage);
// 設定calculable值,該值是什麼?不知道
option.calculable(true);
option.xAxis(new CategoryAxis().data(xAxisList.toArray()));
// yAxis:即y軸需要顯示的資料,簡單來說就是資料的數值,如果直接new ValueAxis()
// 應該是根據資料的需求進行自動顯示
option.yAxis(new ValueAxis());
Bar bar = new Bar("採購量");
// data:就是該bar的資料,需要和上面的城鎮名稱進行對應
bar.data(barList.toArray());
// 設定標註,markPoint是一個標註物件,支援鏈式程式設計,可以直接設定值,很多特效可以在這裡設定
bar.markPoint().data(new PointData().type(MarkType.max).name("最大值"),
new PointData().type(MarkType.min).name("最小值"));
// 設定標線,也就是橫穿資料柱的一條線,代表的是平均值,詳情請看MarkType物件
bar.markLine().data(new PointData().type(MarkType.average).name("平均值"));
Bar bar2 = new Bar("採購金額");
// data:就是該bar的資料,需要和上面的城鎮名稱進行對應
bar2.data(barList2.toArray());
// 設定標註,markPoint是一個標註物件,支援鏈式程式設計,可以直接設定值,很多特效可以在這裡設定
bar2.markPoint().data(new PointData().type(MarkType.max).name("最大值"),
new PointData().type(MarkType.min).name("最小值"));
// 設定標線,也就是橫穿資料柱的一條線,代表的是平均值,詳情請看MarkType物件
bar2.markLine().data(new PointData().type(MarkType.average).name("平均值"));
option.series(bar, bar2);
}else {
option.setNoDataLoadingOption(new NoDataLoadingOption().text("無資料"));
}
getResponse().setContentType("text/html;charset=utf-8");
getResponse().getWriter().write(option.toString());
} 5、業務層程式碼：
@Override
// 查詢所有藥品採購詳情統計
public List<Yybusiness> list_drugyzrea(YybusinessQueryCustom yybusinessQueryCustom, Integer firstResult,
Integer maxResults) {
// 防止空指標異常
if (yybusinessQueryCustom == null) {
yybusinessQueryCustom = new YybusinessQueryCustom();
yybusinessQueryCustom.setStartDate("");
yybusinessQueryCustom.setEndDate("");
}
// 處理分頁
// 在shiro中獲得使用者
ActiveUser activeUser = (ActiveUser) SecurityUtils.getSubject().getPrincipal();
// 獲取用的分組資訊 判斷是供應商還是衛生院還是,衛生室
String groupid = activeUser.getGroupid();
if (yybusinessQueryCustom != null && (groupid.equals("s0101") || groupid.equals("s0102"))) {
// 通過id查詢到對應的單位資訊
DwWsy dwWsy = dwWsyDao.findById(activeUser.getSysid());
// 獲取到單位的資訊 ,然後通過單位資訊獲取到地區對應的id
String sysWsyId = dwWsy.getId();
yybusinessQueryCustom.getDwWsy().setId(sysWsyId);
} else {
ResultUtil.throwExcepionResult("對不起,你沒有訪問許可權");
}
// 此map是從資料庫查詢出來的值,在Service層轉換為物件後返回Action
List<Map<String, Object>> reslutMap = yybusinessDao.list_drugyzrea(yybusinessQueryCustom, firstResult,
maxResults);
List<Yybusiness> reslutList = new ArrayList<>();
for (Map<String, Object> map : reslutMap) {
// 處理
Yybusiness yybusiness = new Yybusiness();
// 流水號
Ypxx ypxx = new Ypxx();
ypxx.setBm((String) map.get("BM"));
// 藥品名稱
ypxx.setMc((String) map.get("MC"));
yybusiness.setYpxx(ypxx);
// 採購量
Number cgl = (Number) map.get("CGL");
yybusiness.setCgl(cgl.intValue());
// 採購金額
Number cgje = (Number) map.get("CGJE");
yybusiness.setCgje(cgje.floatValue());
reslutList.add(yybusiness);
}
return reslutList;
}6、Dao層程式碼：
@Override
// 查詢所有藥品採購資訊
public List<Map<String, Object>> list_drugyzrea(YybusinessQuery yybusinessQuery, Integer firstResult,
Integer maxResults) {
Session session = this.getSessionFactory().getCurrentSession();
StringBuilder sqlBuilder = new StringBuilder();
sqlBuilder.append("select xx.BM,xx.MC,sum(xx.cgl) cgl,sum(xx.cgje) cgje ");
sqlBuilder.append(" from (select yy.*,yx.* ");
sqlBuilder.append(" from YYBUSINESS yy,YPXX yx,(select ws.id ");
sqlBuilder.append(
"from DW_WSS ws,(select * from DW_WSY wy ");
if (yybusinessQuery.getDwWsy() != null) {
sqlBuilder.append(" where id = '"+ yybusinessQuery.getDwWsy().getId() + "' ");
}
sqlBuilder.append(" ) za ");
sqlBuilder.append(" where ws.dq like za.dq||'%') wss ");
sqlBuilder.append(" where yy.WSS_ID in(wss.id) ");
sqlBuilder.append(" and YX.ID = YY.YPXX_ID ");
// 及訂單受理完成的---------------------------------------
sqlBuilder.append(" and yy.cgzt = '01102' ");
// ---------------------------------------------------------------------
sqlBuilder.append(" ) xx ");
sqlBuilder.append(" where 1=1 ");
// 拼湊時間條件, 有四種情況 開始時間輸入,結束時間未輸入;開始時間未輸入,結束時間輸入 ;兩個都輸入;兩個都沒有輸入.
if (yybusinessQuery != null) {
if (yybusinessQuery.getStartDate() != null && !yybusinessQuery.getStartDate().equals("")) {
// 如果兩個都輸入了
if (!yybusinessQuery.getEndDate().equals("")) {
sqlBuilder.append(" and to_char(tjsj,'yyyy-mm-dd') between '" + yybusinessQuery.getStartDate()
+ "' and '" + yybusinessQuery.getEndDate() + "' ");
} else {// 說明沒有輸入結束時間
sqlBuilder.append(" and to_char(tjsj,'yyyy-mm-dd') >= '" + yybusinessQuery.getStartDate() + "'");
}
} else {// 說明 沒有輸入開始時間
// 如果輸入了結束時間
if (yybusinessQuery.getEndDate() != null && !yybusinessQuery.getEndDate().equals("")) {
sqlBuilder.append(" and to_char(tjsj,'yyyy-mm-dd') <= '" + yybusinessQuery.getEndDate() + "'");
}
}
}
sqlBuilder.append(" GROUP BY xx.bm,xx.MC order by cgje desc ");
List<Map<String, Object>> list = session.createSQLQuery(sqlBuilder.toString()).setFirstResult(firstResult)
.setMaxResults(maxResults).setResultTransformer(Transformers.aliasToBean(HashMap.class)).list();
DetachedCriteria dc = DetachedCriteria.forClass(Yybusiness.class);
return list;
}小結：
雖然業務很複雜，Echarts也是剛接觸的，但是最後還是研究通了。看看程式碼量就知道含量了。