项目中应用Echarts
首先介绍项目背景：
把如下图所示，把这个做成表格然后打印出来。
点击显示图表出现如图以下的界面：
1、首先导入echarts所需要的js文件，css文件。
将echarts所需要的东西考进来（图上的js文件并不是所有的都需要。）
2、引入以下文件
药品统计
-->
<%@ include file="/common/common_css.jsp"%>
<%@ include file="/common/common_js.jsp"%>
3、js代码：
4、表现层代码：
/**
* 该方法用于ajax获取药品统计数据的option
*
* @throws IOException
*/
public void ajaxDrugyzrea_bar() throws IOException {
// 创建数据承载对象
GsonOption option = new GsonOption();
// 初始化
List5、业务层代码：
@Override
// 查询所有药品采购详情统计
public List 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> reslutMap = yybusinessDao.list_drugyzrea(yybusinessQueryCustom, firstResult,
maxResults);
List reslutList = new ArrayList<>();
for (Map 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> 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> list = session.createSQLQuery(sqlBuilder.toString()).setFirstResult(firstResult)
.setMaxResults(maxResults).setResultTransformer(Transformers.aliasToBean(HashMap.class)).list();
DetachedCriteria dc = DetachedCriteria.forClass(Yybusiness.class);
return list;
} 小结：
虽然业务很复杂，Echarts也是刚接触的，但是最后还是研究通了。看看代码量就知道含量了。