SSH,SSM搭建echarts

Posted joyous

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SSH,SSM搭建echarts相关的知识,希望对你有一定的参考价值。

jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib 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的主要内容,如果未能解决你的问题,请参考以下文章

如何用eclipse搭建ssh框架

如何搭建SSH框架,myeclipse搭建SSH框架详解

搭建搭建一个SSH框架 Web工程,实现以下功能

JAVA SSH框架搭建流程

1、搭建搭建一个SSH框架 Web工

eclipse怎么搭建ssh框架