实现Java Web开发的关于可视化动态数据展示

echarts是一个实现动态数据展示最方便的图形化展示工具。它能够完成数据实时传递更新并且能够完成页面直观的展示。最开始时，echarts是由百度设计出来的可视化js库，后面捐给了阿帕奇开源。不过我们仍然可以使用它。

Java Web实现步骤：

1、客户端实现ajax请求

2、服务器端在Servlet接受请求

3、生成一个json数据(柱状图、折线图表示)

4、客户端接收数据后显示

1、发送ajax请求

首先我们要了解echarts的基本格式内容。

引入js包

<script type="text/javascript" src="echarts/echarts.js"></script>

其次为echarts提供一个具备一定大小的Dom模块

<div id="main" style="width: 600px; height: 400px;"></div>

在script标签中添加如下内容：

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 : []} ]});var xaxis = [];var yaxis = [];

后面可以适当添加动画和ajax请求。

我这儿的代码如下：

<script type="text/javascript">var myChart = echarts.init(document.getElementById('main'));var option = {legend: {},toolbox: {show: true,feature: {dataZoom: {yAxisIndex: 'none'},dataView: { readOnly: false },magicType: { type: ['line', 'bar'] },restore: {},saveAsImage: {}}},color: ['#c23531','#2f4554','#61a0a8','#d48265','#91c7ae','#749f83','#ca8622','#bda29a','#6e7074','#546570','#c4ccd3'],title: {text: 'ECharts报表展示'},tooltip: {trigger: 'axis'},xAxis: {data: ['衬衫', '羊毛衫', '雪纺衫', '裤子']},yAxis: {},series: [{name: '销量',type: 'bar',data: [5, 20, 36, 10]}]};myChart.setOption(option);myChart.showLoading(); //数据加载完之前先显示一段简单的loading动画var names = []; //一个product名称数组，用来展示于x轴var nums = []; //一个销售量数组，用来展示于y轴//第3步后续步骤......
</script>

2、Servlet请求接受

这个地方如果是使用servlet，那么就创建一个servlet类，用ssm框架就使用controller添加一个展示的功能即可。

这个地方粗略讲述即可。比如我的代码如下：

//1、构建一个数组存储user&product类
List<Product> list = new ArrayList<Product>();//2、默认可以添加，可以另行添加dao和service调用数据库返回值
list.add(new Product("短袖",32,178));
list.add(new Product("女衬衫",80,190));
list.add(new Product("紧身裤",109,239));
list.add(new Product("黑丝",216,299));//3.获取前端的action
String action = req.getParameter("action");//4.根据action来判断采取什么行动
if(action.equals("TurnJSON")){//3、使用GSON来转换成json格式并返回Gson gson = new Gson();String json = gson.toJson(list);//4、输出json格式的数据resp.setContentType("text/html;charset=utf-8");resp.getWriter().write(json);
}

3、生成json格式数据返回客户端

生成json后我们需要将返回的json格式将x轴内容和y轴内容替换掉，比如如下：

//6.ajax发起数据请求$.ajax({type : "post",async : true, //设置异步请求url : "echartsServlet",data : "action=TurnJSON",dataType : "json", //返回数据形式为json//请求成功后接收数据names+nums两组数据success : function(result) {//console.log(result)//result为服务器返回的json对象if (result) {//取出数据存入数组//console.log(result[0].name+" "+result[0].num)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);}//console.log(names);//console.log(nums);myChart.hideLoading(); //隐藏加载动画//覆盖操作-根据数据加载数据图表myChart.setOption({xAxis : {data : names},series : [ {// 根据名字对应到相应的数据data : nums}]});}},error : function(errorMsg) {//请求失败时执行该函数alert("图表请求数据失败!");myChart.hideLoading();}})

最终展示：

更多的学习可以参考这一篇api：echarts文档

这就是基本的图数据的展示业务，希望能够让大家有所收获，谢谢大家！

实现Java Web开发的关于echarts可视化动态数据展示相关推荐

Java Web开发技术教程入门-初识动态网页
这段时间学校搞了一个"阅战阅勇"的阅读活动,奖品还是挺丰富的~于是,奔着这些奖品,我去图书馆借了这本<Java Web开发技术教程>.一是为了那些丰富的奖品,二是为了回 ...
java web开发工具有哪些?
工欲善其事,必先利其器,好的开发工具能让程序猿们的Java web开发学习坐上高铁快车.那么今天小编就先整理一下感觉用来feel 倍爽的开发神器吧! 一.IntelliJ IDEA idea相信很多小 ...
java web开发初学_2018年学习Web开发的绝对初学者指南
java web开发初学 This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上 . If yo ...
Java Web开发API Boy如何进阶？
导语 | Java Web后台开发基本都离不开Spring生态这一套,Spring框架功能极其强大,会帮忙做许多工作,我们通常只需要在一个函数(包含request和response两个入参)中写处理逻 ...
Java框架JSON-RPC项目demo代码实战 + JAVA WEB配置虚拟目录（转自21天java web开发）
Java框架JSON-RPC项目demo代码实战备注 JAVA WEB配置虚拟目录(转自21天java web开发) https://blog.csdn.net/wjxbj/article/det ...
[Java Web整合开发王者归来·刘京华] 1、 Java Web开发
目录: 1.Web技术简介 2.动态网站与静态网站 3.Java Web开发模式 4.JavaScript简介 1.Web技术简介 PS: 最近还有更凶残的技术,即整个操作系统都是基于Web的,如火狐 ...
230套java web开发PDF书籍和CHM参考手册资料大全免费下载
230套java web开发PDF书籍和CHM参考手册资料大全免费下载下载地址:http://yun.baidu.com/s/169jYH 文章来源:HTML5星空http://www.html5 ...
基于Stripes框架进行Java Web开发
Mark Eagle是美国乔治亚州亚特兰大市MATRIX Resources有限公司的一位资深软件工程师,拥有Sun公司的SCP和SCWCD认证.Mark本人非常喜欢使用开源软件进行软件开发,并且多次 ...
Eclipse 3.5 Classic+Tomcat 6.0+MySql 5.5搭建java web开发环境
Eclipse 3.5 Classic+Tomcat 6.0+MySql 5.5搭建java web开发环境对于初学者来说,如果没有接触过java web开发的话,搭建开发环境将是一个门槛.以前一直 ...

实现Java Web开发的关于echarts可视化动态数据展示

实现Java Web开发的关于可视化动态数据展示

1、发送ajax请求

2、Servlet请求接受

3、生成json格式数据返回客户端

实现Java Web开发的关于echarts可视化动态数据展示相关推荐

最新文章

热门文章