文档章节

Java Data visualization-dynamic(Java jsp 实现数据可视化-实时动态)

杨木发
 杨木发
发布于 2019/12/08 14:08
字数 1074
阅读 24
收藏 0

Java web jsp 大数据可视化-实时动态(本地数据)

开发工具:eclipse2019

服务器环境:tomcat9

完整项目目录结构和效果图:

在Servlet里面自定义假数据

有三个java文件:在Java Resources 下 src 下的包里面

1:

package com.lvyvan.huyaUI;

public class PieData1 {
	
	
	//第二张图一行的数据
	
	private int value;
	private String name;
	
	public int getValue() {
		return value;
	}
	public void setValue(int value) {
		this.value = value;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}

}

2

package com.lvyvan.huyaUI;

/**
 * 
 * @author 杨木发
 * 往界面传递所数据
 *
 */

public class Data1 {
	
	/**
	 * 往界面传递全部需要的数据
	 * @author Administrator
	 *
	 */
		//第一张图X的坐标数组
		private String[] X1;
		
		//第一张图Y的坐标数组
		private int[] Y1;

		//第二张图标题坐标数组
		private String[] X2;
		
		//第二张图数据的集合
		private PieData1[] Y2;
		
		

		public String[] getX1() {
			return X1;
		}

		public void setX1(String[] x1) {
			X1 = x1;
		}

		public int[] getY1() {
			return Y1;
		}

		public void setY1(int[] y1) {
			Y1 = y1;
		}

		public String[] getX2() {
			return X2;
		}

		public void setX2(String[] x2) {
			X2 = x2;
		}

		public PieData1[] getY2() {
			return Y2;
		}

		public void setY2(PieData1[] y2) {
			Y2 = y2;
		}

	}

3

package com.lvyvan.huyaUI;

import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.alibaba.fastjson.JSON;

@WebServlet("/huyaData1")
public class huyaData1 extends HttpServlet {
	
	private static final long serialVersionUID = 1L;
    
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//假设数据
		String[] x1= {"英雄联盟","穿越火线","王者荣耀","枪战王者"};
		int[] y1= {232,523,256,935};
		String[] x2= {"主播1","主播2","主播3","主播4"};
		PieData1[] y2=new PieData1[5];
		
		
		for(int i=1;i<=5;i++){
			PieData1 pd = new PieData1();
			pd.setName("主播"+i);
			pd.setValue(new Random().nextInt(100)*10000);
			y2[i-1]=pd;
		}
			
		
		Data1 d = new Data1();
		d.setX1(x1);
		d.setY1(y1);
		d.setX2(x2);
		d.setY2(y2);
		
		//将数据转换为JSON格式
		//String jsonStr = JSON.toJSONString(games);
		//System.out.print(jsonStr);
		//设置字符集防止乱码
		response.setCharacterEncoding("Unicode");
		//返回将数组转换为JSON的数组
		response.getWriter().println(JSON.toJSON(d));
		
		
	}
		protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
			doGet(request, response);	
	}
	

}

运行结果:

 

Jsp代码:WebContent WEB-INF

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!-- FrvskXh9GiGy9Nn1DhrgBmSBDhCoUQZl -->
<!DOCTYPE html>
<html style="height: 100%">
   <head>
       <meta charset="utf-8">
   </head>
   <body style="height: 100%; margin: 0">
   
   		<div style="width:50%;height:100%;margin:0 auto; border:2px solid red;">
	   	   <div id="d1" style="height: 50%;"></div>
	       <div id="d2" style="height: 50%;"></div>
   		</div>
       
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-gl/dist/echarts-gl.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts-stat/dist/ecStat.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/dataTool.min.js"></script>
       <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/echarts/dist/extension/bmap.min.js"></script>
       
       <!-- 引入JQuery 库为了ajax 调用Servlet来显示数据 -->
       <script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>

       <script type="text/javascript">   
       
		$(function(){
			draw();//第一次手动调用代码
			setInterval("draw()",1000);//js自带的自动刷新函数
		 });
		  	
		function draw(){//异步请求去Servlet里面获取数据
		  	$.ajax({
		  		url:"huyaData1",//调用Servlet
		  		dataType:'json',
		  		success:function(result){	//data来接收Servlet的数据
		  		//alert(result);	//为了显示,验证数据		
		  		
   				
		  		//第一张图
		  		
				//根据找到的div并将图画在这个div上
				var dom = document.getElementById("d1");
				//初始化图形
				var myChart = echarts.init(dom);
				var app = {};
				//变量里面设置了图形所需要的全部参数和数据
				option = null;
				option = {
				    xAxis: {
				        
				     	data: result.x1,
				     	type: 'category'
				    },
				    yAxis: {
				        type: 'value'
				    },
				    series: [{
				        data: result.y1,
				        type: 'bar'
				    }]
				};
				;
				if (option && typeof option === "object") {
				    myChart.setOption(option, true);
				} 
   					
   					
					//第二张图	
   					
			       var dom = document.getElementById("d2");
			       var myChart = echarts.init(dom);
			       var app = {};
			       option = null;
			       option = {
			           title : {
			               text: '某直播站点游戏人气',
			               subtext: '如有雷同纯属虚构的哟',
			               x:'center'
			           },
			           tooltip : {
			               trigger: 'item',
			               formatter: "{a} <br/>{b} : {c} ({d}%)"
			           },
			           legend: {
			               orient: 'vertical',
			               left: 'left',
			               data: result.x2
			           },
			           series : [
			               {
			                   name: '游戏人气',
			                   type: 'pie',
			                   radius : '55%',
			                   center: ['50%', '60%'],
			                   data:result.y2,
			                   itemStyle: {
			                       emphasis: {
			                           shadowBlur: 10,
			                           shadowOffsetX: 0,
			                           shadowColor: 'rgba(0, 0, 0, 0.5)'
			                       }
			                   }
			               }
			           ]
			       };
			       ;
			       if (option && typeof option === "object") {
			           myChart.setOption(option, true);
			       }

       					
 		
       					
       					
       		
       				}
       			});
       			
       		}

       		
       </script>
       
       
       
       
       <!-- 第一张图 -->
       	   <script type="text/javascript">

	       </script>
	   	
       
       <!-- 第二张图 -->
   		<script type="text/javascript">	

