ECharts SSH+JQueryAjax+Json+JSP将数据库中数据填充到ECharts中

本文介绍如何在SSH框架下,结合JQuery Ajax和Json,将数据库中的数据填充到ECharts图表中。首先导入相关包,包括ECharts和JQuery库。接着在Action层将数据转化为JSON对象并通过ServletResponse输出。Ajax请求获取JSON数据,设置请求参数如url、dataType、success回调函数。最后,ECharts利用Ajax返回的数组数据进行图表绘制,展示实际电量和计划电量对比。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1导入包,搭建SSH框架。

导入JQuery的JS包,<script src="JS/jquery-1.7.1.js"></script>

导入ECharts的包。<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>

前提你的SSH已经搭好了,数据已经传递到了Struts层。


2在Action层,将数据封装成JSON对象。并通过ServletResponse对象输出

我的实际功能将实际电量数据和计划电量数据显示到ECharts图表上。将实际电量和计划电量均放到ArrayList中,然后将这两个ArrayList放到一个ArrayList中,比如叫merge。之后将merge对象封装到封装到JSONArray中,这时的JSONArray其实存的是两个一位数组,然后将这个JSONArray对象通过Servlet的response对象输出,请求这个方法的JSP会获得这个对象。

public String getAllPower() {
		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();
		}
		List<Power> powers = powerCompareService.getAllPower();
		// 获取实际电量和计划电量
		List actualPowerList = new ArrayList();
		List expectedPowerList = new ArrayList();
		for (Power power : powers) {
			actualPowerList.add(power.getActualPower());
			expectedPowerList.add(power.getExpectedPower());
		}
		List<List> merge = new ArrayList();
		merge.add(actualPowerList);
		merge.add(expectedPowerList);
		JSONArray jsonArray = JSONArray.fromObject(merge);
		try {
			response.setHeader("Cache-Control", "no-cache");
			response.setContentType("aplication/json;charset=UTF-8");
			response.getWriter().print(jsonArray);
		} catch (IOException e) {
			// TODO Auto-generated catch block
			e.printStackTrace();
		}
		// request.setAttribute("list_powers", powers);
		// return "success";
		return null;
	}
注意需要return null;因为不希望struts导航到其他的地方,而是通过JQuery Ajax来请求。

3JQueryAjax请求JSON数据

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<meta charset="utf-8">
<title>ECharts</title>
<!-- 来自百度CDN -->
<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
<script src="JS/jquery-1.7.1.js"></script>
</head>
<body>
	<!-- 为ECharts准备一个具备大小(宽高)的Dom -->
	<div id="main1" style="height:400px"></div>
	<button type="button" id="button1">显示/隐藏</button>
	<script type="text/javascript">
		$(function() {
			$("#button1").click(function() {
				$("#main1").slideToggle(999);
			});
		});
		var actualPower = new Array();
		var expectedPower = new Array();
		$.ajax({
			url : 'Power.action',
			type : 'GET',
			dataType : 'json',
			async : false,
			success : function(jsonArray) {
				for (x in jsonArray[0]) {
					actualPower[x] = jsonArray[0][x];
				}
				for (x in jsonArray[0]) {
					expectedPower[x] = jsonArray[1][x];
				}
			}
		});
		// 路径配置
		require.config({
			paths : {
				'echarts' : 'http://echarts.baidu.com/build/echarts',
				'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
			}
		});

		// 使用
		require([ 'echarts', 'echarts/chart/bar' // 使用柱状图就加载bar模块,按需加载
		], function(ec) {
			// 基于准备好的dom,初始化echarts图表
			var myChart = ec.init(document.getElementById('main1'));

			var option = {
				title : {
					text : '发电量对比',
					subtext : '模拟测试'
				},
				tooltip : {
					trigger : 'axis'
				},
				legend : {
					data : [ '逆变器', '汇流箱', '发电单元1', '发电单元2' ]
				},
				toolbox : {
					show : true,
					feature : {
						mark : {
							show : true
						},
						dataView : {
							show : true,
							readOnly : false
						},
						magicType : {
							show : true,
							type : [ 'line', 'bar' ]
						},
						restore : {
							show : true
						},
						saveAsImage : {
							show : true
						}
					}
				},
				calculable : true,
				xAxis : [ {
					type : 'category',
					data : [ '1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月',
							'9月', '10月', '11月', '12月' ]
				} ],
				yAxis : [ {
					type : 'value'
				} ],
				series : [ {
					name : '逆变器',
					type : 'line',
					data : actualPower,
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				}, {
					name : '汇流箱',
					type : 'bar',
					data : actualPower,
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				}, {
					name : '发电单元1',
					type : 'bar',
					data : actualPower,
					markPoint : {
						data : [ {
							type : 'max',
							name : '最大值'
						}, {
							type : 'min',
							name : '最小值'
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				}, {
					name : '发电单元2',
					type : 'bar',
					data : expectedPower,
					markPoint : {
						data : [ {
							name : '年最高',
							value : 182.2,
							xAxis : 7,
							yAxis : 183,
							symbolSize : 18
						}, {
							name : '年最低',
							value : 2.3,
							xAxis : 11,
							yAxis : 3
						} ]
					},
					markLine : {
						data : [ {
							type : 'average',
							name : '平均值'
						} ]
					}
				} ]
			};

			// 为echarts对象加载数据 
			myChart.setOption(option);
		});
	</script>
</body>

$.ajax({
            url : 'Power.action',
            type : 'GET',
            dataType : 'json',
            async : false,
            success : function(jsonArray) {
                for (x in jsonArray[0]) {
                    actualPower[x] = jsonArray[0][x];
                }
                for (x in jsonArray[0]) {
                    expectedPower[x] = jsonArray[1][x];
                }
            }
        });

其中 url的参数是请求的action

        dataType数据类型选择json

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值