MySQL可视化数据备份 mysql 数据可视化

转载

落花有意飞花 2024-05-15 10:27:45

文章标签 MySQL可视化数据备份 echarts springboot mysql spring 文章分类 MySQL 数据库

本博文主要讲解如何从数据库里获取数据进行可视化。具体方式为：数据存在MySQL数据库里，通过SpringBoot和Mybatis-Plus搭建后台，提供接口给前端调用，前端用Echarts实现数据可视化。

环境准备

JDK1.8

Maven3.3.9

MySQL5.7

IDEA

建库建表

新建名为test的数据库

CREATE DATABASE IF NOT EXISTS test DEFAULT CHARSET utf8 COLLATE utf8_general_ci;

新建goods表及插入表数据

CREATE TABLE `goods` (
  `id` int(11) NOT NULL,
  `name` varchar(50) NOT NULL,
  `num` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `goods` (`id`, `name`, `num`) VALUES
(1, '衬衫', 10),
(2, '羊毛衫', 20),
(3, '雪纺衫', 50),
(4, '裤子', 30),
(5, '高跟鞋', 23),
(6, '袜子', 60);

新建SpringBoot工程

进入如下网站

https://start.spring.io/

MySQL可视化数据备份 mysql 数据可视化_echarts

下载了zip文件，解压zip文件后，并用IDEA打开

MySQL可视化数据备份 mysql 数据可视化_mysql_02

添加依赖

修改pom.xml

添加mybatis-plus依赖

<dependency>
			<groupId>com.baomidou</groupId>
			<artifactId>mybatis-plus-boot-starter</artifactId>
			<version>3.1.2</version>
		</dependency>

去掉mysql-connector-java下面的runtime变为如下：

<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
		</dependency>

添加lombok依赖

<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<version>1.18.4</version>
		</dependency>

MySQL可视化数据备份 mysql 数据可视化_MySQL可视化数据备份_03

配置数据库信息

重命名application.properties为application.yml

MySQL可视化数据备份 mysql 数据可视化_springboot_04

application.yml内容如下：

spring:
  datasource:
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai&zeroDateTimeBehavior=CONVERT_TO_NULL
    username: root
    password: 123

提示：注意修改mysql数据库的用户名及密码

后台代码

按如下目录结构新建出相应的类

MySQL可视化数据备份 mysql 数据可视化_springboot_05

entity类

package com.example.springbootmysqlecharts.entity;

import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;

import java.io.Serializable;
@Data
@TableName("goods")
public class GoodsEntity implements Serializable {
    private static final long serialVersionUID = 1L;

    @TableId
    private Long id;

    private String name;

    private Integer num;
}

dao类

package com.example.springbootmysqlecharts.dao;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.springbootmysqlecharts.entity.GoodsEntity;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface GoodsDao extends BaseMapper<GoodsEntity> {
}

service类

package com.example.springbootmysqlecharts.service;

import com.baomidou.mybatisplus.extension.service.IService;
import com.example.springbootmysqlecharts.entity.GoodsEntity;

public interface GoodsService extends IService<GoodsEntity> {
}

service.impl实现类

package com.example.springbootmysqlecharts.service.impl;

import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
import com.example.springbootmysqlecharts.dao.GoodsDao;
import com.example.springbootmysqlecharts.entity.GoodsEntity;
import com.example.springbootmysqlecharts.service.GoodsService;
import org.springframework.stereotype.Service;

@Service("goodsService")
public class GoodsServiceImpl extends ServiceImpl<GoodsDao, GoodsEntity> implements GoodsService {
}

controller类

package com.example.springbootmysqlecharts.controller;

import com.example.springbootmysqlecharts.entity.GoodsEntity;
import com.example.springbootmysqlecharts.service.GoodsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("goods")
public class GoodsController {
    @Autowired
    private GoodsService goodsService;

    @RequestMapping("/list")
    public List<GoodsEntity> list(){
        return goodsService.list();
    }

}

启动项目

点击启动键

MySQL可视化数据备份 mysql 数据可视化_mysql_06

正常启动后如下图所示：

MySQL可视化数据备份 mysql 数据可视化_springboot_07

测试接口

打开浏览器，地址栏输入：

http://localhost:8080/goods/list

看到如下输出为正常

MySQL可视化数据备份 mysql 数据可视化_echarts_08

下载echarts

进入echarts官网下载

https://echarts.apache.org/zh/download.html

MySQL可视化数据备份 mysql 数据可视化_MySQL可视化数据备份_09

MySQL可视化数据备份 mysql 数据可视化_spring_10

MySQL可视化数据备份 mysql 数据可视化_springboot_11

下载得到zip文件，解压后，进入dist目录，找到echarts.min.js

MySQL可视化数据备份 mysql 数据可视化_MySQL可视化数据备份_12

在SpringBoot的static目录下新建js目录，并复制echarts.min.js到新建的js目录中

MySQL可视化数据备份 mysql 数据可视化_MySQL可视化数据备份_13

前端代码

index.html

在templates目录下新建index.html文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

配置静态资源访问

修改properties.yml, 添加

resources:
    static-locations: classpath:/templates/, classpath:/static/

MySQL可视化数据备份 mysql 数据可视化_mysql_14

提示：注意resources属于spring的下一级属性，要有两个空格，和datasource对齐。

测试

启动项目，浏览器访问

http://localhost:8080/index.html

MySQL可视化数据备份 mysql 数据可视化_springboot_15

前后端联调

下载并引入jquery

进入官网下载最近版本的jquery

https://jquery.com/download/

MySQL可视化数据备份 mysql 数据可视化_MySQL可视化数据备份_16

如果官网下载慢，可以到如下地址下载最新版本

http://www.jq22.com/jquery-info122

MySQL可视化数据备份 mysql 数据可视化_spring_17

解压下载文件后，复制jquery-3.5.1.min.js到Springboot的resources/static/js目录下

MySQL可视化数据备份 mysql 数据可视化_MySQL可视化数据备份_18

修改index.html文件

引入jquery

<script src="/js/jquery-3.5.1.min.js"></script>

MySQL可视化数据备份 mysql 数据可视化_MySQL可视化数据备份_19

请求后台数据

在myChart.setOption(option);语句前面添加请求后台数据，并用数据库的值赋值给x、y轴的数据。

// 定义x、y轴数据数组
    var names=[];
    var nums=[];
    //请求后台数据
    $.ajax({
        type: "get",
        url: "/goods/list",
        contentType: "application/json",
        success: function(res){
            console.log("=====res: =======")
            console.log(res);
            for (var i = 0; i < res.length ; i++) {
                names.push(res[i].name);
                nums.push(res[i].num);
            }
            myChart.setOption({
                xAxis: {
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: nums
                }]
            });
        }
    });

index.html完整代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <script src="/js/jquery-3.5.1.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
        }]
    };
    // 定义x、y轴数据数组
    var names=[];
    var nums=[];
    //请求后台数据
    $.ajax({
        type: "get",
        url: "/goods/list",
        contentType: "application/json",
        success: function(res){
            console.log("=====res: =======")
            console.log(res);
            for (var i = 0; i < res.length ; i++) {
                names.push(res[i].name);
                nums.push(res[i].num);
            }
            myChart.setOption({
                xAxis: {
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: nums
                }]
            });
        }
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>