使用Echarts+springBoot +Mybatisplus连接数据库实现简单树状图和扇形图_echarts连接数据库生成图表案例

作者：Li_阴宅 | 2024-07-15 08:33:23

踩

echarts连接数据库生成图表案例

1.效果展示

1.树状图

2.扇形图

2.实现步骤

1.数据库结构

2.pom.xml文件


  <dependencies>
        <dependency>
            <groupId>com.baomidou</groupId>
            <artifactId>mybatis-plus-boot-starter</artifactId>
            <version>3.5.2</version>
        </dependency>
 
 
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
 
        <dependency>
            <groupId>com.mysql</groupId>
            <artifactId>mysql-connector-j</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
       
    </dependencies>

3.项目结构

用不了这么多，这些主要是用Mybatisplus生成的

主要是这个我是和导入导出一起写的所以有这么多东西，类和方法都是放在一起了，博客我却分开发了谅解一下

4.实体类（主要用的是name属性和count属性）

5.controller层

一个是返回数据的，两个跳转页面的

6.service层

service接口

service实现类

7.mapper层

8.mapper.xml

9.html页面

扇形图：


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="main" style="width: 600px; height: 400px;"></div>
</body>
<script type="text/javascript">
    //初始化echarts
    function init(myChart){
        let option = {
            title:{
                text:'ECharts 数据统计'
            },
            series:[{
                name:'访问量',
                type:'pie',
                radius:'50%',
                data:[
                    {value:0,name:'无'},
                ]
            }]
        };
 
        myChart.setOption(option);
    }
    //从数据库读取数据赋值给echarts
    function show(myChart){
        $.ajax({
            contentType : "application/json",
            type : "GET",
            url : "/tubiao1",
            dataType : "json",
            success : function(data) {
                //创建一个数组，
                let Chart=[];
                for(let i=0;i<data.length;i++){
                    let obj={};
                    obj.name=data[i].name;
                    obj.value=data[i].count;
                    Chart[i]=obj;
                }
 
                myChart.setOption({
                    title:{
                        text:'商品库存'
                    },
                    tooltip:{},
                    series:[{
                        name:'数量',
                        type:'pie',
                        // radius:'10%',
                        data:Chart,
                    }]
 
                });
 
            }
        });
    }
 
    //初始化echarts实例
    let myChart = echarts.init(document.getElementById("main"));
    init(myChart);
    show(myChart);
 
</script>
</html>

树状图:


<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<div id="main" style="height: 40em"></div>
</body>
<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));
 
    $.ajax({
        contentType: "application/json",
        type: "GET",
        url: "/tubiao1",
        dataType: "json",
        success: function (data) {
 
            let x = [];
            let y = [];
 
            for (let i = 0; i < data.length; i++) {
                //x[i]获取json的姓名，y[i]获取json的值
                x[i] = data[i].name;
                y[i] = data[i].count;
 
 
            }
 
            myChart.setOption({
 
                tooltip: {},
                label: {
                    show: true,
                    position:'top',
                },
                legend: {},
                xAxis: {
                    data: x
                },
                yAxis: {},
                series: [
                    {
                        colorBy:'data',
                        name: '商品库存',
                        type: 'bar',
                        data: y
 
                    }
                ]
            });
 
        },
        error: function () {
 
        }
    })
 
</script>
 
</html>

都是通过ajax从后台拿数据

写html页面的时候别忘了这两个东西

是不是很简单

总结：制作不易，如果帮助到你请点赞收藏支持一下

如果还有纰漏请及时告知感谢观看

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/Li_阴宅/article/detail/828459

使用Echarts+springBoot +Mybatisplus连接数据库实现简单树状图和扇形图_echarts连接数据库生成图表案例

1.效果展示

2.实现步骤

总结：制作不易，如果帮助到你 请点赞收藏支持一下

总结：制作不易，如果帮助到你请点赞收藏支持一下