SpringBoot整合chart.js完成数据可视化

项目源码

点击进入github获取源码

   一个搭好的SpringBoot微服务框架，简单整合了一些东西，前后端分离，后端只需要向前端
提供JSON格式的数据即可，使用了fastJson用于数据格式转换。目前整合了Mybatis+chart.js实现了线状图、条形图展现数据。也是尝试打破
传统的表格展现大批数据的做法，采用数据可视化的思想去分析数据、呈现数据。后期想自学一下前端知识......

技术点

1.WEB框架 SpringBoot
2.项目构建 Maven
3.ORM框架 Mybatis
4.数据库 MySQL
5.前端模板 Thymeleafe
6.数据连接池 druid
7.图表 chart.js
8.分页工具BootstrapTable+pagehelper

登录页。。。。

根据查询的数据动态生成图表,鼠标移动到图会相应呈现数据

简单实用的pageHelper+BootStraptable分页

本地部署

由于是Maven项目，idea拉下代码，更新一下pom，将配置文件application.properties的数据库连接名称密码改成自己的就行了，sql文件打包好了~~~

/*
Navicat MySQL Data TransferSource Server         : mysql
Source Server Version : 50528
Source Host           : localhost:3306
Source Database       : pmpsystemTarget Server Type    : MYSQL
Target Server Version : 50528
File Encoding         : 65001Date: 2020-09-25 09:29:05
*/SET FOREIGN_KEY_CHECKS=0;-- ----------------------------
-- Table structure for `employee`
-- ----------------------------
DROP TABLE IF EXISTS `employee`;
CREATE TABLE `employee` (`empId` varchar(30) NOT NULL,`empName` varchar(20) DEFAULT NULL,`deptName` varchar(255) DEFAULT NULL,`joinProNums` int(30) DEFAULT NULL,PRIMARY KEY (`empId`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of employee
-- ----------------------------
INSERT INTO `employee` VALUES ('YG001', '周超', 'BI技术部', '2');
INSERT INTO `employee` VALUES ('YG002', '子圆', 'BI技术部', '2');
INSERT INTO `employee` VALUES ('YG003', '小明', 'SUNLIKE研发部', '3');
INSERT INTO `employee` VALUES ('YG004', '小红', 'SUNLIKE研发部', '4');
INSERT INTO `employee` VALUES ('YG005', '张单', 'SUNLIKE研发部', '4');
INSERT INTO `employee` VALUES ('YG006', '王为', 'SUNLIKE技术部', '4');
INSERT INTO `employee` VALUES ('YG007', '陈泽', 'UI设计部', '3');
INSERT INTO `employee` VALUES ('YG008', '周猛', 'ONLINE研发部', '3');
INSERT INTO `employee` VALUES ('YG009', '彬臣', 'ONLINE研发部', '2');
INSERT INTO `employee` VALUES ('YG010', '张磊', 'ONLINE技术部', '2');
INSERT INTO `employee` VALUES ('YG011', '子龙', '实施部', '4');
INSERT INTO `employee` VALUES ('YG012', '顺姐', '实施部', '3');
INSERT INTO `employee` VALUES ('YG013', '逍遥', '实施部', '3');
INSERT INTO `employee` VALUES ('YG014', '二狗', '销售部', '2');
INSERT INTO `employee` VALUES ('YG015', '东方', '销售部', '1');
INSERT INTO `employee` VALUES ('YG016', '老七', '销售部', '4');
INSERT INTO `employee` VALUES ('YG017', '阿西', 'BI研发部', '2');
INSERT INTO `employee` VALUES ('YG018', '重无', 'BI研发部', '2');
INSERT INTO `employee` VALUES ('YG019', '维科', 'BI研发部', '1');-- ----------------------------
-- Table structure for `projects`
-- ----------------------------
DROP TABLE IF EXISTS `projects`;
CREATE TABLE `projects` (`proId` varchar(30) NOT NULL COMMENT '项目编号',`proName` varchar(30) DEFAULT NULL COMMENT '项目名称',`proBoss` varchar(20) DEFAULT NULL COMMENT '项目经理',`classNums` int(11) DEFAULT NULL COMMENT '项目成员数量',`proInves` decimal(20,2) DEFAULT NULL COMMENT '投入资金',`startTime` date DEFAULT NULL COMMENT '项目启动时间',`endTime` date DEFAULT NULL COMMENT '项目结束时间',`prepayDate` date DEFAULT NULL COMMENT '项目预交日期',PRIMARY KEY (`proId`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of projects
-- ----------------------------
INSERT INTO `projects` VALUES ('XM001', '项目1', '王为', '8', '110000.00', '2019-07-05', '2019-10-15', '2019-10-15');
INSERT INTO `projects` VALUES ('XM002', '项目2', '王为', '6', '150000.00', '2019-08-20', '2019-09-18', '2019-09-03');
INSERT INTO `projects` VALUES ('XM003', '项目3', '王为', '5', '260000.00', '2019-08-15', '2019-09-30', '2019-09-30');
INSERT INTO `projects` VALUES ('XM004', '项目4', '王为', '9', '340000.00', '2019-06-03', '2019-11-20', '2019-11-20');
INSERT INTO `projects` VALUES ('XM005', '项目5', '二狗', '7', '80000.00', '2020-01-01', '2020-01-31', '2020-01-12');
INSERT INTO `projects` VALUES ('XM006', '项目6', '老七', '4', '200000.00', '2020-01-15', '2020-02-28', '2020-02-28');
INSERT INTO `projects` VALUES ('XM007', '项目7', '老七', '4', '650000.00', '2020-01-31', '2020-03-04', '2020-03-04');
INSERT INTO `projects` VALUES ('XM008', '项目8', '老七', '3', '112265.00', '2020-06-15', '2020-07-14', '2020-07-31');
INSERT INTO `projects` VALUES ('XM009', '项目9', '小明', '3', '500000.00', '2020-07-02', '2020-08-03', '2020-08-10');
INSERT INTO `projects` VALUES ('XM010', '项目10', '阿西', '2', '60000.00', '2020-07-12', '2020-07-12', '2020-09-30');-- ----------------------------
-- Table structure for `projectsdetails`
-- ----------------------------
DROP TABLE IF EXISTS `projectsdetails`;
CREATE TABLE `projectsdetails` (`proId` varchar(255) NOT NULL COMMENT '项目编号',`proName` varchar(255) DEFAULT NULL COMMENT '项目名称',`proBoss` varchar(255) DEFAULT NULL COMMENT '项目经理',`FinishValue` varchar(255) DEFAULT NULL COMMENT '项目完成度',`xyCbValue` varchar(255) DEFAULT NULL COMMENT '效益成本比率',`invesValue` varchar(255) DEFAULT NULL COMMENT '投资回报率',`proInves` float(20,2) DEFAULT NULL COMMENT '项目总投入',`proIncome` float(20,2) DEFAULT NULL COMMENT '项目总收入',`startTime` date DEFAULT NULL COMMENT '开始日期',`endTime` date DEFAULT NULL COMMENT '结束日期',`prepayDate` date DEFAULT NULL COMMENT '预交日期',PRIMARY KEY (`proId`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of projectsdetails
-- ----------------------------
INSERT INTO `projectsdetails` VALUES ('XM001', '项目1', '王为', '100.00%', '318.18%', '218.18%', '110000.00', '350000.00', '2019-07-05', '2019-10-15', '2019-10-15');
INSERT INTO `projectsdetails` VALUES ('XM002', '项目2', '王为', '100.00%', '266.67%', '166.67%', '150000.00', '400000.00', '2019-08-20', '2019-09-18', '2019-09-03');
INSERT INTO `projectsdetails` VALUES ('XM003', '项目3', '王为', '100.00%', '76.92%', '-23.08%', '260000.00', '200000.00', '2019-08-15', '2019-09-30', '2019-09-30');
INSERT INTO `projectsdetails` VALUES ('XM004', '项目4', '王为', '100.00%', '100.00%', '0.00%', '340000.00', '340000.00', '2019-06-03', '2019-11-20', '2019-11-20');
INSERT INTO `projectsdetails` VALUES ('XM005', '项目5', '二狗', '60.00%', '175.00%', '75.00%', '80000.00', '140000.00', '2020-01-01', '2020-01-31', '2020-01-12');
INSERT INTO `projectsdetails` VALUES ('XM006', '项目6', '老七', '100.00%', '185.00%', '85.00%', '200000.00', '370000.00', '2020-01-15', '2020-02-28', '2020-02-28');
INSERT INTO `projectsdetails` VALUES ('XM007', '项目7', '老七', '80.00%', '70.77%', '-29.23%', '650000.00', '460000.00', '2020-01-31', '2020-03-04', '2020-03-04');
INSERT INTO `projectsdetails` VALUES ('XM008', '项目8', '老七', '100.00%', '160.33%', '60.33%', '112265.00', '180000.00', '2020-06-15', '2020-07-14', '2020-07-31');
INSERT INTO `projectsdetails` VALUES ('XM009', '项目9', '小明', '100.00%', '168.00%', '68.00%', '500000.00', '840000.00', '2020-07-02', '2020-08-03', '2020-08-10');
INSERT INTO `projectsdetails` VALUES ('XM010', '项目10', '阿西', '40.00%', '0.00%', '0.00%', '60000.00', '0.00', '2020-07-12', '1999-09-09', '2020-09-30');-- ----------------------------
-- Table structure for `user`
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (`id` varchar(20) NOT NULL DEFAULT '',`password` varchar(20) DEFAULT NULL,PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES ('011', '123');

执行上面的SQL或者使用Navicat等工具导入项目中的pmpsystem.sql转储文件。

SpringBoot整合chart.js完成数据可视化，展现数据趋势与变化！相关推荐

数字孪生政务丨构建大数据可视化展现平台，提高行政服务效能
"全面推进政府履职和政务运行数字化转型,统筹推进各行业各领域政务应用系统集约建设.互联互通.协同联动,创新行政管理和服务方式,全面提升政府履职效能."--<国务院关于加强数字 ...
python可视化的优势_「数据可视化」数据可视化的优势有哪些？
数据可视化的优势有哪些?大数据可视化的实际意义是协助人更强的分析数据,信息内容的品质挺大水平上取决于其表达形式.对大数字列举所构成的数据信息中所包括的实际意义开展剖析,使剖析結果数据可视化. 实际上大 ...
MATLAB-基于长短期记忆网络(LSTM)的SP500的股票价格预测股价预测 matlab实战数据分析数据可视化时序数据预测变种RNN 股票预测
MATLAB-基于长短期记忆网络(LSTM)的SP500的股票价格预测股价预测 matlab实战数据分析数据可视化时序数据预测变种RNN 股票预测摘要近些年,随着计算机技术的不断发展,神 ...
什么是数据可视化，数据可视化有什么价值
"数据可视化"这个词看上去似乎让人有点摸不着头脑,但其实在实际生活中也有类似的应用. 举个例子,媒婆给你介绍对象,前面给你铺垫一堆,如五官端正.身材修长.皮肤雪白(各种繁杂的信息描 ...
Python 数据可视化—下载数据(CSV文件格式、JSON格式)
Python 数据可视化-下载数据CSV文件格式.JSON格式网上下载数据,并对这些数据进行可视化,可视化以两种常见格式存储的数据:CSV 和JSON. 我们将使用Python模块csv 来处理以C ...
Tikz作图教程：pgfplots宏包二维数据可视化的数据导入方法
pgfplots 绘图思想简介下面一段介绍来自pgfplots说明文档的引言部分,它对pgfplots的绘图思想作了清晰地描述: 科研工作者在交流研究结果.论文时,将数据可视化往往是必要和方便的. ...
Chart.js使用及ajax获取数据
图表插件Chart.js使用插件简介安装插件简介 chart.js是一个优秀的开源图表处理插件,内置条形,折现,雷达,时间刻度等等图表渲染. 安装 chart.js官网. 我这里使用2019年3 ...
如何将数据进行数据可视化展现？
作为一名交互设计师在进行数据可视化时,就是要把这些宝贵的数据资产变得触手可及,从而充分发挥数据的力量. 数据可视化好的可视化设计一定集易读.突出数据价值.易于分析.美观为一体的,最终让数据变得更加简 ...
交通大数据应用细分_盈海科技 | 交通大数据可视化“掘金”数据价值
面对日益拥堵的交通状况智能交通布局虽在不断完善但交通管理依旧收效甚微问题究竟出在了哪里? 数据独立存储难以融合应用数据内在规律难寻数据可视化程度低 -- 问题繁多困难重重怎么办??? 交 ...

SpringBoot整合chart.js完成数据可视化，展现数据趋势与变化！