apex图表使用饼图居中_使用Echarts饼图显示指定时间段的支出

最新推荐文章于 2024-05-29 09:39:04 发布

大橘很重

最新推荐文章于 2024-05-29 09:39:04 发布

阅读量384

点赞数

文章标签： apex图表使用饼图居中

本文链接：https://blog.csdn.net/weixin_29474859/article/details/112418888

版权

本文介绍了如何使用Echarts显示指定时间段的支出情况，通过Apex图表实现饼图的居中展示。内容包括Echarts的下载与引入、jsp页面、控制层、业务层和Dao层的代码实现，以及SQL查询语句和DateUtil工具类的使用。

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

Echarts的认识请查看上一篇文章

现在直接进入主题

代码实现：

1.获取获取 Echarts:官网下载即可,然后放入WebContent/js文件下

echarts.min.js

647K

百度网盘

2.jsp页面代码

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>收入支出</title>
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<link href="css/select.css" rel="stylesheet" type="text/css" />
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/jquery.idTabs.min.js"></script>
	<script type="text/javascript" src="js/select-ui.min.js"></script>
	<script type="text/javascript" src="editor/kindeditor.js"></script>

	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript">
	
	
	</script>
	<script type="text/javascript">
		$(function(e) {
    
			    $(".select1").uedSelect({
    
					width : 200			  
				});				
			});
	
		$(function(){
    
			changePie(0);//查询全部支出信息
		});
		
		function changePie(val){
    
			//发送Ajax请求
			$.ajax({
    
				url:"InOutServlet?method=getPieData",
				data:{
    type:val},
				type:"POST",
				dataType:"text",
				success:function(data){
    
					eval("var arr="+data);
					var dom = document.getElementById("container");
					var myChart = echar