使用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==/ ...
随机推荐
- python、C++经典算法题：打印100以内的素数
题目 打印100以内的素数 思路1 素数的特点: 素数一定是奇数 一个数如果是合数,那么它一定能够被2到这个合数的开平方内的某个素数整除(这个特点是提升效率的关键) 一个数如果不能被从2到它自身开平方 ...
- 第五天、vim，重定向，用户和组管理
第五天.vim,重定向,用户和组管理 vim vi:Visual editor,文本编辑器 行编辑器:sed 全屏编辑器:vim,vi,nano 其他编辑器gedit,gvim 定义别名让vi等于vi ...
- 修改 Django Administration
只需要在django项目下的APP下的admin.py重写以下几个变量即可,不需要改django源码 from django.contrib import adminadmin.site.site_t ...
- 替换"marquee"，实现无缝滚动
js的marquee标签,可以实现元素循环滚动,但是不能无缝连接,要实现“无缝滚动”的效果必须使用js(借鉴百度),思路是使要滚动元素相对位置不断改变,上下滚动就相对top或者bottom,左右滚动就 ...
- SqlServer2005 查询 第七讲 order by
今天我们来讲sql命令中的参数order by的用法 order by order by:可以理解成[以某个字段排序] order by a,b // a和b都按升序 order by a,b des ...
- Mssql 查询某记录前后N条
Sqlserver 查询指定记录前后N条,包括当前数据 条件 [ID] 查询 [N]条 select * from [Table] where ID in (select top ([N]+1) ID ...
- VMware虚拟机Linux中增加磁盘空间的扩容操作
VMwareware虚拟机安装的Red Hat Enterprise Linux系统剩余空间不足,造成软件无法正常安装.如果重新装一遍系统就需要重新配置好开发环境和软件的安装配置.结合自己的实践,总结 ...
- Java描述设计模式(21)：状态模式
本文源码:GitHub·点这里 || GitEE·点这里 一.生活场景 1.场景描述 变色龙是爬行动物,是非常奇特的动物,它有适于树栖生活的种种特征和行为,身体也会随着环境的变化而变化出适应环境的颜色 ...
- vim可视化模式
进入:v 移动光标选中 c剪切.y复制(自动退出v模式,进入插入模式) p粘贴
- 命令序列 ; & && ||
; 从左到右依次被执行,返回最后一个命令的执行状态 & 该命令将在后台被执行,即在子bash中执行(或ctrl+z,bg, jobs,bg 命令号)(变量$!.$one.$two.$three ...