使用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==/ ...
随机推荐
- mvn上传dubbo jar到nexus
第一种方式: mvn deploy:deploy-file -DgroupId=com.alibaba -DartifactId=dubbo -Dversion=2.8.4 -Dpackaging=j ...
- Eclipse搭建Android开发环境并运行Android项目
Eclipse搭建Android开发环境并运行Android项目 (详细) 安装环境: window 10 64位 安装工具: JDK.Eclipse.SDK.ADT 安装步骤: 1．JAVA JDK ...
- T-SQL Part XII: Access Remote SQL Server
要链接远程的SQL Server,需要一下几个步骤(以下的步骤都是在远程系统上进行): 确认远程SQL Server所监听的端口号 官方的文档是使用SQL Server Configuration M ...
- .NET Core3.0 EF 连接 MySql
一:创建项目 添加 csproj (或者直接NuGet 引用) <ItemGroup> <PackageReference Include="Microsoft.Entit ...
- 搭建Redis三主三从集群
Redis三主三从集群规划 10.0.128.19 使用端口 7000 7001 10.0.128.22 使用端口 7002 7003 10.0.128.23 使用端口 7004 7 ...
- SpringBoot学习（三）—— springboot快速整合swagger文档
目录 MyBatis 简介 引入mybatis组件 代码实战 MyBatis @ 简介 优点 最大的优点是SQL语句灵活,适合调优情景,业务复杂情景 劣势 最大的劣势是不同数据库之间的迁移 引入myb ...
- Java流程控制之（三）嵌套
目录 嵌套循环 for循环嵌套 while循环嵌套 总结 之前谈到各种循环结构,有for循环啊,有while循环啊,可以完成不断重复的动作,相当方便.那么如果好多个循环结合再一次,又是如何实现效果的呢 ...
- 使用Redis实现延时任务(一)
使用Redis实现延时任务(一) 前提 最近在生产环境刚好遇到了延时任务的场景,调研了一下目前主流的方案,分析了一下优劣并且敲定了最终的方案.这篇文章记录了调研的过程,以及初步方案的实现. 候选方案对 ...
- day 36 初始前端 html语言
参考博客https://www.cnblogs.com/majj/p/9056951.html进行学习 html标签 特征: .空白折叠现象 .对空格和换行不敏感 .标签要严格封闭 p标签的嵌套 多注 ...
- ctf中关于图片的隐写随笔（不全）
①JPG图片的结束符,十六进制常为FFD9 ②binwalk的原理是:检查常见的文件头信息,如果不符合,一定有隐藏信息.③JPG是有损压缩,PNG是无损压缩,BMP是不压缩. 隐写的基本原理:图片查看 ...