Spring boot 项目（十六）——mybatis-plus + mysql 实现echarts可视化

最新推荐文章于 2023-10-16 08:31:24 发布

--流星。

最新推荐文章于 2023-10-16 08:31:24 发布

阅读量791

点赞数 2

分类专栏： Spring实战文章标签： spring boot mysql echarts可视化 mybatis-plus

本文链接：https://blog.csdn.net/weixin_45974176/article/details/122511747

版权

Spring实战专栏收录该内容

52 篇文章 11 订阅

订阅专栏

引言

对于一些项目需求来说，需要将数据库中的数据进行可视化，以方便我们去分析。本博客对此情况进行实现。

前期准备

01、需要一个已经搭建好的mybatis-plus项目（包含数据库相关配置）
参考链接：Spring boot项目（一）——从零开始构建mybatis-plus
02、准备echarts所需的js文件
链接：Echarts
在这里插入图片描述
找到下面文件

注：个人建议自己创建js文件，然后将文件内容复制到创建的js里，因为只用这一个文件，其他的下了也用不到

点击文件，复制内容
在这里插入图片描述

编写代码

项目结构如下：
在这里插入图片描述
01、pom文件

		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>

02、controller层

@RestController
@RequestMapping("echarts")
public class EchartsController  {

    @Resource
    private EchartsService echartsService;

    @RequestMapping("list")
    public List<Echarts> list(){
        return echartsService.list();
    }
}

03、service层

在这里插入图片描述

04、dao层（mapper层）

05、html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <!-- 引入 echarts.js -->
    <script src="/js/echarts.min.js"></script>
    <!-- 引入 jQuery.js -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 800px;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: "/echarts/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);
            }
            console.log(names);
            myChart.setOption({
                xAxis: {
                    data: names
                },
                series: [{
                    // 根据名字对应到相应的系列
                    name: '销量',
                    data: nums
                }]
            });
        }
    });
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>
</html>

06、yml文件
在原有的基础上，在spring下添加下列代码（注意格式）

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

测试结果

网页输入：localhost:8080/index.html
初始结果（html中的测试数据）
在这里插入图片描述
最终结果（数据库中的数据）

总结

本博客为博主的项目个人测试后的梳理总结，希望对你能有帮助。

--流星。

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
Spring boot 项目（十六）——mybatis-plus + mysql 实现echarts可视化

引言对于一些项目需求来说，需要将数据库中的数据进行可视化，以方便我们去分析。本博客对此情况进行实现。前期准备01、需要一个已经搭建好的mybatis-plus项目（包含数据库相关配置）参考链接：Spring boot项目（一）——从零开始构建mybatis-plus02、准备echarts所需的js文件链接：Echarts找到下面文件注：个人建议自己创建js文件，然后将文件内容复制到创建的js里，因为只用这一个文件，其他的下了也用不到点击文件，复制内容编写代码项目结构如下
复制链接

扫一扫