使用echarts去对数据进行图形分析

最新推荐文章于 2024-09-28 22:03:19 发布

有园人

最新推荐文章于 2024-09-28 22:03:19 发布

阅读量1.4k

点赞数

分类专栏： JavaEE 文章标签：使用echarts去对数据进行图形分析

本文链接：https://blog.csdn.net/qq_42031653/article/details/100568631

版权

JavaEE 专栏收录该内容

90 篇文章 2 订阅

订阅专栏

首先导入js包：echarts.min.js

<script type="text/javascript" src="js/echarts.min.js"></script>

<%@ 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>My JSP 'paymentstatic.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="js/jquery.js"></script>
	<script type="text/javascript" src="js/echarts.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$.ajax({
				url:"servlet/InOutServlet?method=getPieData",
				type:"POST",
				dataType:"text",
				success:function(data){
					eval("var arr="+data);
					var dom = document.getElementById("container");
					var myChart = echarts.init(dom);
					var option = {
					    title : {
					        text: '尚学堂支出信息统计',
					        subtext: '报销统计',
					        x:'center'
					    },
					    tooltip : {
					        trigger: 'item',
					        formatter: "{a} <br/>{b} : {c} ({d}%)"
					    },
					    legend: {
					        orient: 'vertical',
					        left: 'left',
					        data: ['1','2','3','4','5']
					    },
					    series : [
					        {
					            name: '访问来源',
					            type: 'pie',
					            radius : '55%',
					            center: ['50%', '60%'],
					            data:arr,
					            itemStyle: {
					                emphasis: {
					                    shadowBlur: 10,
					                    shadowOffsetX: 0,
					                    shadowColor: 'rgba(0, 0, 0, 0.5)'
					                }
					            }
					        }
					    ]
					};
					;
					if (option && typeof option === "object") {
					    myChart.setOption(option, true);
					}
				}
			});			
		});
	</script>
  </head>
  
  <body>
     <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="container" style="height: 100%"></div>
  </body>
</html>

使用ajax接收服务器响应的数据数据。。

Servlet：

package com.bjsxt.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.bjsxt.service.InOutService;
import com.bjsxt.service.impl.InOutServiceImpl;

public class InOutServlet extends BaseServlet {

	public void getPieData(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		String stype = request.getParameter("type");
		int type = 0;
		try{
			type = Integer.parseInt(stype);
		}catch(Exception e){
			e.printStackTrace();
		}
		
		//调用业务层获取jsonStr
		InOutService ioService = new InOutServiceImpl();
		String jsonStr = ioService.getPieData(type);//0代表查询所有时间段  1  2  3
		
		
		//返回JsonStr
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(jsonStr);
		
	}
	public void getBarData(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		//调用业务层获取jsonStr
		//String jsonStr = "[['Mon1', 'Tue2', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],[120, 200, 1500, 800, 70, 110, 130]]";
		InOutService ioService = new InOutServiceImpl();
		String jsonStr = ioService.getBarData();
		//返回JsonStr
		response.setContentType("text/html;charset=utf-8");
		response.getWriter().println(jsonStr);
		
	}

}

service接口：

package com.bjsxt.service;

public interface InOutService {
	/**
	 * 返回收入的柱状图数据
	 * @return
	 */
	String getBarData();
	/**
	 * 返回支出的饼图数据
	 * @param i
	 * @return
	 */
	String getPieData(int i);

}

service实现类

package com.bjsxt.service.impl;

import java.util.List;

import com.bjsxt.dao.IncomeDao;
import com.bjsxt.dao.PaymentDao;
import com.bjsxt.dao.impl.IncomDaoImpl;
import com.bjsxt.dao.impl.PaymentDaoImpl;
import com.bjsxt.service.InOutService;

public class InOutServiceImpl implements InOutService {

