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

本文主要是介绍Java Data visualization-dynamic(Java jsp 实现数据可视化-实时动态),希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

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

开发工具:eclipse2019

服务器环境:tomcat9

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

up-a68eefc7f95367a88b73d7f26fa804f464d.png

在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);	}}

运行结果:

up-856545426d73b7e5bf195e9b895289e7a79.png

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",//调用ServletdataType:'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

up-48dcc2e2d3fa209ad7ece04df3dc87e976a.png

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

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

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

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

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

个人网站: www.yangmufa.com

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

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

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

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

这篇关于Java Data visualization-dynamic(Java jsp 实现数据可视化-实时动态)的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/368166

相关文章

Java反转字符串的五种方法总结

《Java反转字符串的五种方法总结》:本文主要介绍五种在Java中反转字符串的方法,包括使用StringBuilder的reverse()方法、字符数组、自定义StringBuilder方法、直接... 目录前言方法一:使用StringBuilder的reverse()方法方法二:使用字符数组方法三:使用自

Qt把文件夹从A移动到B的实现示例

《Qt把文件夹从A移动到B的实现示例》本文主要介绍了Qt把文件夹从A移动到B的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录如何移动一个文件? 如何移动文件夹(包含里面的全部内容):如何删除文件夹:QT 文件复制,移动(

Flask 验证码自动生成的实现示例

《Flask验证码自动生成的实现示例》本文主要介绍了Flask验证码自动生成的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习... 目录生成图片以及结果处理验证码蓝图html页面展示想必验证码大家都有所了解,但是可以自己定义图片验证码

VSCode配置Anaconda Python环境的实现

《VSCode配置AnacondaPython环境的实现》VisualStudioCode中可以使用Anaconda环境进行Python开发,本文主要介绍了VSCode配置AnacondaPytho... 目录前言一、安装 Visual Studio Code 和 Anaconda二、创建或激活 conda

使用mvn deploy命令上传jar包的实现

《使用mvndeploy命令上传jar包的实现》本文介绍了使用mvndeploy:deploy-file命令将本地仓库中的JAR包重新发布到Maven私服,文中通过示例代码介绍的非常详细,对大家的学... 目录一、背景二、环境三、配置nexus上传账号四、执行deploy命令上传包1. 首先需要把本地仓中要

JAVA封装多线程实现的方式及原理

《JAVA封装多线程实现的方式及原理》:本文主要介绍Java中封装多线程的原理和常见方式,通过封装可以简化多线程的使用,提高安全性,并增强代码的可维护性和可扩展性,需要的朋友可以参考下... 目录前言一、封装的目标二、常见的封装方式及原理总结前言在 Java 中,封装多线程的原理主要围绕着将多线程相关的操

MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固 通俗易懂版)

《MySQL中实现多表查询的操作方法(配sql+实操图+案例巩固通俗易懂版)》本文主要讲解了MySQL中的多表查询,包括子查询、笛卡尔积、自连接、多表查询的实现方法以及多列子查询等,通过实际例子和操... 目录复合查询1. 回顾查询基本操作group by 分组having1. 显示部门号为10的部门名,员

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Spring Cloud之注册中心Nacos的使用详解

《SpringCloud之注册中心Nacos的使用详解》本文介绍SpringCloudAlibaba中的Nacos组件,对比了Nacos与Eureka的区别,展示了如何在项目中引入SpringClo... 目录Naacos服务注册/服务发现引⼊Spring Cloud Alibaba依赖引入Naco编程s依

java导出pdf文件的详细实现方法

《java导出pdf文件的详细实现方法》:本文主要介绍java导出pdf文件的详细实现方法,包括制作模板、获取中文字体文件、实现后端服务以及前端发起请求并生成下载链接,需要的朋友可以参考下... 目录使用注意点包含内容1、制作pdf模板2、获取pdf导出中文需要的文件3、实现4、前端发起请求并生成下载链接使