IDEA中使用mysql+springboot+echart实现可视化

最新推荐文章于 2024-08-02 12:54:13 发布
最新推荐文章于 2024-08-02 12:54:13 发布
阅读量4.9k 收藏 71
点赞数 9
文章标签： intellij-idea mysql java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48717252/article/details/122344151
版权

1.mysql中导入数据

1.创建tag_dat数据库；

2.创建jobs表：

use tags_dat;
CREATE TABLE `jobs` (
  `id` int(11) NOT NULL,
  `job` varchar(50) NOT NULL,
  `num` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

INSERT INTO `jobs` (`id`, `job`, `num`) VALUES
(1, '学生', 162),
(2, '公务员', 145),
(3, '军人', 202),
(4, '警察', 143),
(5, '教师', 130),
(6, '白领', 160);

3. 创建sexs表：

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

INSERT INTO `sexs` (`sex`, `num`) VALUES
( '男', 481),
( '女', 469);

4.创建payments表：

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

INSERT INTO `payments` (`payment`, `num`) VALUES
('支付宝', 93631),
('微信', 33),
('货到付款',14025);

5.创建politicals表：

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

INSERT INTO `politicals` (`political`, `num`) VALUES
('党员', 322),
('群众', 323),
('无党人士',305);

 2.创建springboot项目

 1.new project

因为那个Default的网址是下载springboot不了，于是换个网址https://start.springboot.io，即可成功创建项目！

 2.next，勾选Web中的Spring Web，与Template中的Thymeleaf

3.Finish

 3.导入相关依赖

 1.在pom.xml的<dependencies>.....</dependencies>模块内加入以下依赖

 <!--集成web-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--渲染html文件-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <!--集成mysql数据库-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.11</version>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-jdbc</artifactId>
        </dependency>
        <!--lombok注解简化代码-->
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
        </dependency>

 2.在application.properties中编写添加MySQL的端口，用户名密码跟url:

查看端口：netstat -ano

杀掉端口：taskkill /pid 10492 -f

 

解决端口占用：CMD查杀端口详细教程_黄文孝同学的博客-CSDN博客_杀端口

server.port=8080
spring.datasource.driverClassName=com.mysql.cj.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/tags_dat?serverTimezone=UTC
spring.datasource.username=root
spring.datasource.password=你的数据库密码

3.添加echart.min.js(这里没有网址，去网上搜一下下载即可)

 

 4.编写代码

 代码结构

1.编写Bean层

 jobsBean

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class jobsBean {
    private Long id;
    private String job;
    private Integer num;
}

 paymentsBean

package com.example.demo.Bean;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class paymentsBean {
    private String payment;
    private Integer num;
}

 politicalsBean

package com.example.demo.Bean;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class politicalsBean {
    private String political;
    private Integer num;
}

 sexsBean

package com.example.demo.Bean;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@AllArgsConstructor
@NoArgsConstructor
public class sexsBean {
    private String sex;
    private Integer num;
}

2.编写Dao层

jobsDao

import com.example.demo.Bean.jobsBean;
import java.util.List;


public interface jobsDao {
    List<jobsBean> showJsonData();
}

jobsDaoImpl

import com.example.demo.Bean.jobsBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import java.util.List;

@Service("jobsDaoImpl")
public class jobsDaoImpl implements jobsDao {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    @Override
    public List<jobsBean> showJsonData() {
        String sql = "select * from jobs";
        return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(jobsBean.class));
    }
}

 paymentsDao

package com.example.demo.Dao;

import com.example.demo.Bean.paymentsBean;
import java.util.List;

public interface paymentsDao {
    List<paymentsBean> showJsonData();
}

 paymentsDaoImpl

package com.example.demo.Dao;

import com.example.demo.Bean.paymentsBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import java.util.List;

@Service("paymentsDaoImpl")
public class paymentsDaoImpl implements paymentsDao {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    @Override
    public List<paymentsBean> showJsonData() {
        String sql = "select * from payments";
        return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(paymentsBean.class));
    }
}

 politicalsDao

