使用Echarts如何从数据库中获取数据
php使用Echarts如何从数据库中获取数据
写下你的评论...
Copyright (C)
All Rights Reserved | 京ICP备 号-2相关文章推荐
ECharts 是百度出品的jquery图表插件。相对于Chartist，拥有更加强大的功能，以及更加详细的文档（ECharts的文档形式非常优秀，简明易懂）。ECharts支持的图表种类非常多，同时...
简单一个案例
JSP:引入相应的js即可
echarts 地图
echarts 生成统计图时，自动保存图片到服务器，并使用freemarker生成word。
1.项目工程截图如下：
需要echarts包和生成word的freemarker-...
最近要做统计图表所以用了echarts ，效果不错，而且也很简单。根据echarts需要的数据类型后台拼接json，再用js拆分组装成对应数组数据等。就实现了功能。
1.最简单的：
最近，要用到echarts画饼图统计图，于是学习了会，附上echarts官网
/doc/example.html
看到echarts有一些饼...
echarts 生成统计图时，自动保存图片到服务器，并使用freemarker生成word。
1.项目工程截图如下：
需要echarts包和生成word的freemarker-...
数据库链接
ECharts 框架的 bar 统计图
ECharts 统计图中的bar（条形统计）的X轴上的值的显示方法一共有三种，先上图：
他的最新文章
讲师：董晓杰
讲师：姚远
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)Echarts在java中使用
时间： 21:50:47
&&&& 阅读：113
&&&& 评论：
&&&& 收藏：0
标签：index.jsp
&%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%&&%@ taglib prefix="c" uri="/jsp/jstl/core"%&&% 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%&"&&meta http-equiv="Content-Type" content="text/charset=UTF-8"&
&title&This is my JSP 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"& --&&link href="assets/css/bootstrap.min.css" rel="stylesheet"&&style type="text/css"&
html,body,#wrapper{
width: 100%;
height: 100%; }
.navbar-inverse{
border-radius:0;
margin-bottom: 0; } .navbar-inverse .navbar-header{
width: 180
text-align:
border-right: 1px solid rgba(255,255,255,0.4); } .navbar-inverse .navbar-header .navbar-brand{
display: inline- } .slider{
width: 180
min-width:180
bottom: 0;
background-color: rgba(0,0,0,0.00);
box-shadow:3px 0 6px rgba(0,0,0,0.3) } .slider .nav li a:hover, .slider .nav li.active & a{
background-color: rgba(0,0,0,0.2)! } .slider .sub-menu li a{
padding-left:40 } .slider .sub-menu{
/* border-bottom:1px solid #e5e5e5; */
border-top:1px solid #e5e5e5; } #wrap{
margin: 0 0 0 180 }
#wrap .wrap{
padding:5px 10 }
.panel .panel-footer{
background-color: #
padding: 0 15 }
.panel-footer .pagination{
margin: 5 } &/style&&/head&
&body& &div id="wrapper"&
&nav class="navbar navbar-inverse"&
&!-- Brand and toggle get grouped for better mobile display --&
&div class="navbar-header"&
&a class="navbar-brand" href="#"&后台系统&/a&
&ul class="nav navbar-nav"&
&li class="active"&&a href="#"&首 页 &span class="sr-only"&(current)&/span&&/a&&/li&
&li&&a href="views/login.jsp"&登 录&/a&&/li&
&li class="dropdown"&&a href="#" class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false"&更 多 &span class="caret"&&/span&&/a&
&ul class="dropdown-menu"&
&li&&a href="#"&注 册&/a&&/li&
&li&&a href="#"&Another action&/a&&/li&
&li&&a href="#"&Something else here&/a&&/li&
&li role="separator" class="divider"&&/li&
&li&&a href="#"&Separated link&/a&&/li&
&li role="separator" class="divider"&&/li&
&li&&a href="#"&One more separated link&/a&&/li&
&ul class="nav navbar-nav pull-right"&
&li&&a href="logout" title="安全退出"&安全退出&/a&&/li&
&div class="slider"&
&ul class="nav"&
&li class="active"&
&a href="javascript:void(0);" onclick="openOrClose(this)"&&i class="glyphicon glyphicon-user"&&/i& 用户管理 &i class="glyphicon glyphicon-chevron-down pull-right"&&/i&&/a&
&ul class="nav sub-menu"&
href="users/usersController?_method=findAll"&&i class="glyphicon glyphicon-list"&&/i& 用户列表&/a&&/li&
&li class="active"&&a
href="#"&&i class="glyphicon glyphicon-plus"&&/i& 用户添加&/a&&/li&
href="javascript:void(0);" onclick="openOrClose(this)"&&i class="glyphicon glyphicon-th-list"&&/i& 地址管理 &i class="glyphicon glyphicon-chevron-left pull-right"&&/i&&/a&
&ul class="nav sub-menu hidden"&
href="#"&&i class="glyphicon glyphicon-list"&&/i& 地址列表&/a&&/li&
href="#"&&i class="glyphicon glyphicon-plus"&&/i& 地址添加&/a&&/li&
&div id="wrap"&
&div class="wrap"&
&div class="panel panel-info"&
&div class="panel-heading"&
&form action="users/usersController" style="display:"&
&div class="col-sm-4 pull-right" style="margin-top: -7"&
&div class="input-group"&
&input type="text" class="form-control" name="keyword" placeholder="搜索..." value="${page.keywords[‘username‘] }"&
&input type="hidden" name="_method" value="findAll"&
&span class="input-group-btn"&
&button class="btn btn-default" type="submit"&搜 索&/button&
&button type="button" class="btn btn-default btn-sm pull-right" style="margin-top:-5" data-toggle="modal" data-target="#gridSystemModalLabel"&年龄分析&/button&
&table class="table table-bordered table-hover" style="margin-bottom: 0"&
&th&ID&/th&
&th&用户名&/th&
&th&密码&/th&
&th&年龄&/th&
&th&邮箱&/th&
&th&操作&/th&
&c:forEach items="${page.data }" var="user"&
&td&${user.id }&/td&
&td&${user.username }&/td&
&td&${user.password }&/td&
&td&${user.age }&/td&
&td&${user.email }&/td&
&a href="#" class="btn btn-info"&详情&/a&
&a href="users/usersController?_method=findById&id=${user.id }" class="btn btn-warning"&修改&/a&
&a href="users/usersController?_method=deleteById&id=${user.id }" onclick="return confirm(‘确认删除?‘);" class="btn btn-danger"&删除&/a&
&/c:forEach&
&div class="panel-footer text-right"&
&ul class="pagination"&
&li&&span&${page.curr } / ${page.pageCount }&/span&&/li&
&li ${(page.curr eq page.first)?‘class="disabled"‘:‘‘ }&
&a href="users/usersController?_method=findAll&keyword=${page.keywords[‘username‘] }&curr=${page.first }" title="首页"&首页&/a&
&li ${(page.curr eq page.first)?‘class="disabled"‘:‘‘ }&
&a href="users/usersController?_method=findAll&keyword=${page.keywords[‘username‘] }&curr=${page.prev }" title="上一页"&上一页&/a&
&c:forEach begin="${page.start }" end="${page.end }" var="num"&
&c:choose&
&c:when test="${page.curr == num }"&
&li class="active"&&a
title="第${num }页"&${num }&/a&&/li&
&c:otherwise&
&li&&a href="users/usersController?_method=findAll&keyword=${page.keywords[‘username‘] }&curr=${num }" title="第${num }页"&${num }&/a&&/li&
&/c:otherwise&
&/c:choose&
&/c:forEach&
&li ${(page.curr eq page.last)?‘class="disabled"‘:‘‘ }&
&a href="users/usersController?_method=findAll&keyword=${page.keywords[‘username‘] }&curr=${page.next }" title="下一页"&下一页&/a&
&li ${(page.curr eq page.last)?‘class="disabled"‘:‘‘ }&
&a href="users/usersController?_method=findAll&keyword=${page.keywords[‘username‘] }&curr=${page.last }" title="尾页"&尾页&/a&
&/div& &/div&
&div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="gridSystemModalLabel"&
&div class="modal-dialog" role="document"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="gridSystemModalLabel"&用户年龄分析&/h4&
&div class="modal-body"&
&div class="container-fluid"&
&div class="row"&
&div class="col-lg-12"&
&div id="charts" style="width: 100%;height:60%;"&&/div&
&div class="modal-footer"&
&button type="button" class="btn btn-default" data-dismiss="modal"&关闭&/button&
&/div&&!-- /.modal-content --&
&/div&&!-- /.modal-dialog --&&/div&&!-- /.modal --&
&/body&&script type="text/javascript" src="assets/js/jquery-1.11.3.min.js"&&/script&&script type="text/javascript" src="assets/js/bootstrap.min.js"&&/script&&script type="text/javascript" src="assets/js/echarts.min.js"&&/script&&script type="text/javascript" src="assets/js/Utils.js"&&/script&&script type="text/javascript"&
$(‘#gridSystemModalLabel‘).on(‘shown.bs.modal‘,function(){
var charts = echarts.init(document.getElementById("charts"));
var option = {
text: ‘用户年龄分析‘,
left:‘center‘
tooltip: {},
orient:‘vertical‘,
left:‘left‘,
data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
series: [{
name: ‘用户年龄分析‘,
type: ‘pie‘,
radius:‘65%‘,
charts.showLoading();
utils.ajax({
url:‘users/usersController‘,
data:{"_method":"analyzeAge"},
success:function(data){
charts.hideLoading();
eval("data = "+data);
//为了得到名字
var names = [];
for(var i in data){
names.push(data[i][‘name‘]);
option.legend.data =
option.series[0].data =
charts.setOption(option);
}); //打开或是关闭菜单 function openOrClose(_dom){
var sub_menu = getNextSilbing(_dom);
var flag = _dom.querySelector(".pull-right");
//如果包含某些样式
则做一些事情
if(hasClass(sub_menu,"hidden")){
关于隐藏的class
removeClass(sub_menu,"hidden");
//去掉菜单上的向左的箭头
removeClass(flag,"glyphicon-chevron-left");
//添加上向下的箭头
addClass(flag,"glyphicon-chevron-down");
//添加是 隐藏的class
addClass(sub_menu,"hidden");
//移除向下的箭头
removeClass(flag,"glyphicon-chevron-down");
//添加上向左的箭头
addClass(flag,"glyphicon-chevron-left");
//console.log();
} //得到下一个兄弟节点 function getNextSilbing(_dom){
_dom = _dom.nextS
while(_dom.nodeType!=1){
_dom = _dom.nextS
return _ } //判断是否包含没有个class样式 function hasClass(_dom,_className){
if(_dom.className.indexOf(_className)!=-1){
} //给指定的元素添加指定的样式 function addClass(_dom,_className){
_dom.className = _dom.className+" "+_classN } //给指定的元素移除指定的样式 function removeClass(_dom,_className){
_dom.className = _dom.className.replace(_className,"");
//将每次添加上的多余的空格去掉
_dom.className = _dom.className.replace(/\s+/ig," "); }&/script&&/html&
UsersController.java
package com.huawei.
import java.io.Fimport java.io.IOEimport java.util.HashMimport java.util.Limport java.util.M
import javax.servlet.ServletCimport javax.servlet.ServletEimport javax.servlet.http.HttpSimport javax.servlet.http.HttpServletRimport javax.servlet.http.HttpServletR
import mons.fileupload.FileIimport mons.fileupload.FileUploadEimport mons.fileupload.disk.DiskFileItemFimport mons.fileupload.servlet.ServletFileU
import mon.Pimport com.huawei.po.Uimport com.huawei.service.UsersS
/** * Servlet implementation class UsersController */public class UsersController extends HttpServlet { private static final long serialVersionUID = 1L;
private UsersService usersService = new UsersService();
* @see HttpServlet#HttpServlet()
public UsersController() {
// TODO Auto-generated constructor stub
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/ protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response); }
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/ protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
当前的doPost方法
当作中专站
String _method = request.getParameter("_method");
if("findAll".equalsIgnoreCase(_method)){
this.findAll(request, response);
}else if("deleteById".equalsIgnoreCase(_method)){
this.deleteById(request, response);
}else if("register".equalsIgnoreCase(_method)){
this.register(request, response);
}else if("findById".equalsIgnoreCase(_method)){
this.findById(request, response);
}else if("update".equalsIgnoreCase(_method)){
this.update(request, response);
}else if("analyzeAge".equalsIgnoreCase(_method)){
this.analyzeAge(request, response);
private void analyzeAge(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException{
// TODO Auto-generated method stub
response.getWriter().write(this.usersService.analyzeAge());
private void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{
Users curr = (Users) request.getSession().getAttribute("admin");
if(ServletFileUpload.isMultipartContent(request)){
Map&String, FileItem& map = new HashMap&String, FileItem&();
//创建工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//得到JVM提供的缓存目录
ServletContext context = this.getServletContext();
File repository = (File)context.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
//创建ServletFileUpload
ServletFileUpload upload = new ServletFileUpload(factory);
//解析请求
List&FileItem& items = upload.parseRequest(request);
//users = new Users();
for(FileItem item:items){
//form表单里面的每一个字段
map.put(item.getFieldName(), item);
Users u = new Users();
u.setId(Integer.parseInt(map.get("id").getString()));
u.setUsername(map.get("username").getString());
u.setPassword(map.get("password").getString());
u.setEmail(map.get("email").getString());
//u.setImage(Integer.parseInt(map.get("id").getString()));
u.setAge(Integer.parseInt(map.get("age").getString()));
前一步的数据没有顺序的问题
//for(String key:map.keySet()){
//FileItem item = map.get(key);
//if(item.isFormField()){
//没有顺序
//得到跟路径
String path = context.getRealPath("/");
//得到附件目录
File attachment = new File(path,"attachment/"+map.get("username").getString());
//如果没有
就创建目录
System.out.println(attachment.getAbsolutePath());
System.out.println(attachment.exists());
if(!attachment.exists()){
attachment.mkdirs();
FileItem image = map.get("image");
File output = new File(attachment,System.currentTimeMillis()+"."+getSuffix(image.getName()));
image.write(output);
u.setImage("attachment/"+map.get("username").getString()+"/"+output.getName());
//System.currentTimeMillis()
this.usersService.update(u);
this.findAll(request, response);
//map.get("id");
} catch (Exception e) {
e.printStackTrace();
private String getSuffix(String name){
if(name!=null){
String[] suffixs = name.split("\\.");
if(suffixs.length&1){
return suffixs[suffixs.length-1];
return ""; }
private void findById(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
String id = request.getParameter("id");
if(id!=null && id.trim()!=""){
Users users = this.usersService.findById(Integer.parseInt(id));
request.setAttribute("users", users);
request.getRequestDispatcher("/views/update.jsp").forward(request, response);
private void register(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Users users =
//判断是否有文件上传
if(ServletFileUpload.isMultipartContent(request)){
//创建工厂
DiskFileItemFactory factory = new DiskFileItemFactory();
//得到JVM提供的缓存目录
ServletContext context = this.getServletContext();
File repository = (File)context.getAttribute("javax.servlet.context.tempdir");
factory.setRepository(repository);
//创建ServletFileUpload
ServletFileUpload upload = new ServletFileUpload(factory);
//解析请求
List&FileItem& items = upload.parseRequest(request);
users = new Users();
for(FileItem item:items){
//form表单里面的每一个字段
//得到跟路径
String path = context.getRealPath("/");
//得到附件目录
File attachment = new File(path,"attachment");
//如果没有
就创建目录
if(!attachment.exists()){
attachment.mkdirs();
} catch (FileUploadException e) {
e.printStackTrace();
protected void deleteById(HttpServletRequest request,HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String id = request.getParameter("id");
this.usersService.deleteById(Integer.parseInt(id));
response.sendRedirect("usersController?_method=findAll");
protected void findAll(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//List&Users& users = this.usersService.findAll();
//request.setAttribute("users", users);
String keyword = request.getParameter("keyword");
if(keyword==null){
keyword = "";
Page page = new Page();
String curr = request.getParameter("curr");
if(curr ==null || curr.trim().equals("")){
curr ="1";
page.getKeywords().put("username", keyword);
page.setCurr(Integer.parseInt(curr));
page = this.usersService.find4Page(page);
request.setAttribute("page", page);
request.getRequestDispatcher("/views/index.jsp").forward(request, response);
UsersService.java
package com.huawei.
import java.util.L
import mon.Pimport com.huawei.dao.UsersDAO;import com.huawei.po.U
public class UsersService {
private UsersDAO usersDAO = new UsersDAO();
public List&Users& findAll(){
return this.usersDAO.findAll(); }
public void deleteById(Integer id) {
// TODO Auto-generated method stub
this.usersDAO.delete(id); }
public Page find4Page(Page page){
return this.usersDAO.find4Page(page); }
public Users findByUsername(String username) {
List&Users& users = this.usersDAO.findBy("username",username);
return users.size()&0?users.get(0): }
public Users findById(Integer id){
return this.usersDAO.findById(id); }
public void update(Users users){
this.usersDAO.update(users); }
public String analyzeAge(){
return this.usersDAO.analyzeAge(); }}
UsersDAO.java
package com.huawei.
import java.sql.ResultSimport java.sql.SQLEimport java.util.L
import com.huawei.base.BaseDAO;import mon.CallBimport mon.Pimport com.huawei.po.Uimport com.huawei.utils.BeanU
public class UsersDAO extends BaseDAO&Users, Integer&{
@Override public Page find4Page(Page page) {
//构建sql语句
String sql = "SELECT * FROM "+BeanUtil.getTableName(clazz)+" WHERE username LIKE ? LIMIT ?,?";
String count = "SELECT COUNT(1) FROM "+BeanUtil.getTableName(clazz)+" WHERE username LIKE ?";
//得到数据
List&Users& data = this.find(sql, new Object[]{"%"+page.getKeywords().get("username")+"%",(page.getCurr()-1)*page.getPageSize(),page.getPageSize()});
page.setRowCount(this.getCount(count,new Object[]{"%"+page.getKeywords().get("username")+"%"}));
page.setData(data);
public String analyzeAge(){
final StringBuilder sb = new StringBuilder("[");
String sql = "SELECT "+
"WHEN age&0 && age&11 THEN ‘十岁以下‘ "+
"WHEN age&10 && age&21 THEN ‘11-20‘ "+
"WHEN age&20 && age&31 THEN ‘21-30‘ "+
"WHEN age&30 && age&41 THEN ‘31-40‘ "+
"WHEN age&40 && age&51 THEN ‘41-50‘ "+
"WHEN age&50 && age&61 THEN ‘51-60‘ "+
"WHEN age&60 && age&71 THEN ‘61-70‘ "+
"WHEN age&70 && age&81 THEN ‘71-80‘ "+
"WHEN age&80 && age&91 THEN ‘81-90‘ "+
"WHEN age&90 && age&101 THEN ‘91-100‘ "+
"WHEN age&100 THEN ‘一百岁以上‘ "+
"END as ‘label‘,count(age) as ‘value‘ "+
"GROUP BY label ";
this.executeQuery(sql, null, new CallBack() {
public void execute(ResultSet rs) throws SQLException {
//处理数据
//"{\"name\":\"\",\"value\":\"\"}"
while(rs.next()){
sb.append("{").append("\"name\":\"").append(rs.getString("label")+"\",\"value\":\"").append(rs.getInt("value")+"\"").append("},");
if(sb.length()&1){
sb.deleteCharAt(sb.length()-1);
sb.append("]");
return sb.toString(); }
&&国之画&&&& &&&&chrome插件&&
版权所有 京ICP备号-2
迷上了代码！