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

最新推荐文章于 2024-05-09 10:12:04 发布

编程小马达

最新推荐文章于 2024-05-09 10:12:04 发布

阅读量7.1k

点赞数

文章标签： js jquery json ajax html

本文链接：https://blog.csdn.net/qq_36823679/article/details/123548474

版权

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