Jsp+Servlet+Echarts实现动态数据可视化_jsp数据可视化-程序员宅基地

技术标签： Web开发常见问题动态数据echarts echarts绘制图表 JSP+Servlet+echarts实现数据可视化动态数据可视化数据可视化

Jsp+Servlet+Echarts实现动态数据可视化

1.前言

ECharts，一个使用 JavaScript 实现的开源可视化库，可以流畅的运行在 PC 和移动设备上，兼容当前绝大部分浏览器（IE8/9/10/11，Chrome，Firefox，Safari等），底层依赖轻量级的矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。

而在实际开发中使用的往往会要求从服务器端取数据进行动态显示，一般来说数据请求过程如下：
1.客户端通过ajax发送请求；
2.服务器端Servlet接收请求；
3.生成json数据并返回给客户端；
4.客户端接收数据后显示。

现在就以Jsp+Servlet+Echarts为例来实现动态数据可视化，做个学习记录。

2.实践过程

**1.客户端通过ajax发送请求** 打开eclipse，新建一个web项目，新建一个jsp文件，在jsp中先绘制一个最简单的Echarts图表，在option中的xAxis和yAxis里的data都是空值。待会儿我们会用从服务器取回的数据去”填满“它。

zout.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>echarts测试</title>
<!-- 1.引入 echarts.js -->
<script type="text/javascript" src="echarts/echarts.js"></script>
<!-- 引入jquery.js -->
<script type="text/javascript" src="jquery/jquery-1.11.3.js"></script>
</head>
<body style="margin: 5% 26% 0% 29%;">
	<div style="text-align: center;">
		<h2>欢迎访问jsp+servlet+echarts动态网页</h2>
		<h3>作者：柒晓白</h3>
		<h3>时间：2018/7/13</h3>
	</div>
	<!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->
	<div id="main" style="width: 600px; height: 400px;"></div>

	
	<script type="text/javascript">
		var myChart = echarts.init(document.getElementById('main'));

		//3.初始化，默认显示标题，图例和xy空坐标轴
		myChart.setOption({
     

			title : {
     
				text : 'ajax动态获取数据'
			},
			tooltip : {
     },

			legend : {
     

				data : [ '销售量' ]
			},
			xAxis : {
     
				data : []
			},
			yAxis : {
     },
			series : [ {
     
				name : '销售量',
				type : 'bar',
				data : []
			} ]
		});

		//4.设置加载动画(非必须)
		myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画

		//5.定义数据存放数组(动态变)
		var names = []; //建立一个类别数组（实际用来盛放X轴坐标值）
		var nums = []; //建立一个销量数组（实际用来盛放Y坐标值）

		//6.ajax发起数据请求
		$.ajax({
     
			type : "post",
			async : true, //异步请求（同步请求将会锁住浏览器，其他操作须等请求完成才可执行）
			url : "TestServlet", //请求发送到TestServlet
			data : {
     },
			dataType : "json", //返回数据形式为json

			//7.请求成功后接收数据name+num两组数据
			success : function(result) {
     
				//result为服务器返回的json对象
				if (result) {
     
					//8.取出数据存入数组
					for (var i = 0; i < result.length; i++) {
     
						names.push(result[i].name); //迭代取出类别数据并填入类别数组
					}
					for (var i = 0; i < result.length; i++) {
     
						nums.push(result[i].num); //迭代取出销量并填入销量数组
					}

					myChart.hideLoading(); //隐藏加载动画

					//9.覆盖操作-根据数据加载数据图表
					myChart.setOption({
     
						xAxis : {
     
							data : names
						},
						series : [ {
     
							// 根据名字对应到相应的数据
							name : '销量',
							data : nums
						} ]
					});

				}

			},
			error : function(errorMsg) {
     
				//请求失败时执行该函数
				alert("图表请求数据失败!");
				myChart.hideLoading();
			}
		})
	</script>
</body>
</html>

2.服务器端Servlet接收请求
客户端的请求url是’TestServlet‘，那我们得先在配置一下映射关系，现在的开发中有两种配置方式，一种在web.xml中，一种使用注解方式。任意选择即可。我选择的第一种。

在web.xml的web-app下，配置如下代码：

<servlet>
    <servlet-name>TestServlet</servlet-name>
    <servlet-class>com.zout.Servlet.TestServlet</servlet-class>
  </servlet>
  <servlet-mapping>
    <servlet-name>TestServlet</servlet-name>
    <url-pattern>/TestServlet</url-pattern>
  </servlet-mapping>

或者是在TestServlet.java类上使用注解方式：
但是你得是servlet2.0以后才可以这样做。

@WebServlet("/TestServlet")

然后就来着手写处理客户端请求的TestServlet啦！

3.生成json数据并返回给客户端
值得一说的是，在使用echarts的时候，它要求的数据格式必须是json格式的，所以我们在获取到后台数据以后，需要转为json字符串，然后放到json对象传递到前台给echarts来显示。

