700字范文 > 实现Java Web开发的关于echarts可视化动态数据展示

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

时间：2021-06-29 17:13:23

实现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请求。

我这儿的代码如下：

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.获取前端的actionString 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文档

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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。