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