SSM框架使用Echarts绘制动态数据可视化图表

最新推荐文章于 2021-03-25 18:59:13 发布

置顶

江湖一点雨

最新推荐文章于 2021-03-25 18:59:13 发布

阅读量2.4w

点赞数 37

分类专栏： SSM框架数据可视化文章标签： SSM框架使用Echarts绘制动态数据可视化图表 SSM使用echarts echarts动态数据可视化 ssm+echarts绘制图形 mysql数据可视化

本文链接：https://blog.csdn.net/ITBigGod/article/details/81041788

版权

SSM框架使用Echarts绘制动态数据可视化图表

1.前言

上一篇是说的jsp+servlet+echarts来实现动态数据的可视化，jsp+servlet+echarts实现动态数据的可视化
现在把它放到SSM框架里面去做一个读取mysql数据来实现动态可视化。

数据请求过程如下：
1.客户端通过ajax发送请求；
2.控制层controller接收请求；
3.获取mysql数据，转为Json格式并返回给客户端；
4.客户端接收数据后显示。

现在就以SSM框架使用Echarts绘制动态数据可视化图表，做个学习记录。

2.实践过程

如果你不会搭建SSM框架的话，可以参考：
SSM框架整合_java web普通版
 SSM框架整合_maven版

我们这次使用ssm+echarts来实现一个小功能，查询学生的成绩并且制成图（饼状图和柱形图）。

打开eclipse，新建一个maven项目，搭建好ssm框架。
如图：
这里写图片描述

然后在数据库里面新建一个newstudentinfo表。

创建表（newstudentinfo）

SET FOREIGN_KEY_CHECKS=0;

-- ----------------------------
-- Table structure for `newstudentinfo`
-- ----------------------------
DROP TABLE IF EXISTS `newstudentinfo`;
CREATE TABLE `newstudentinfo` (
  `id` int(11) NOT NULL auto_increment COMMENT '学号',
  `name` varchar(20) default NULL COMMENT '姓名',
  `score` decimal(4,2) default NULL COMMENT '分数',
  `subject` int(11) default NULL COMMENT '科目编号',
  `teacherid` int(11) default NULL COMMENT '任课教师编号',
  PRIMARY KEY  (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=5 DEFAULT CHARSET=utf8;

-- ----------------------------
-- Records of newstudentinfo
-- ----------------------------
INSERT INTO `newstudentinfo` VALUES ('1', '柒晓白', '80.00', '1', '1');
INSERT INTO `newstudentinfo` VALUES ('2', '邹涛', '20.00', '1', '3');
INSERT INTO `newstudentinfo` VALUES ('3', '王二', '85.00', '2', '4');
INSERT INTO `newstudentinfo` VALUES ('4', 'Test', '45.00', '3', '5');

填入数据：
这里写图片描述

好了，反正就是ssm+mysql数据库准备完毕以后，开始使用echarts。

SSM框架使用Echarts绘制动态数据可视化图表的源代码从这开始。

1.客户端通过ajax发送请求；
新建一个前台页面
柱状图： myecharts.jsp：

<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ECharts</title>
<!-- 引入jquery.js -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/jquery-3.2.1.min.js"></script>
<!-- 引入 echarts.js -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/js/echarts.common.min.js">