	@Override
	public String getBarData() {
		//调用DAO层获取收入数据（List）
		IncomeDao  icDao = new IncomDaoImpl();
		List<Object []> list = icDao.findStaticsData();
		
		//将List转换成jsonStr 
		StringBuilder icTypeArr = new StringBuilder("[");//['Mon1', 'Tue2', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		StringBuilder amountArr = new StringBuilder("[");//[120, 200, 1500, 800, 70, 110, 130]
		for(int i=0;i<list.size();i++){
			Object [] arr = list.get(i);// {项目开发,400}
			if(i<list.size()-1){
				icTypeArr.append("\""+arr[0]+"\",");
				amountArr.append(arr[1]+",");
			}else{
				icTypeArr.append("\""+arr[0]+"\"");
				amountArr.append(arr[1]);
			}
		}
		icTypeArr.append("]");
		amountArr.append("]");
		
		//"[['Mon1', 'Tue2', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],[120, 200, 1500, 800, 70, 110, 130]]";
		String jsonStr = "["+icTypeArr.toString()+","+amountArr.toString()+"]";
		//返回jsonStr
		return jsonStr;
	}

	@Override
	public String getPieData(int type) {
		//调用DAO层获取支出入数据（List）
		PaymentDao  pmDao = new PaymentDaoImpl();
		List<Object []> list = pmDao.findStaticsData(type);
		
//		String jsonStr = "[{value:345, name:'直接访问'},{value:310, name:'邮件营销'},"
//		+ "{value:234, name:'联盟广告'},{value:135, name:'视频广告'},"
//		+ "{value:1548, name:'搜索引擎'}]";
		//将List转换成jsonStr 		
		StringBuilder jsonStr =new StringBuilder("[");
		for(int i=0;i<list.size();i++){
			Object [] arr = list.get(i);
			jsonStr.append("{");
			jsonStr.append("\"value\":"+arr[1]+",");
			jsonStr.append("\"name\":\""+arr[0]+"\"");
			
			if(i<list.size()-1){
				jsonStr.append("},");
			}else{
				jsonStr.append("}");
			}
			
		}
		jsonStr.append("]");
		
		//返回jsonStr
		return jsonStr.toString();
	}

}

Dao层接口：

package com.bjsxt.dao;

import java.util.List;

public interface IncomeDao {

	List<Object[]> findStaticsData();

}

dao层的实现类：

package com.bjsxt.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;
import java.util.List;

import com.bjsxt.dao.IncomeDao;
import com.bjsxt.entity.Department;
import com.bjsxt.util.DBUtil;

public class IncomDaoImpl implements IncomeDao {

	@Override
	public List<Object[]> findStaticsData() {
		Connection conn = null;
		PreparedStatement pstmt = null;
		ResultSet rs = null;
		List<Object []> list = new ArrayList<Object[]>();
		try {
			//2.建立和数据库的连接（url，user、password）			
			conn =DBUtil.getConnection();
			
			//3.创建SQL命令发送器（手枪）
			pstmt = conn.prepareStatement("select ictype,sum(amount) from income  group by ictype");
			//4.使用SQL命令发送器发送SQL命令给数据库，并得到返回的结果（子弹）			
			rs = pstmt.executeQuery();
			
			//5.处理结果（封装到List中）
			while(rs.next()){
				//1.取出当前行各个字段的值
				String icType = rs.getString(1);
				double amount = rs.getDouble(2);
				//2.将当前行各个字段的值封装到Employee对象中
				Object []  arr = {icType,amount};
				//3.将user放入userList
				list.add(arr);
				
			}
			
		} catch (SQLException e) {
			e.printStackTrace();
		}finally{
			//6.关闭资源
			DBUtil.closeAll(rs, pstmt, conn);
		}
		
		//7.返回数据		
		return list;
	}
	
	public static void main(String[] args) {
		IncomeDao  icDao = new IncomDaoImpl();
		List<Object []> list = icDao.findStaticsData();
		System.out.println(list.size());
	}

}