使用echarts去对数据进行图形分析
首先导入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());
}
}
使用echarts去对数据进行图形分析的更多相关文章
- 【数据分析 R语言实战】学习笔记 第五章 数据的描述性分析（下）
5.6 多组数据分析及R实现 5.6.1 多组数据的统计分析 > group=read.csv("C:/Program Files/RStudio/002582.csv") ...
- 基于echarts 24种数据可视化展示，填充数据就可用，动手能力强的还可以DIY（演示地址+下载地址）
前言 我们先跟随百度百科了解一下什么是"数据可视化 [1]". 数据可视化,是关于数据视觉表现形式的科学技术研究. 其中,这种数据的视觉表现形式被定义为,一种以某种概要形式抽提出来 ...
- OneAPM大讲堂 | 监控数据的可视化分析神器 Grafana 的告警实践
文章系国内领先的 ITOM 管理平台供应商 OneAPM 编译呈现. 概览 Grafana 是一个开源的监控数据分析和可视化套件.最常用于对基础设施和应用数据分析的时间序列数据进行可视化分析,也可以用 ...
- echarts解决一些大屏图形配置方案汇总
本文主要记录使用echarts解决各种大屏图形配置方案. 1.说在前面 去年经常使用echarts解决一些可视化大屏项目,一直想记录下使用经验,便于日后快速实现.正好最近在整理文档,顺道一起记录在博客 ...
- Android应用程序组件Content Provider在应用程序之间共享数据的原理分析
文章转载至CSDN社区罗升阳的安卓之旅,原文地址:http://blog.csdn.net/luoshengyang/article/details/6967204 在Android系统中,不同的应用 ...
- Cacti 是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具
Cacti 是一套基于PHP,MySQL,SNMP及RRDTool开发的网络流量监测图形分析工具. mysqlreport是mysql性能监测时最常用的工具,对了解mysql运行状态和配置调整都有很大 ...
- Python数据描述与分析
在进行数据分析之前,我们需要做的事情是对数据有初步的了解,比如对数据本身的敏感程度,通俗来说就是对数据的分布有大概的理解,此时我们需要工具进行数据的描述,观测数据的形状等:而后才是对数据进行建模分析, ...
- 【Matplotlib】数据可视化实例分析
数据可视化实例分析 作者:白宁超 2017年7月19日09:09:07 摘要:数据可视化主要旨在借助于图形化手段,清晰有效地传达与沟通信息.但是,这并不就意味着数据可视化就一定因为要实现其功能用途而令 ...
- Wireshark数据抓包分析——网络协议篇
Wireshark数据抓包分析--网络协议篇 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZGF4dWViYQ==/ ...
随机推荐
- PWM呼吸灯
1.PWM简介 PWM是 Pulse Width Modulation 的缩写,中文意思就是脉冲宽度调 制,简称脉宽调制.它是利用微处理器的数字输出来对模拟电路进行控 制的一种非常有效的技 ...
- re模块的基本使用
目录 re模块 常用元字符 特殊构造 贪婪模式 非贪婪模式 re的常用函数 re模块补充 关于re模块必须知道的知识点 re模块 re模块 , 即正则表达式 , 本身是一种小型的.高度专业化的编程语言 ...
- c#Func委托
public delegate TResult Func<in T, out TResult>(T arg); 参数类型 T:此委托方法的参数类型 TResult:此委托方法的返回值类型 ...
- C#: 统计method的执行时间
对于性能分析来说,无非是内存占用,CPU使用和执行时间. 那么,对于执行时间(elapsed times)的测量,需要强调的是,尽量不要使用DateTime类来,而是应该使用Stopwatch 类.M ...
- 启动Spring Tool Suite 4时出现 could not find tools.jar spring boot live hovers....弹窗
第一步:检查一下STS启动时的加载环境 Help —› About Spring Tool Suite 4 —› Installation Details —› Configuration 本人已经 ...
- Geometry 判断几何是否被另一个几何/线段分割成多段
如下图,如何判断几何多边形A被多边形B,切割为多段几何? 几何A被几何B切割 1. 获取几何A与几何B的交集C var intersectGeometry = new CombinedGeometry ...
- PHP 从另一个角度来分析 Laravel 框架的依赖注入功能
从根本上说,依赖注入不是让对象创建一个依赖关系,也不是让工厂对象去创建对象,而是将所需的依赖变成一个外部对象,使之成为一个"某些人的问题” 你为"某些人的问题”注入了类的依赖关系. ...
- Arduino 基于 ESP8266 配置WIFI模块
Arduino 基于 ESP8266 配置WIFI模块 使用ESP8266作为服务器,使用浏览器访问该服务器,从而控制LED灯 选择 [文件]->[示例]->[ESP8266WIFI]-& ...
- nyoj 242-计算球体积 (pi*r*r*r*4/3)
242-计算球体积 内存限制:64MB 时间限制:3000ms 特判: No 通过数:21 提交数:74 难度:1 题目描述: 根据输入的半径值,计算球的体积. 输入描述: 输入数据有多组,每组占一行 ...
- Vue使用element上传
<el-upload action v-if="IsUpload" style="display:inline" list-type="pict ...