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

最新推荐文章于 2024-06-30 21:14:03 发布

江湖一点雨

最新推荐文章于 2024-06-30 21:14:03 发布

阅读量1.8w

点赞数 44

分类专栏： Web开发常见问题数据可视化文章标签： JSP+Servlet+echarts实现数据可视化 echarts绘制图表动态数据echarts 动态数据可视化

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

版权

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"