使用Echarts+springBoot +Mybatisplus连接数据库实现简单树状图和扇形图

本文介绍: 使用Echarts+springBo o t +My bat i s plus 连接数据库实现简单树状图和扇形图

1.效果 展示

2.实现 步骤

  &lt;dependencies&gt;
        &lt;dependency&gt;
            <groupId&gt;com.baomidou</groupId&gt;
            <artifactId&gt;mybatis-plus-boot-starter</artifactId&gt;
            <version&gt;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>