E-charts的使用

最新推荐文章于 2024-08-13 18:13:57 发布

mxj_xh

最新推荐文章于 2024-08-13 18:13:57 发布

阅读量842

点赞数 1

文章标签： java html echarts

本文链接：https://blog.csdn.net/mxj_xh/article/details/111152053

版权

本文介绍了E-charts的使用，包括柱状图、饼状图的展示方式，对比了Jfreechart和High-charts。重点讲解了E-charts在显示公司财务统计报告和学生作业完成情况等场景的应用，并分享了E-charts学习的总结，强调数据可视化的过程是取数据、存值和转向。

摘要由CSDN通过智能技术生成

E-charts的使用

1.柱状图和饼状图
1.1怎样展示？
1.1.1）.Jfreechart：免费，功能一般，效果一般（不怎么绚丽），但是是之前的产物，以前用的比较多，现在用的比较少了，建议了解
1.1. 2）.e-charts:免费，百度出产的，功能强大，效果（绚丽），近几年的产物，现在国内的众多软件公司用的比较多，推荐学习
1.1.3）.Hight-charts：国外产生，功能强大，效果绚丽，据说XX是抄袭他的，在国内用的比较少，建议了解
1.2使用图表工具的意义
1.2.1）.清晰直观的使得数据可视化
1.1.2）.结和后台技术真正做到数据的实时变化，例如可以实现k线图，因为有js定时器
1.1.3）.提升软件产品的用户体验
2.e-charts应用举例之通过柱状图显示公司的全年–季度财务统计报告
1.引入e-charts和jquery

2.在标签中设置图显示的在div中

：备注如果要是想显示自动适配为就设定为100%

3.后台传递给zhutu.jsp三个list，其目的是为了显示收入，支出和预算

/**
	 * 1.柱状图
	 * @param request
	 * @param response
	 * @throws IOException 
	 * @throws SQLException 
	 * @throws ClassNotFoundException 
	 * @throws ServletException 
	* */
private void zhu(HttpServletRequest request, HttpServletResponse response) throws IOException, ClassNotFoundException, SQLException, ServletException {
   
	  System.out.println("TuServlet----->zhu()---->");	
	  List<Map<String, Object>> list_shouru=service.queryShouru();
	  List<Map<String, Object>> list_zhichu=service.queryZhichu();
	  List<Map<String, Object>> list_yusuan=service.queryYusuan();
	 
	  request.setAttribute("list_shouru", list_shouru);
	  request.setAttribute("list_zhichu", list_zhichu);
	  request.setAttribute("list_yusuan", list_yusuan);
	  
      request.getRequestDispatcher("/jsps/manages/tu/zhuTu.jsp").forward(request, response);
}

	public List<Map<String, Object>> queryShouru() throws ClassNotFoundException, SQLException {
   
		String sql=" SELECT  QUARTER(riqi) jidu,SUM(shouRuJinEr) jiner  FROM   shouru  GROUP BY  QUARTER(riqi)  ";
		List<Map<String, Object>> list_shouru = dao.executeQueryForList(sql);
		return list_shouru;
	}

	public List<Map<String, Object>> queryZhichu() throws ClassNotFoundException, SQLException {
   
		String sql2=" SELECT  QUARTER(riqi) jidu,SUM(zhiChuJinEr) jiner  FROM   zhichu  GROUP BY  QUARTER(riqi)  ";
		List<Map<String, Object>> list_zhichu = dao.executeQueryForList(sql2);
		return list_zhichu;
	}

	public List<Map<String, Object>> queryYusuan() throws ClassNotFoundException, SQLException {
   
		String sql3=" SELECT  QUARTER(riqi) jidu,SUM(yuSuanJinEr) jiner  FROM   yusuan  GROUP BY  QUARTER(riqi) ";
		List<Map<String, Object>> list_yusuan = dao.executeQueryForList(sql3);
		return list_yusuan;
	}

4.在zhutu.jsp中通过js将3个list中的数据显示在div上

  <script type="text/javascript">
     alert("页面已经加载了就开始触发了.....");
	 var shouruData=[];//数组对象：存放12个月的收入金额
	 var zhichuData=[];//数组对象：存放12个月的支出金额
	 var yusuanData=[];//数组对象：存放12个月的预算金额
	 <c:forEach items="${list_shouru}" var="shouru">
	 shouruData.push(parseInt("${shouru.jiner}"));
     </c:forEach>
	
		for(var i =0;i<shouruData.length;i++)
		{
   
			//alert("第"+(i+1)+"个月的收入金额为:"+shouruData[i]);
		}
				
		<c:forEach items="${list_zhichu}" var="zhichu">
		zhichuData.push(parseInt("${zhichu.jiner}"));
	     </c:forEach>
		
			for(var i =0;i<zhichuData.length;i++)