Echarts-Struts2+Spring+Mybnatis+Jquery+Json在页面显示数据（数据从数据库读取）

最新推荐文章于 2020-02-18 18:16:36 发布

Swxctx

最新推荐文章于 2020-02-18 18:16:36 发布

阅读量843

点赞数

分类专栏： Jave EE Java ee/se

本文链接：https://blog.csdn.net/qq_28796345/article/details/71024227

版权

Java ee/se 同时被 2 个专栏收录

132 篇文章 6 订阅

订阅专栏

Jave EE

81 篇文章 0 订阅

订阅专栏

功能：从数据库查询两个数据（温度与一氧化碳浓度），显示到页面，页面嵌入echarts的仪表盘

思路：

1、通过mybatis从数据库获取数据（封装为list）

2、Spring管理mybatis的mapper与struts2的action

3、Struts2的action完成数据的封装（转为Json数组）

4、jsp页面通过ajax获取action的数据

关于mybatis到action的查询数据功能，会在后续的框架搭建中讲述，现在直接进入action到页面的显示块

1、action代码：

package com.bs.view.action;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

import com.bs.container.ServiceProvider;
import com.bs.po.Data;
import com.bs.service.DataService;
import com.opensymphony.xwork2.ActionSupport;

import net.sf.json.JSONArray;
/*
 *@Author swxctx
 *@time 2017年4月30日
 *@Explain:查询数据库数据，转换为json数据到前台页面显示
 */
public class DataAction extends ActionSupport{
	
	private static final long serialVersionUID = 1L;
	
	/*加载applicationContext.xml*/
	private DataService dataService = (DataService)ServiceProvider.getService(DataService.SERVICE_NAME);
	
	@SuppressWarnings("unchecked")
	public String getData() throws Exception{
		
		HttpServletRequest request = ServletActionContext.getRequest();
		HttpServletResponse response = ServletActionContext.getResponse();

		try {
			request.setCharacterEncoding("utf-8");
			response.setCharacterEncoding("utf-8");
		} catch (UnsupportedEncodingException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		
		/*获取到数据库返回的data list（调用service层方法）*/
		List<Data> datas = dataService.findLastData();
		
		//获取temp与co
		@SuppressWarnings("rawtypes")
		List tempList = new ArrayList();//温度
		@SuppressWarnings("rawtypes")
		List coList = new ArrayList();//二氧化碳
		
		for(Data data:datas){
			//将获取到的数据分别放到各自的数组中
			tempList.add(data.getTemp());
			coList.add(data.getCo());
		}
		
		//将数据放入到同一个list
		@SuppressWarnings("rawtypes")
		List<List> lists = new ArrayList();
		/*先放入temp*/
		lists.add(tempList);
		/*co*/
		lists.add(coList);
		
		/*转换为json数组*/
		JSONArray jsonArray = JSONArray.fromObject(lists);
		
		try {
			response.setHeader("Cache-Control", "no-cache");
			response.setContentType("aplication/json;charset=UTF-8");
			response.getWriter().print(jsonArray);//发送到页面
		} catch (IOException e) {
			e.printStackTrace();
		}
	
		return null;
	}
}

2、jsp页面

<%@ page language="java" import="java.util.*" 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">
 
 <!-- ECharts单文件引入 -->
  <script src="js/dist/echarts.js"></script>
  <!-- jquery引入 -->
  <script src="js/jquery.js"></script>
  
<title>Insert title here</title>
</head>
<body>

	<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="temp" style="height:330px;width:500px"></div>
    <div id="co" style="height:330px;width:500px"></div>
    
</body>

	
<script type="text/javascript">
	var tempArray = new Array();
	var coArray = new Array();
	$.ajax({
		url : 'getData.action',
		type : 'GET',
		dataType : 'json',
		async : false,
		success : function(jsonArray) {
			for (x in jsonArray[0]) {
				tempArray[x] = jsonArray[0][x];//将action发送来的数据放入数组
			}
			for (x in jsonArray[0]) {
				coArray[x] = jsonArray[1][x];
			}
		}
	});
	
	
	// 路径配置
	require.config({
	    paths: {
	        echarts: 'js/dist'
	    }
	});

     // 使用
     require(
         [
             'echarts',
             'echarts/chart/gauge' // 浅色仪表盘
         ],
         SetEcharts
       );
     
     function SetEcharts(ec){
  	   TempGauge(ec);//调用显示
  	   CoGauge(ec);
     }
       