而生成Json数据要用到额外的jar包，这里我使用的jackson，json-lib 2010年就没有再更新了… （2016-5-3日更：发现Google出品的Gson也蛮好用的，重点是很小巧，只需引入一个jar就搞定，用法也很简单）

简单介绍一下jackson的用法：

①：先去http://mvnrepository.com/下载 jackson-core.jar，jackson-annotations.jar，jackson-databind.jar（都是2.x版本，jackson官网不知为何不提供服务了…这三个jar让我一阵好找）

②：在项目的项目WEB-INF/lib下引入这三个jar

然后就可以在TestServlet里使用jackson提供的工具类了。

在src文件夹下新建一个包，在新建一个java类：
TestServlet.java：

package com.zout.Servlet;

import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
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 org.codehaus.jackson.map.ObjectMapper;

/**
 * 
 * @author zoutao
 */

public class TestServlet extends HttpServlet {
    

	private static final long serialVersionUID = 1L;

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    
		doPost(request, response);
	}

	@Override
	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
    

		//定义一个list集合
		List<Product> list = new ArrayList<Product>();

		// 数据添加到集合里面，这里可以改为获取sql数据信息，然后转为json字符串，然后存到list中。
		//这里把“类别名称”和“销量”作为两个属性封装在一个Product类里，
		//每个Product类的对象都可以看作是一个类别（X轴坐标值）与销量（Y轴坐标值）的集合。
		list.add(new Product("短袖", 10));
		list.add(new Product("牛仔裤", 20));
		list.add(new Product("羽绒服", 30));

		
		ObjectMapper mapper = new ObjectMapper(); // 提供java-json相互转换功能的类

		String json = mapper.writeValueAsString(list); // 将list中的对象转换为Json字符串

		System.out.println(json);

		// 将json字符串数据返回给前端
		response.setContentType("text/html; charset=utf-8");
		response.getWriter().write(json);
	}
}

然后在建立一个实体类Product .java：

package com.zout.Servlet;

public class Product {
    

	private String name; 			// 类别名称
	private int num; 				// 销量

	public Product(String name, int num) {
    
		this.name = name;
		this.num = num;
	}

	public String getName() {
    
		return name;
	}

	public void setName(String name) {
    
		this.name = name;
	}

	public int getNum() {
    
		return num;
	}

	public void setNum(int num) {
    
		this.num = num;
	}

	@Override
	public String toString() {
    
		return "Product [name=" + name + ", num=" + num + "]";
	}
}

4.客户端接收数据后显示
然后就是启动tomcat运行web项目，然后在浏览器下输入：

http://localhost:8080/zout_Hadoop/zout.jsp

客户端接受服务器数据并解析后，就可以正常显示图表数据了：
如图：
这里写图片描述

整个项目结构：
这里写图片描述

以上就是整个Jsp+Servlet+Echarts实现动态数据可视化的过程，源码已经在上面了，可以直接使用,下一篇是直接在ssm框架当中使用。

新增项目源码下载地址：源码下载

如果你想要整个项目包的话，可以点击关注我，然后评论留下邮箱，发给你。

You got a dream, you gotta protect it.
如果你有梦想的话，就要去捍卫它。 ——《当幸福来敲门》

本文链接：https://blog.csdn.net/ITBigGod/article/details/81023802

原作者删帖不实内容删帖广告或垃圾文章投诉

智能推荐

mysql数据库中某字段一部分乱码-程序员宅基地

文章浏览阅读904次。笔者问题：mysql表（表中数据就是乱码，可能是插入时编码问题，这个问题以后解决）导出excel时数据中有乱码（但是在页面上查看是正常的），我们希望能导出一份没有中文乱码的excel根据热力站中一次&#..._mysql中longtext字段前一半正常一半乱码

RFID防伪设计（物联网工程课程设计）DAY4---LCD屏幕显示_rfid板子设计-程序员宅基地

文章浏览阅读1k次。重点来了这个课程设计中硬件方面一共会有两个重点其中一个自然就是今天要做的OLCD屏幕的驱动第二个是RFID标签的读写由于我买的是野火的I2C OLCD屏幕，自然选择野火自带的例程进行修改，让其能够适配HAL库的开发当然既然是I2C的OLCD，那必然离不开I2C协议值得一提的是，在stm32要实现I2C，可以选择两种方式1.硬件I2C2.软件模拟I2C虽然火哥在标准库的视频中说过硬件I2C可能会存在一定的问题，但是既然买了板子，当然要用哇，不用岂不是暴殄天物。所以，我们还是在cubemx中_rfid板子设计

使用Cygwin, Cygwin/X 介绍-程序员宅基地

文章浏览阅读1.7k次。空间Using CygwinAs noted, Cygwin provides a Unix-like environment under Windows. The installation directory (by default, c:\cygwin) is the root of the Unix-like file system, which contains bin, et..._cygwin/x

#如何查看oracle的sid_oracle 只读账号怎么查看sid-程序员宅基地

文章浏览阅读2.5k次，点赞2次，收藏3次。#如何查看oracle的sid转载：https://www.cnblogs.com/lcword/p/8214334.html1、怎样查看Oracle的数据库名称sid用sysdba身份登录比如 conn sys/密码 as sysdba 匿名管理员登陆执行 select name form Vdatabase;（常用的方法）或是执行select∗fromVdatabase; （常用的方..._oracle 只读账号怎么查看sid

