利用ECharts可视化mysql数据库中的数据

技术实现背景

在我们的日常开发中我们经常使用到各种各样的数据进行相关的功能的开发，在这个过程中我们可以用到各种各样的图表来分析和实现我们的需求，很多的时候我们可以进行相关的功能的分析和判断，在这个过程中我们就需要从数据库中读取的数据使用Echarts来进行相关的功能的分析，下图所示即为我们要实现的细节性，在这个过程中我们注意是Echarts的相关的功能的研究，然后是我们的进行相关的分析功能，下图即为我们要把我们的功能进行相关的数据库中的数据在前端进行相关的功能进行展示。

准备工作

开发工具主要是包含mysql数据库，echarts,ssm框架(也可以使用servlet和ssh)均可以，idea编辑器和Tomcat等
数据表的建立，为了大家的入门的方便，这里博主还是选择了以单表的功能进行相关的功能的开发给大家进行相关的功能的讲解。

CREATE TABLE `bookinfo` (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT '主键id',`bid` varchar(40) NOT NULL COMMENT '图书编号',`bookName` varchar(40) NOT NULL COMMENT '书名',`author` varchar(30) NOT NULL COMMENT '作者',`publisher` varchar(40) NOT NULL COMMENT '出版社',`classifyCode` varchar(40) NOT NULL COMMENT '分类名称',`createTime` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '创建时间',`bookAge` int(11) NOT NULL COMMENT '书龄',`isBorrowed` varchar(2) NOT NULL COMMENT '是否可借',`status` varchar(2) NOT NULL COMMENT '状态',`number` int(11) NOT NULL COMMENT '图书数量',`qrCode` varchar(100) NOT NULL COMMENT '二维码',`location` varchar(100) NOT NULL COMMENT '位置',PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8mb4 COMMENT='图书表';-- ----------------------------
-- Records of bookinfo
-- ----------------------------
INSERT INTO `bookinfo` VALUES ('1', '0001', 'Java编程思想', '马丁', '新华出版社', '科技类', '2020-08-02 10:48:23', '5', '1', '1', '7', '111', '1111');
INSERT INTO `bookinfo` VALUES ('2', '0002', 'Java核心', '马丁', '清华出版社', '科技类', '2020-08-03 15:04:42', '5', '1', '1', '5', '555', '67');
INSERT INTO `bookinfo` VALUES ('3', '0004', 'C++', '陈道明', '北大出版社', '科技类', '2019-08-03 15:47:01', '6', '4', '1', '4', '55', '65');
INSERT INTO `bookinfo` VALUES ('4', '0005', 'Java', '马丁', '郑州大学出版社', '科技类', '2019-08-03 16:06:46', '6', '1', '1', '5', '56', '45');
INSERT INTO `bookinfo` VALUES ('5', '0007', '数据结构', '马丁', '郑州大学出版社', '自然类', '2018-08-03 16:07:38', '5', '6', '3', '1', '43', '43');

Echarts的前端实现过程

1.首先是我们需要引入我们的前端的资源，这里我们主要是引入其相关的Echarts的相关的资源引入到我们的程序中去

<link rel="stylesheet" type="text/css" href="${ctx}/static/eacharjs/echarts.common.min.js" />

2.我们进行相关的功能的分析实现，我们进行相关的功能的设计，首先是对我们的请求的参数的获取和然后我们可以通过ajax异步请求来获取相关的功能的特点性，在这个流程中去获取我们所需要的参数，然后对其相关的水平的参数和其对于的数据的分析和判断，在这个过程中我们能够实现其相关的功能，其对于的功能的开发即是主要是参照echarts的官方文档进行相关的功能的分析和判断，下面为
https://echarts.apache.org/zh/tutorial.html#5%20%E5%88%86%E9%92%9F%E4%B8%8A%E6%89%8B%20ECharts

<script type="text/javascript">/*点击查询的时候就是提交表单*/function sear() {// 基于准备好的dom，初始化echarts实例var myChart = echarts.init(document.getElementById('box'));//利用3个变量接收这几个从前台传入的变量方便后面能够合理的使用产生搜索条件var author = $("#author").val();var bookName = $("#bookName").val();var classifyCode = $("#classifyCode").val();var logDateStart = $("#logDateStart").val();var logDateEnd = $("#logDateEnd").val();//分别定义作者和对应的年份的数组var Turnover = [];var year=[];var is=false;//发收ajax请求,异步获取相对应的数据$.ajax({url:'${ctx}/book/marking',data:{"author":author,"bookName":bookName,"classifyCode":classifyCode,"logDateStart":logDateStart,"logDateEnd":logDateEnd},dataType:'json',type:'post',success:function (data) {console.log(data);$.each(data.backMsg,function (index,obj) {var createTime = new Date(obj.createTime);if(year.length==0){year.push(createTime.getFullYear());//如果是第一个的话就把其对应的数据给加上Turnover[0]=obj.number;}else{for(var i=0;i<year.length;i++){if(year[i]==createTime.getFullYear()){is=true;//如果是重复的是，其对应的个数加上其数据和就行了Turnover[i]=Turnover[i]+obj.number;break;}}if(is==false){//如果这不重复的话就将其对于的值给重新加一个就行了year.push(createTime.getFullYear());Turnover[Turnover.length]=obj.number;}else{is=false;}}});// 指定图表的配置项和数据var option = {title: {text: '指定年份图书在馆数量'},tooltip: {},legend: {data:['作者/图书名称/图书类别']},xAxis: {data: year},yAxis: {},series: [{name: '作者/图书名称/图书类别',type: 'bar',data: Turnover}]}// 使用刚指定的配置项和数据显示图表myChart.setOption(option);}});}</script>

项目后台流程实现

1.首先是主要是对后台的数据的各层的写法，主要是包含着controller,service,和dao，这里主要是常规的写法，就不在一一的详细的讲解了，这里只展示核心代码，也就是与echarts生成相关的代码，其他的不相关的代码就不在啰嗦讲解,这里主要就是为了在后天对查询的代码进行相关的代码的实现

controller

    // 显然该数据是我们要进行相关的功能的匹配的@RequestMapping(value = "/marking")@ResponseBody // 根据需要来查询对应的相关的功能的特点 显然是通过这样返回json字符串的形式在返回数据public String marking(EcartsDateUtils ecarts) {System.out.println(ecarts);List<Book> books = bookService.marking(ecarts);// return books;return books;}

service

    //显然这是对其相关的相关的图书的匹配的相关的查询public List<Book> marking(EcartsDateUtils ecarts) {// TODO Auto-generated method stubreturn bookDao.marking(ecarts);}

dao

   //显然这里是对我们的ecarts的相关的功能的描述public List<Book> marking(EcartsDateUtils ecarts) {// TODO Auto-generated method stubList<Book> books = new ArrayList<Book>();books = sqlSession.selectList("BookDao.marking",ecarts);return books;}

mapper文件中对数据库的信息进行相关的功能的判断，其对应的sql语句的写法

    <!--根据自己的搜索条件来查询商品的数据 --><select id="marking" parameterType="com.nisco.core.util.EcartsDateUtils" resultType="map">select * from bookinfo<where><if test="author!=null and author!=''">and author = #{author}</if><if test="bookName!=null and bookName!=''">AND bookName LIKE '%${bookName}%'</if><if test="classifyCode!=null and classifyCode!=''">and classifyCode = #{classifyCode}</if></where>and createTime between #{logDateStart}and #{logDateEnd} order by createTime</select>

因为需求是我们是一个组合查询，这里博主是以一个工具类的方式进行了相关的功能的封装，将其实现的细节条件进行了相关的功能的封装，细节实现比较重要，大家注意一下。

package com.nisco.dms.entity;import com.nisco.dms.util.ExcelUtil.ExcelAnotation;public class Book{// 书编号private String bid;private String bookName;// 作者private String author;// 出版社private String publisher;// 分类编号private String classifyCode;// 创建时间private String createTime;// 书龄private String bookAge;// 是否可借private String isBorrowed;// 状态private String status;// 图书数量private String number;// 二维码private String qrCode;// 位置private String location;public String getBid() {return bid;}public void setBid(String bid) {this.bid = bid;}public String getBookName() {return bookName;}public void setBookName(String bookName) {this.bookName = bookName;}public String getBookAge() {return bookAge;}public void setBookAge(String bookAge) {this.bookAge = bookAge;}public String getAuthor() {return author;}public void setAuthor(String author) {this.author = author;}public String getPublisher() {return publisher;}public void setPublisher(String publisher) {this.publisher = publisher;}public String getClassifyCode() {return classifyCode;}public void setClassifyCode(String classifyCode) {this.classifyCode = classifyCode;}public String getCreateTime() {return createTime;}public void setCreateTime(String createTime) {this.createTime = createTime;}public String getIsBorrowed() {return isBorrowed;}public void setIsBorrowed(String isBorrowed) {this.isBorrowed = isBorrowed;}public String getStatus() {return status;}public void setStatus(String status) {this.status = status;}public String getNumber() {return number;}public void setNumber(String number) {this.number = number;}public String getQrCode() {return qrCode;}public void setQrCode(String qrCode) {this.qrCode = qrCode;}public String getLocation() {return location;}public void setLocation(String location) {this.location = location;}}