package com.example.demo.Dao;


import com.example.demo.Bean.politicalsBean;
import java.util.List;

public interface politicalsDao {
    List<politicalsBean> showJsonData();
}

 politicalsDaoImpl

package com.example.demo.Dao;

import com.example.demo.Bean.politicalsBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import java.util.List;

@Service("politicalsDaoImpl")
public class politicalsDaoImpl implements politicalsDao {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    @Override
    public List<politicalsBean> showJsonData() {
        String sql = "select * from politicals";
        return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(politicalsBean.class));
    }
}

 sexsDao

package com.example.demo.Dao;

import com.example.demo.Bean.sexsBean;
import java.util.List;

public interface sexsDao {
    List<sexsBean> showJsonData();
}

 sexsDaoImpl

package com.example.demo.Dao;

import com.example.demo.Bean.sexsBean;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Service;
import java.util.List;

@Service("sexsDaoImpl")
public class sexsDaoImpl implements sexsDao {

    @Autowired
    private JdbcTemplate jdbcTemplate;

    @Override
    public List<sexsBean> showJsonData() {
        String sql = "select * from sexs";
        return jdbcTemplate.query(sql, new BeanPropertyRowMapper<>(sexsBean.class));
    }
}

3.编写MysqlEchartsController

package com.example.demo;

import com.example.demo.Bean.jobsBean;
import com.example.demo.Bean.paymentsBean;
import com.example.demo.Bean.politicalsBean;
import com.example.demo.Bean.sexsBean;
import com.example.demo.Dao.jobsDaoImpl;
import com.example.demo.Dao.paymentsDaoImpl;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;

@RestController
public class MysqlEchartsController {
    @Autowired
    private jobsDaoImpl jobsDaoImpl;
    @RequestMapping(value = "jobs/list",method = RequestMethod.GET)
    public List<jobsBean> getJsonDate(){
        List<jobsBean> jobsBeans = jobsDaoImpl.showJsonData();
        return jobsBeans;
    }


    @Autowired
    private paymentsDaoImpl paymentsDaoImpl;
    @RequestMapping(value = "payments/list",method = RequestMethod.GET)
    public List<paymentsBean> getJsonDate1(){
        List<paymentsBean> paymentsBeans = paymentsDaoImpl.showJsonData();
        return paymentsBeans;
    }

    @Autowired
    private com.example.demo.Dao.politicalsDaoImpl politicalsDaoImpl;
    @RequestMapping(value = "politicals/list",method = RequestMethod.GET)
    public List<politicalsBean> getJsonDate2(){
        List<politicalsBean> politicalsBeans = politicalsDaoImpl.showJsonData();
        return politicalsBeans;
    }

    @Autowired
    private com.example.demo.Dao.sexsDaoImpl sexsDaoImpl;
    @RequestMapping(value = "sexs/list",method = RequestMethod.GET)
    public List<sexsBean> getJsonDate3(){
        List<sexsBean> sexsBeans = sexsDaoImpl.showJsonData();
        return sexsBeans;
    }


}

4.编写Application（自带，不用编写）

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class Application {

    public static void main(String[] args) {
        SpringApplication.run(Application.class, args);
    }

}

5.在SpringBoot整合Echarts里的Controller类改下html文件名

编写EchartsTest

package com.example.demo.Ecahrts;


import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.servlet.ModelAndView;

@RestController
public class EchartsTest {

    @RequestMapping(value = "/",method = RequestMethod.GET)
    public ModelAndView FirtstEchartsTest(){
        //test为在为你的html文件名字,SpringBoot会自动找到这个html文件
        return new ModelAndView("MysqlEcharts");
    }

    @RequestMapping(value = "/jobs",method = RequestMethod.GET)
    public ModelAndView jobsEchartsTest(){
        //test为在为你的html文件名字,SpringBoot会自动找到这个html文件
        return new ModelAndView("jobsEcharts");
    }