第3章信息系统集成专业技术知识-程序员宅基地

文章浏览阅读6.9k次。本章考试分值 15 分主要考点：(1)、信息系统的生命周期(2)、信息系统开发方法(3)、设备、DBMS及技术选型(4)、软件需求(5)、软件设计(6)、软件测试(7)、软件维护(8)、软件复用(9)、软件质量保证及质量评价(10)、软件配置管理(11)、面向对象(12)、软件架构(13)、中间件(14)、数据仓库(15)、网络协议(16)、网络存储(17)、网络安全(18)、网络交换技术(19)、大数据(20)、云计算_信息系统集成专业技术知识

SQL Server——T-SQL基础技术_1、熟练使用t-sql语句对表进行投影、连接、选择查询 2、能根据要求-程序员宅基地

文章浏览阅读3.7k次，点赞3次，收藏7次。文章目录T-SQL基础技术基本语法格式代码准备：（可以按照我的实例自行建立数据库）1、投影查询a、投影指定的列b、投影全部列c、修改查询结果的列标题d、去掉重复行2、选择查询a.表达式比较b.范围比较c.模式匹配d.空值使用代码示例：3、连接查询a.连接谓词b.以JOIN关键字指定的连接（1）内连接（2）外连接4、统计计算5、排序查询6、子查询T-SQL基础技术T-SQL语言中最重要的部分是它..._1、熟练使用t-sql语句对表进行投影、连接、选择查询 2、能根据要求

随便推点

matlab交通通行量模型_KDD2020|混合时空图卷积网络：更精准的时空预测模型-程序员宅基地

文章浏览阅读439次。『运筹OR帷幄』转载作者：高德机器学习团队高德技术报道【导读】时空预测在天气预报、运输规划等领域有着重要的应用价值。交通预测作为一种典型的时空预测问题，具有较高的挑战性。以往的研究中主要利用通行时间这类交通状态特征作为模型输入，很难预测整体的交通状况，本文提出的混合时空图卷积网络，利用导航数据大大提升了时空预测的效果(本文作者高德机器学习团队，论文已被收录到KDD2020)。论文..._stgcn matlab

微信小程序使用tensorflow做人脸识别检测卡顿的部分解决思路_tensorflow.js 微信小程序-程序员宅基地

文章浏览阅读1.4k次。在例如相机监听事件onCameraFrame里，最好是每一帧的数据更新操作上在setDate的回调里处理，，防止多次setDate，但数据还没更新完下一帧的setDate又进来，导致堵塞。清除张量，tf.dispose()在web端生效，在小程序端不能清除张量占用空间，需要挨个清除tensor.dispose()或者tf.dispose(tensor)防止内存溢出，特别是在ios上。_tensorflow.js 微信小程序

07vuex笔记 module 03_vuex模块化-程序员宅基地

文章浏览阅读119次。// App.vue<template> <div id="app"> </div></template><script>import { mapState, mapActions } from 'vuex';export default { name: 'app', computed: mapSta..._vuex模块化

TS报错整理_在赋值前使用了变量-程序员宅基地

文章浏览阅读1.6w次，点赞10次，收藏57次。记录一下最近项目中TS报错及解决一.找不到模块“images/1.png”或其相应的类型声明。报错图：原因：TS没有识别图片模块解决方法：加上图片格式声明模块????成功不报红：二.类型“unknown”上不存在属性“data”。同：类型“{}”上不存在属性“data”。报错图：原因：对象上本没有某个属性，没有语法检测到该属性（即对象属性不明确）解决方法：定义对象的接口，但是往往后端数据是不能确定的，这个时候使用第二种方法将这个对象_在赋值前使用了变量

WebRTC中音频能量计算_webrtc audiolevel-程序员宅基地

文章浏览阅读3.9k次。1.WebRTC中音频能量计算WebRTC中实现获取音频能量计算的方法是：获取音频数据最大的振幅(即绝对值最大)（范围是0-32767），然后再除以1000，得到0-32之间的数值。从数组中获取相应索引所对应的能量level等级。我们看下webRTC中level_indicator.cc中对音频level判断的处理。namespace webrtc {namespace voe {// Number of bars on the indicator.// Note that the numb_webrtc audiolevel

Duilib中为RichEdit\Edit控件添加自定义右键菜单_duilib richedit-程序员宅基地

文章浏览阅读7.9k次，点赞4次，收藏5次。前言Duilib中的RichEdit控件在使用中发现，基本上对复制、粘贴、剪切等快捷方式都是支持的，不过唯一缺点是没有右键菜单，感觉不够好，于是就想着加上右键菜单。右键菜单基本思路是，在RichEdit的消息处理函数中对鼠标的右键消息处理，发送一个自定义的Notify消息出来，主窗口中受到这个消息后弹出自己的右键菜单。实现方法第一步：把鼠标右键消息转_duilib richedit