使用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==/ ...
随机推荐
- PHP路径指定web路径的方法
PHP路径指定web路径的方法直接在/前面加.就是代表web路径了 不是按照文件路径来算了 <pre>./Public/uploads/suolutu/' . $suijishu . '_ ...
- Java-100天知识进阶-基本类型-知识铺（一）
知识铺: 致力于打造轻知识点,持续更新每次的知识点较少,阅读不累.不占太多时间,不停地来唤醒你记忆深处的知识点. Java的两大数据类型: 一.内置数据类型 二.引用数据类型 内置数据类型 Java语 ...
- 关于设备与canvas画不出来的解决办法
连续四天解决一个在三星手机上面画canvas的倒计时饼图不出来的问题,困惑了很久,用了很多办法,甚至重写了那个方法,还是没有解决,大神给的思路是给父级加 "overflow: visible ...
- linux引导之grub2
先了解下什么是Bootloader 以下是百度百科释意 在嵌入式操作系统中,BootLoader是在操作系统内核运行之前运行.可以初始化硬件设备.建立内存空间映射图,从而将系统的软硬件环境带到一个合适 ...
- nyoj 65-另一种阶乘问题 (Java 高精度)
65-另一种阶乘问题 内存限制:64MB 时间限制:3000ms 特判: No 通过数:16 提交数:18 难度:1 题目描述: 大家都知道阶乘这个概念,举个简单的例子:5!=1*2*3*4*5.现在 ...
- man 与 help
man帮助文档被划分为节 序号 节号 说明 1 1 命令帮助信息 2 2 系统调用函数的帮助信息(内核提供的接口函数) 3 3 库函数帮助信息 4 4 设备文件帮助信息 5 5 配置文档帮助说明 6 ...
- firefox浏览器window.event is undefined问题
获取鼠标坐标,IE下window.event.clientX和window.event.clientY就可以获取x,y的座标了.但是firefox却不行,浏览器报错window.event is un ...
- selenium介绍和环境搭建
一.简单介绍 1.selenium:Selenium是一个用于Web应用程序测试的工具.Selenium测试直接运行在浏览器中,就像真正的用户在操作一样.支持的浏览器包括IE.Mozilla Fire ...
- js-程序结构
程序结构: 1.顺序结构(主体结构):自上而下,逐行实行: 2.分支(选择)结构:if语句,if…else, if…else if…else,switch; 3.循环结构:重复某些代码: 分支 ...
- WPF 修改屏幕DPI，会触发控件重新加载Unload/Load
修改屏幕DPI,会触发控件的Unloaded/Loaded 现象/重现案例 对Unloaded/Loaded的印象: FrameworkElement, 第一次加载显示时,会触发Loaded.元素被释 ...