使用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==/ ...
随机推荐
- vue学习笔记(五)条件渲染和列表渲染
前言 在众多的编程语言中,我们的基础语法总是少不了一些专业语法,比如像定义变量,条件语句,for循环,数组,函数等等,vue.js这个优秀的前端框架中也有同样的语法,我们换一个名词,将条件语句改成专业 ...
- 列转行pivot函数在SQL Sever里面和Oracle里面的用法区别
首先pivot是一个列转行的函数,反向用是unpivot(行转列). 在SQL sever中可以这么写 SELECT * FROM [TABLE] /*数据源*/ AS A PIVOT ( MAX/* ...
- nodejs+nginx+mongdb+redis安装学习笔记(之nodejs安装)
基础环境 本文安装示例使用ubuntu-14.10-server 64位 操作系统,并没有在其他系统中测试 第一步:安装Nodejs 1.通过apt-get install 安装 (1)下载安装deb ...
- 【01】主函数main
java和C#非常相似,它们大部分的语法是一样的,但尽管如此,也有一些地方是不同的. 为了更好地学习java或C#,有必要分清它们两者到底在哪里不同. 首先,我们将探讨主函数main. java的主函 ...
- Selenium网页自动登录项目(基于Python从0到1)
Selenium是一个自动化测试工具,利用它我们可以驱动浏览器执行特定的动作,如点击.下拉等操作. 本文讲述的是通过自动化的方式登陆某一网站,其中包含Selenium+python自动化项目环境如何部 ...
- webpackd学习的意义
高速发展的前端技术,与浏览器支持的不相匹配.导致前端必须把前端比较先进的技术进行一层编码从而使得浏览器可以加载. 比如前端框架Vue,Angular,React.Less,Sass.TypeScrip ...
- C#变量---xdd
cshape(c#)学习笔记 1. string str1=Console.ReadLine();//键盘输入的默认为字符串 2. Console.WriteLine('你的成绩是'+a+'分'); ...
- 2019牛客暑期多校训练营（第九场） E All men are brothers
传送门 知识点:并查集+组合数学 并查集合并操作可以理解为使得两个集合的人互相成为朋友,也就是两个集合并在了一起,答案是要求从所有人中挑出四个互相不是朋友的四个人,比较基础的组合数学知识,但因为每个集 ...
- maven本地仓库路径和修改
1.本地仓库,顾名思义,就是Maven在本地存储构件的地方. 注:maven的本地仓库,在安装maven后并不会创建,它是在第一次执行maven命令的时候才被创建 maven本地仓库的默认位置:无论是 ...
- 使用最新AndroidStudio编写Android编程权威指南（第3版）中的代码会遇到的一些问题
Android编程权威指南(第3版)这本书是基于Android7.0的,到如今已经过于古老,最新的Android版本已经到10,而这本书的第四版目前还没有正式发售,在最近阅读这本书时,我发现这本书的部 ...