SpringBoot框架之SpringBoot+MySQL+Echarts使用案例入门

最新推荐文章于 2023-10-31 15:50:37 发布

一条小海龟

最新推荐文章于 2023-10-31 15:50:37 发布

阅读量2.6k

点赞数 5

分类专栏： SpringBoot框架案例文章标签： echarts mysql spring boot

本文链接：https://blog.csdn.net/guihua55/article/details/119994100

版权

SpringBoot框架案例专栏收录该内容

3 篇文章 1 订阅

订阅专栏

Tip：本期使用的是SpringBoot框架整合MySQL跟Echarts使用案例，通过本次案例你能学到SpringBoot里面的Echarts如何获取MySQL里面的数据制作简单图形。

SpringBoot整合MySQL跟Echarts，相关教程我已发布，务必先有这两个的基础再来学本期教程哈！！

链接在这里：

SpringBoot整合MySQL

SpringBoot整合Echarts

话不多说，直接进入正题

一、在自己的MySQL数据库里建立表名为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);

建成之后如下：

二、导入相关依赖

其实就是MySQL跟Echarts，还有一些组件，具体如下：

<!--集成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>5.1.38</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>

三、编写MySQL相关代码

我的代码结构：

编写MySQL的JavaBean类

package springboot.demo.MySql_Echarts.Bean;

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

/**
 * @Author 海龟
 * @Date 2021/8/29 22:27
 * @Desc goods的javaBean
 */

@Data
@AllArgsConstructor
@NoArgsConstructor
public class GoodsBean {

    private Long id;
    private String name;
    private Integer num;
}

编写Dao接口类

package springboot.demo.MySql_Echarts.Dao;

import springboot.demo.MySql_Echarts.Bean.GoodsBean;
import java.util.List;

/**
 * @Author 海龟
 * @Date 2021/8/29 22:30
 * @Desc Dao接口类
 */
public interface GoodsDao {
   List<GoodsBean> showJsonData();
}

编写Dao实现类

package springboot.demo.MySql_Echarts.Dao;

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 springboot.demo.MySql_Echarts.Bean.GoodsBean;

import java.util.List;

/**
 * @Author 海龟
 * @Date 2021/8/29 22:57
 * @Desc Dao实现类
 */

@Service("goodsDaoImpl")
public class GoodsDaoImpl implements GoodsDao {

    @Autowired
    private JdbcTemplate jdbcTemplate;

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

编写Controller类：

package springboot.demo.MySql_Echarts;

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 springboot.demo.MySql_Echarts.Bean.GoodsBean;
import springboot.demo.MySql_Echarts.Dao.GoodsDaoImpl;
import java.util.List;

/**
 * @Author 海龟
 * @Date 2021/8/29 23:12
 * @Desc MysqlEchartsController控制层
 */

@RestController
@RequestMapping(value = "goods",method = RequestMethod.GET)
public class MysqlEchartsController {
    @Autowired
    private GoodsDaoImpl goodsDaoImpl;

    @RequestMapping(value = "list",method = RequestMethod.GET)
    public List<GoodsBean> getJsonDate(){
        List<GoodsBean> goodsBeans = goodsDaoImpl.showJsonData();
        return goodsBeans;
    }

}

四、编写html文件

（注意一定要确保你已经能够安装我之前的SpringBoot整合Echarts基础，因为本期教程就是改url跟html文件内容，其余都没变，如果调试不成功，先去查看SpringBoot整合Echarts方面问题）

新建一个MysqlEcharts.html文件

MysqlEcharts.html文件内容

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>MysqlECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/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: '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>

首先在我们SpringBoot整合Echarts里的Controller类改下html文件名

EchartsTest:

package springboot.demo.Echarts;

import org.springframework.stereotype.Controller;
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;

/**
 * @Author 海龟
 * @Date 2021/8/20 22:10
 * @Desc Echarts入门案例
 */
@RestController
public class EchartsTest {

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

五、运行项目

运行项目，网页打开：http://localhost:8080/echarts

即可成功！！！

好啦，本次教程到此结束，感谢大家观看！！！

一条小海龟

关注

5
点赞
踩
37

收藏

觉得还不错? 一键收藏
打赏
0
评论
SpringBoot框架之SpringBoot+MySQL+Echarts使用案例入门

Tip：本期使用的是SpringBoot框架整合MySQL跟Echarts使用案例，通过本次案例你能学到SpringBoot里面的Echarts如何获取MySQL里面的数据制作简单图形。SpringBoot整合MySQL跟Echarts，相关教程我已发布，务必先有这两个的基础再来学本期教程哈！！链接在这里：SpringBoot整合MySQLSpringBoot整合Echarts话不多说，直接进入正题一、在自己的MySQL数据库里建立表名为Goods的表建表跟插入数据CR
复制链接

扫一扫