运行结果-浏览器访问:http://localhost:8080/huyaUI/huyaUI1.jsp

 

/*-------------------反爬声明o(*////▽////*)咻咻咻--------------------

作者:杨木发
版权声明:
       
本文为博主倾情原创文章,整篇转载请附上源文链接!

如果觉得本文对你有所收获,你的请评论点赞 与

合理优质的转发也将是鼓励支持我继续创作的动力,

 更多精彩可百度搜索 杨木发 或:

个人网站:www.yangmufa.com    ,

开源中国:https://my.oschina.net/yangmufa    ,

Gitee:https://gitee.com/yangmufa    ,

GitHub:https://github.com/yangmufa    。

坚持创作 善于总结 开源共享 高质进步。
-------------------反爬声明o(*////▽////*)咻咻咻--------------------*/

© 著作权归作者所有

杨木发

杨木发

粉丝 1
博文 67
码字总数 56476
作品 0
铜仁
个人站长
私信 提问
Jsp 和 Servlet 有什么不同?

面试中被问到了 Jsp 和 Servlet 有什么不同?在这里总结分享下。 回答思路先分别进行基本介绍,然后分析说明两者相同点和不同点。 基本介绍 Servlet: Servlet 是一种服务器端的Java应用程序...

几个栗子
2018/08/22
218
3
FreeMarker在Web应用中的配置

一、FreeMarker介绍: FreeMarker是一个用Java语言编写的模板引擎,它基于模板来生成文本输出。FreeMarker与Web容器无关,即在Web运行时,它并不知道Servlet或HTTP。它不仅可以用作表现层的实...

期待变强的菜鸟
2014/11/03
471
0
Java和PHP在Web开发方面的比较

比较PHP和JSP这两个Web开发技术,在目前的情况是其实是比较PHP和Java的Web开发。以下是我就几个主要方面进行的比较:   一、 语言比较   PHP是解释执行的服务器脚本语言,首先php有简单容...

52java
2013/02/04
145
0
Java EE部分核心技术简介

EJB — JavaEE的基石: 1、 EJB (Enterprise JavaBeans) : 一个Java服务器端组件开发的规范,定义了一个用来开发面向对象分布式应用组件的标准方法,软件厂商根据它来实现EJB服务器。 Java...

顶层设计
2012/08/03
496
0
Java技术周刊第15期:SpringBoot如何使用JPA操作数据库?

【点击订阅Java技术周刊】 Java的开发者们: 云栖社区已有5000位Java开发者,发布了30000+Java文章(文章列表),沉淀了7000+的Java精品问答(问答列表)。 Java技术周刊将会为大家介绍最新的...

bluemind
2019/07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是专用字节,虚拟字节,工作集?

我试图使用perfmon Windows实用程序来调试进程中的内存泄漏。 这就是perfmon解释这些术语的方式: Working Set是此过程的工作集的当前大小(以字节为单位)。 工作集是过程中线程最近触及的一...

技术盛宴
29分钟前
52
0
创建重复N次的单个项目的列表

我想创建一系列长度不一的列表。 每个列表将包含相同的元件e ,重复n次(其中n列表=长度)。 如何创建列表,而不为每个列表使用列表[e for number in xrange(n)] ? #1楼 在Python中创建重复...

javail
45分钟前
64
0
为什么图片反复压缩后普遍会变绿,而不是其他颜色?

作者:Lion Yang 链接:https://www.zhihu.com/question/29355920/answer/119088684 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 业余版概要:安卓的...

shzwork
今天
47
0
每天AC系列(二):最接近的三数之和

1 题目 leetcode第16题,给定一个数组与一个目标数,找出数组中其中的三个数,这三个数的和要与目标数最接近。 2 暴力 按惯例先来一次O(n3)的暴力: int temp = nums[0]+nums[1]+nums[2];fo...

Blueeeeeee
今天
46
0
EFK教程(5) - ES集群开启用户认证

基于ES内置及自定义用户实现kibana和filebeat的认证 作者:“发颠的小狼”,欢迎转载 目录 ▪ 用途 ▪ 关闭服务 ▪ elasticsearch-修改elasticsearch.yml配置 ▪ elasticsearch-开启服务 ▪ ...

小慢哥
今天
58
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部