SSH,SSM搭建echarts
jsp頁面
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<[email protected] uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP ‘index.jsp‘ starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript" src="Js/echarts.js"></script>
<script type="text/javascript" src="Js/jquery.js"></script>
</head>
<body><table>
<tr>
<td>用戶id </td>
<th>用戶名稱</th>
<th>真實姓名</th>
<th>性別</th>
<th>電話號碼</th>
<th>所在部門</th>
<th>體重</th>
<th>操作</th>
</tr>
<c:forEach var="u" items="${userlist }">
<tr>
<th>${u.uId}</th>
<th>${u.username}</th>
<th>${u.password}</th>
<th>${u.realname}</th>
<th>${u.sex}</th>
<th>${u.telephone}</th>
<th>${u.wigeht}</th>
<th>${u.address}</th>
<th><a>刪除</a>|<a>修改</a></th>
</tr>
</c:forEach>
</table>
<br>
<br>
<br>
<br>
<br><!-- 為ECharts準備一個具備大小（寬高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
// 基於準備好的dom，初始化echarts實例
var myChart = echarts.init(document.getElementById(‘main‘));
alert("123");
var a1=eval(${jsons});
alert(a1);
// 指定圖表的配置項和數據
var option = {
title: {
text: ‘ECharts 體重表‘
},
tooltip: {},
legend: {
data:[‘體重‘]
},
xAxis: [{
data:(function (){
var arr=[];
/* alert("222"); */
for(var i=0;i<a1.length;i++){
/* alert(a1[i].realname); */
console.log(a1[i].context);
arr.push(a1[i].realname);
}
/* alert(arr); */
return arr;
})()
}],
yAxis: {},
series: [{
name: ‘體重‘,
type: ‘bar‘,
data: (function (){
var arr1=[];
/* alert("333"); */
for(var i=0;i<a1.length;i++){
/* alert(a1[i].wigeht); */
console.log(a1[i].context);
arr1.push(a1[i].wigeht);
}
/* alert(arr1); */
return arr1;
})()
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script></body>
</html>
ssh中的action
package com.hd.action;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONObject;
import org.apache.struts2.ServletActionContext;
import org.springframework.stereotype.Controller;import com.hd.model.TUser;
import com.hd.service.IUserService;
import com.opensymphony.xwork2.ActionContext;
import com.opensymphony.xwork2.ActionSupport;
import com.opensymphony.xwork2.ModelDriven;@Controller
public class UserAction extends ActionSupport implements ModelDriven<TUser>{
TUser model = new TUser();
private List<TUser> userlist;
private String jsons;
public String getJsons() {
return jsons;
}
public void setJsons(String jsons) {
this.jsons = jsons;
}
@Resource
private IUserService userService;
public String query() throws IOException{
HttpServletRequest request = ServletActionContext.getRequest();
userlist = userService.queryAll();
net.sf.json.JSONArray jo = net.sf.json.JSONArray.fromObject(userlist);
jsons =jo.toString();
request.setAttribute("jsons", jsons);
return "success";
}
@Override
public TUser getModel() {
// TODO Auto-generated method stub
return model;
}
public List<TUser> getUserlist() {
return userlist;
}
public void setUserlist(List<TUser> userlist) {
this.userlist = userlist;
}}
ssm中的controller
package com.hd.controller;
import java.util.List;
import java.util.Map;import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;import com.hd.model.UserBean;
import com.hd.service.IUserService;@Controller
@RequestMapping("user")
public class UserController {
@Resource
private IUserService userService;
@RequestMapping("query")
public String query(Map map,HttpServletRequest request){
List<UserBean> userlist = userService.queryAll();
map.put("userlist", userlist);
net.sf.json.JSONArray jo = net.sf.json.JSONArray.fromObject(userlist);
request.setAttribute("jsons", jo.toString());
return "index";
}}
SSH,SSM搭建echarts