    @RequestMapping(value = "/politicals",method = RequestMethod.GET)
    public ModelAndView politicalsEchartsTest(){
        //test为在为你的html文件名字,SpringBoot会自动找到这个html文件
        return new ModelAndView("politicalsEcharts");
    }

    @RequestMapping(value = "sexs",method = RequestMethod.GET)
    public ModelAndView sexsEchartsTest(){
        //test为在为你的html文件名字,SpringBoot会自动找到这个html文件
        return new ModelAndView("sexsEcharts");
    }

    @RequestMapping(value = "/payments",method = RequestMethod.GET)
    public ModelAndView paymentsEchartsTest(){
        //test为在为你的html文件名字,SpringBoot会自动找到这个html文件
        return new ModelAndView("paymentsEcharts");
    }


}

 5.前端网页，可视化

在templates中创建MysqlECharts.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>用户基本信息</title>
    <script src="echarts.min.js"></script>
</head>
<body>
<div id="container" style="width:1500px;height:100px">

    <div id="header" style="background-color:#FFA500;">
        <h1 style="margin-bottom:0;text-align:center;">用户基本信息</h1>
    </div>

    <div id="menu" style="background-color:lightgoldenrodyellow;height:650px;width:1500px;float:left;">
        <div style=" text-align:center;">菜单</div>
        <div style=" text-align:center;"><a href="http://localhost:8080/sexs">性别</a>
        <div style=" text-align:center;"><a href="http://localhost:8080/jobs">职业</a>
        <div style=" text-align:center;"><a href="http://localhost:8080/payments">支付方式</a>
        <div style=" text-align:center;"><a href="http://localhost:8080/politicals">政治面貌</a>
    </div>


<script>

</script>
</body>
</html>

 创建jobEcharts.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户职业</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.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: '用户职业'
        },
        tooltip: {},
        legend: {
            data:['职业']
        },
        xAxis: {
            data: ["学生","公务员","军人","警察","教师","白领"]
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: [5, 20, 30, 10, 10, 20]
        }]
    };
    // 定义x、y轴数据数组
    var jobs=[];
    var nums=[];
    //请求后台数据
    $.ajax({
        type: "get",
        url: "/jobs/list",
        contentType: "application/json",
        success: function(res){
            console.log("=====res: =======")
            console.log(res);
            for (var i = 0; i < res.length ; i++) {
                jobs.push(res[i].job);
                nums.push(res[i].num);
            }
            myChart.setOption({
                xAxis: {
                    data: jobs
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '人数',
                    data: nums
                }]
            });
        }
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<button><a href="http://localhost:8080">菜单</a></button>
<button><a href="http://localhost:8080/sexs">性别</a></button>
<button><a href="http://localhost:8080/jobs">职业</a></button>
<button><a href="http://localhost:8080/politicals">群众面貌</a></button>
<button><a href="http://localhost:8080/payments">支付方式</a></button>

</body>
</html>

创建paymentsEcharts.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户支付方式</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.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: '支付方式'
        },
        tooltip: {},
        legend: {
            data:['支付方式']
        },
        xAxis: {
            data: ["支付宝","微信","货到付款"]
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: [10, 20, 30]
        }]
    };
    // 定义x、y轴数据数组
    var paymemts=[];
    var nums=[];
    //请求后台数据
    $.ajax({
        type: "get",
        url: "/payments/list",
        contentType: "application/json",
        success: function(res){
            console.log("=====res: =======")
            console.log(res);
            for (var i = 0; i < res.length ; i++) {
                paymemts.push(res[i].paymemt);
                nums.push(res[i].num);
            }
            myChart.setOption({
                xAxis: {
                    data: paymemts
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '人数',
                    data: nums
                }]
            });
        }
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<button><a href="http://localhost:8080">菜单</a></button>
<button><a href="http://localhost:8080/sexs">性别</a></button>
<button><a href="http://localhost:8080/jobs">职业</a></button>
<button><a href="http://localhost:8080/politicals">群众面貌</a></button>
<button><a href="http://localhost:8080/payments">支付方式</a></button>
</body>
</html>

创建politicalsEcharts.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户政治面貌</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.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: '政治面貌'
        },
        tooltip: {},
        legend: {
            data:['政治面貌']
        },
        xAxis: {
            data: ["党员","群众","无党人士"]
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: [10, 20, 30]
        }]
    };
    // 定义x、y轴数据数组
    var politicals=[];
    var nums=[];
    //请求后台数据
    $.ajax({
        type: "get",
        url: "/politicals/list",
        contentType: "application/json",
        success: function(res){
            console.log("=====res: =======")
            console.log(res);
            for (var i = 0; i < res.length ; i++) {
                politicals.push(res[i].political);
                nums.push(res[i].num);
            }
            myChart.setOption({
                xAxis: {
                    data: politicals
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '人数',
                    data: nums
                }]
            });
        }
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<button><a href="http://localhost:8080">菜单</a></button>
<button><a href="http://localhost:8080/sexs">性别</a></button>
<button><a href="http://localhost:8080/jobs">职业</a></button>
<button><a href="http://localhost:8080/politicals">群众面貌</a></button>
<button><a href="http://localhost:8080/payments">支付方式</a></button>
</body>
</html>

创建sexsEcharts.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户性别</title>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.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: '性别'
        },
        tooltip: {},
        legend: {
            data:['性别']
        },
        xAxis: {
            data: ["男","女"]
        },
        yAxis: {},
        series: [{
            name: '人数',
            type: 'bar',
            data: [10, 10]
        }]
    };
    // 定义x、y轴数据数组
    var sexs=[];
    var nums=[];
    //请求后台数据
    $.ajax({
        type: "get",
        url: "/sexs/list",
        contentType: "application/json",
        success: function(res){
            console.log("=====res: =======")
            console.log(res);
            for (var i = 0; i < res.length ; i++) {
                sexs.push(res[i].sex);
                nums.push(res[i].num);
            }
            myChart.setOption({
                xAxis: {
                    data: sexs
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '人数',
                    data: nums
                }]
            });
        }
    });

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
<button><a href="http://localhost:8080">菜单</a></button>
<button><a href="http://localhost:8080/sexs">性别</a></button>
<button><a href="http://localhost:8080/jobs">职业</a></button>
<button><a href="http://localhost:8080/politicals">群众面貌</a></button>
<button><a href="http://localhost:8080/payments">支付方式</a></button>
</body>
</html>