    /*温度值监测图表*/
   function TempGauge(ec) {
     // 基于准备好的dom，初始化echarts图表
     var TempChart = ec.init(document.getElementById('temp')); 
       
     var option = {
	    tooltip : {
	        formatter: "{a} <br/>{b} : {c}℃"
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    series : [
	        {
	            name:'当前温度值',
	            type:'gauge',
	            splitNumber: 10,       // 分割段数，默认为5
	            axisLine: {            // 坐标轴线
	                lineStyle: {       // 属性lineStyle控制线条样式
	                    color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], 
	                    width: 8
	                }
	            },
	            axisTick: {            // 坐标轴小标记
	                splitNumber: 10,   // 每份split细分多少段
	                length :12,        // 属性length控制线长
	                lineStyle: {       // 属性lineStyle控制线条样式
	                    color: 'auto'
	                }
	            },
	            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                    color: 'auto'
	                }
	            },
	            splitLine: {           // 分隔线
	                show: true,        // 默认显示，属性show控制显示与否
	                length :30,         // 属性length控制线长
	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
	                    color: 'auto'
	                }
	            },
	            pointer : {
	                width : 5
	            },
	            title : {
	                show : true,
	                offsetCenter: [0, '-40%'],       // x, y，单位px
	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                    fontWeight: 'bolder'
	                }
	            },
	            detail : {
	                formatter:'{value}℃',
	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                    color: 'auto',
	                    fontWeight: 'bolder'
	                }
	            },
	            data:[{value: tempArray, name: '温度(℃)'}]//放置temp数据
	        }
	    ]
	};
	       
	  TempChart.setOption(option); 
 }
    /*二氧化碳数值图表*/
    function CoGauge(ec) {
     // 基于准备好的dom，初始化echarts图表
     var CoChart = ec.init(document.getElementById('co')); 
       
     var option = {
	    tooltip : {
	        formatter: "{a} <br/>{b} : {c}ppm"
	    },
	    toolbox: {
	        show : true,
	        feature : {
	            mark : {show: true},
	            restore : {show: true},
	            saveAsImage : {show: true}
	        }
	    },
	    series : [
	        {
	            name:'当前CO浓度值',
	            type:'gauge',
	            splitNumber: 10,       // 分割段数，默认为5
	            axisLine: {            // 坐标轴线
	                lineStyle: {       // 属性lineStyle控制线条样式
	                    color: [[0.2, '#228b22'],[0.8, '#48b'],[1, '#ff4500']], 
	                    width: 8
	                }
	            },
	            axisTick: {            // 坐标轴小标记
	                splitNumber: 10,   // 每份split细分多少段
	                length :12,        // 属性length控制线长
	                lineStyle: {       // 属性lineStyle控制线条样式
	                    color: 'auto'
	                }
	            },
	            axisLabel: {           // 坐标轴文本标签，详见axis.axisLabel
	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                    color: 'auto'
	                }
	            },
	            splitLine: {           // 分隔线
	                show: true,        // 默认显示，属性show控制显示与否
	                length :30,         // 属性length控制线长
	                lineStyle: {       // 属性lineStyle（详见lineStyle）控制线条样式
	                    color: 'auto'
	                }
	            },
	            pointer : {
	                width : 5
	            },
	            title : {
	                show : true,
	                offsetCenter: [0, '-40%'],       // x, y，单位px
	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                    fontWeight: 'bolder'
	                }
	            },
	            detail : {
	                formatter:'{value}ppm',
	                textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
	                    color: 'auto',
	                    fontWeight: 'bolder'
	                }
	            },
	            data:[{value: coArray, name: 'CO(ppm)'}]//方式co数据
	        }
	   	  ]
		};
       
  		  CoChart.setOption(option); 
	}
 </script>


</body>
</html>

3、Struts.xml的配置

<!-- 数据监控 -->
         <action name="getData" class="getDataAction" method="getData"></action>

4、application,xml处的配置

<!-- 数据监控 -->
	<bean id="getDataAction" class="com.bs.view.action.DataAction" scope="prototype"></bean>

效果图如下所示：

注：
关于实时刷新克采用java script计时回调方法

关于echarts的引入见此文：点击打开链接

echarts可到百度官网下载：点击打开链接

使用Json所需要的jar包：

点击下载

Swxctx

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Echarts-Struts2+Spring+Mybnatis+Jquery+Json在页面显示数据（数据从数据库读取）

功能：从数据库查询两个数据（温度与一氧化碳浓度），显示到页面，页面嵌入echarts的仪表盘思路：1、通过mybatis从数据库获取数据（封装为list）2、Spring管理mybatis的mapper与struts2的action3、Struts2的action完成数据的封装（转为Json数组）4、jsp页面通过ajax获取action的数据关于mybatis
复制链接

扫一扫