6.运行

 在Application中运行，出现以下图便是成功

 打开，http://localhost:8080/

首页

 性别

职业

群众面貌

支付方式

 

 完成！！！！！

参考博客：​​​​​​SpringBoot框架之SpringBoot+MySQL+Echarts使用案例入门_guihua55的博客-CSDN博客_echarts mysql springboot

CMD查杀端口详细教程_黄文孝同学的博客-CSDN博客_杀端口 

Archer Master
关注
  • 9
    点赞
  • 踩
  • 71
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
IDEA+maven+SpringBoot+JPA+Thymeleaf实现Crud及分页
08-27
本文主要介绍了如何使用IDEA+maven+SpringBoot+JPA+Thymeleaf实现CRUD及分页的操作。下面是详细的实现步骤： 开发环境 在开始之前，我们需要准备好以下开发环境： * 操作系统：Windows 7 企业版 * IDEA 版本：143...
【源码】数据可视化：基于 Echarts + Java SpringBoot 动态实时大屏范例 - 监管系统
jjc4261的博客
06-29 3732
数据可视化大屏的出现，掀起一番又一番的浪潮，众多企业主纷纷想要打造属于自己的“酷炫吊炸天”的霸道总裁大屏驾驶舱。之前有小伙伴们建议我出一些视频课程来学习Echarts，这样可以更快上手，所以我就追星赶月的录制了 ，希望对有需要的小伙伴有帮助。YYDatav的数据可视化大屏《精彩案例汇总》（Java SpringBoot&Echarts源码）_YYDataV的博客-CSDN博客32【源码】数据可视化：基于Echarts+JavaSpringBoot动态实时大屏-银行监管系统.zip-企业管理文档类资源-CSD
2024年前端最新前端ECharts可视化框架快速上手详解(二)，2024年最新Web前端进阶面试资料无偿分享
2401_84447112的博客
05-13 607
全网独播-价值千万金融项目前端架构实战从两道网易面试题-分析JavaScript底层机制RESTful架构在Nodejs下的最佳实践开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】一线互联网企业如何初始化项目-做一个自己的vue-cli思维无价，看我用Nodejs实现MVC代码优雅的秘诀-用观察者模式深度解耦模块前端高级实战，如何封装属于自己的JS库VUE组件库级组件封装-高复用弹窗组件// 4.使用刚指定的配置项和数据显示图表。
SpringBoot + MySQL + Echarts数据可视化
热门推荐
大头皮鞋的博客
08-26 2万+
本博文主要讲解如何从数据库里获取数据进行可视化。具体方式为：数据存在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; 新建stu表及
Springboot+mysql+maven+echarts实现数据可视化
black0311的专栏
10-31 551
/这里ContentType的值一般来说有两种取值, 默认是application/x-www-form-urlencoded;// contentType: 'application/json',//contentType: 前端的参数格式。dataType:"json",//dataType:接口返回的数据的格式,一般来说,经常不写,让系统自己去判定。type:"post",//type:标明是get还是post请求。url:"/getdata",//url:请求后台的url。//数组（Y坐标值）
SpringBoot + thymeleaf + Echarts + Mysql 实现数据可视化读取
CJW的博客
04-17 3679
SpringBoot + thymeleaf + Echarts + Mysql 实现数据可视化读取 通过从数据库获取数据转为JSON数据，返回前端界面实现数据可视化。 效果 实现过程 1. pom.xml pom.xml引入(仅为本文示例需要，其他依赖自行导入) <!--Thymeleaf整合security--> <dependency> <groupId>org.thymeleaf.extras</groupId> <ar
springboot+echarts +mysql制作数据可视化大屏（四图）
qq_55906442的博客
07-02 6068
作者水平低，如有错误，恳请指正！谢谢！！！！！项目简单，适合大学生参考分类专栏还有其它的可视化博客哦！专栏地址：https://blog.csdn.net/qq_55906442/category_11906804.html?spm=1001.2014.3001.5482目录 一、数据源二、所需工具三、项目框架搭建四、代码编写4.1 区域销量统计条形图4.2 订单金额折线图4.3 平均支付时间统计4.4 订单金额统计五、大屏编写成果展示： 1）可以使用自己的MySQL数据库；2）使用我提供的数据。（要
springboot+mybatis+echarts +mysql制作数据可视化大屏
qq_55906442的博客
07-08 1万+
成果展示：1）可以使用自己的MySQL数据库；2）使用我提供的数据。（免费下载）gmall_report用于可视化的SQL文件-MySQL文档类资源-CSDN下载MySQLIDEAjdk1.8Maven创建springboot项目有二种方式：1）在IDEA中创建2）在官网上创建我喜欢在官网创建官网地址（记得收藏）：https://start.spring.io/​ 注：1）注意红色框框的地方，选择你想要的版本和与你的计算机相应的配置；2）在1.处点击添加相关依赖；3）在2.处点击生成初始代码并下载。下面给出
springboot+vue+Element-Vue+echart实现DATA可视化系统
Timi2019的博客
04-21 577
系统实现了数据可视化、用户管理、权限管理、菜单管理。
Springboot连接MySQL数据库使用echarts进行可视化
weixin_48231783的博客
06-06 2592
使用springboot框架来进行mysql数据库的连接并且使用echarts工具来进行可视化得到最后的图形。
Echarts数据可视化 Vue+SpringBoot+数据库 （一）
m0_63025433的博客
07-31 1256
图表的主要作用： - 数据展示，将一直的数据或数据分析结果通过可视化图表的方式进行展示，借助于图形化手段，清晰有效地传达与沟通信息。 - 数据分析，基于图表地 “二次分析” ，对数据地深层次挖掘。通过对图表中地特点分析，对数据进一步的洞察分析。 技术栈 - 图表绘制：Echarts - 前端：Vue - 后端：Springboot + MyBatisPlus - 编程工具：WebStorm + IDEA
基于IDEA+MySQL8.0+SpringBoot+Generator逆向工程的云医疗管理系统源码+项目说明+数据库.zip
03-05
基于IDEA+MySQL8.0+SpringBoot+Generator逆向工程+前后端分离的云医疗管理系统源码+项目说明+数据库(为患者提供网上挂号、在线问诊、诊断报告查询、线上复诊,网络预约手术、住院出院手续办理、费用缴纳).zip ...
idea+springboot+mybatis+jsp+bootstrap实现从mysql查询出数据并显示(源码)
01-25
标题 "idea+springboot+mybatis+jsp+bootstrap实现从mysql查询出数据并显示(源码)" 描述了一个使用特定技术栈开发的Web应用程序。这个项目整合了IntelliJ IDEA作为开发环境，Spring Boot作为核心框架，MyBatis作为...
基于Android +SpringBoot +MySQL实现的即时通讯APP【100013064】
07-25
（1）需要用 idea 搭建一个基于 SpringBoot 的服务端程序，给客服端提供可调用数据的接口以及 WebSocket 服务 （2）需要用 Android Studio 来做客户端界面以及调用服务端的接口及 WebSocket 服务
Java项目:在线考试平台(java+Springboot+ssm+mysql+maven)
12-02
环境配置： Jdk1.8 + Tomcat8.5 + mysql + Eclispe (IntelliJ IDEA,Eclispe,MyEclispe,Sts 都支持) 项目技术： JSP +SpringBoot + MyBatis + Redis+ Thymeleaf+ Druid+ JQuery + SLF4J+ Fileupload + maven等等
IDEA常用设置
Desamond的博客
07-30 448
整理了一些自己使用idea的常用设置，如jdk版本配置、maven仓库配置、调整字体大小样式、自动导包、类注释模板等，还在继续整理..
MySQL：CTE 通用表达式
最新发布
Zachyy的博客
08-02 465
CTE（Common Table Expression，通用表达式）是在 SQL 查询中定义临时结果集的一种方法，它可以让查询更加简洁、可读性更高，并且可以重复引用。
MySQL 索引
weixin_46531416的博客
08-02 529
MySQL 索引
使用idea创建mbatis+springboot+oracle
08-17
要使用IDEA创建MyBatis Spring Boot Oracle项目，首先需要确保已安装好Java开发环境和Oracle数据库，并且已经配置好相关环境变量。 1. 打开IDEA，选择创建新项目，选择Spring Initializr，并填写相关信息，如项目名称、项目地址等。 2. 选择需要的依赖，包括Spring Boot、MyBatis、Oracle JDBC驱动等。点击Next。 3. 设置项目的GroupId和ArtifactId，并选择项目保存路径。点击Next。 4. 在项目创建完成后，打开pom.xml文件，添加MyBatis和Oracle JDBC驱动的依赖。 5. 创建数据源配置文件，如application.properties或application.yml，并进行相关配置，包括数据库连接url、用户名、密码等。 6. 创建Java实体类，用于映射数据库表结构。可以使用注解方式或xml配置方式进行映射。 7. 创建Mapper接口，定义数据库操作方法，使用@Mapper或@MapperScan注解进行扫描，将Mapper接口与XML文件进行绑定。 8. 创建Mapper XML文件，在其中编写SQL语句，与Mapper接口方法进行绑定。 9. 创建Service层，实现业务逻辑，并将Mapper注入其中进行数据库操作。 10. 创建Controller层，定义API接口，并调用Service层提供的方法，返回结果给前端展示。 以上是使用IDEA创建MyBatis Spring Boot Oracle项目的主要步骤。在具体实现过程中，还需要根据自身的业务需求进行相应的配置和编码。在开发过程中，可以使用IDEA提供的代码自动提示和调试功能，提高开发效率和代码质量。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值