SpringBoot thymeleaf实现饼状图与柱形图流程介绍

更新时间：2022年12月02日 14:30:57 作者：披着星光的鲸鱼

这篇文章主要介绍了SpringBoot thymeleaf实现饼状图与柱形图流程，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习吧

今天给大家带来的是一个用SpringBoot + thymeleaf显示出饼状图和柱形图

首先我们先创建项目注意：创建SpringBoot项目时一定要联网不然会报错

项目创建好后我们首先对 application.yml 进行编译

#指定端口号
server:
port: 8888
#配置mysql数据源
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/nba?serverTimezone=Asia/Shanghai
username: root
password: root
#配置模板引擎 thymeleaf
thymeleaf:
mode: HTML5
cache: false
suffix: .html
prefix: classpath:/templates/
mybatis:
mapper-locations: classpath:/mapper/*.xml
type-aliases-package: com.bdqn.springboot #放包名

接下来我们写后端代码

mapper层

package com.bdqn.springbootexcel.mapper;
import com.bdqn.springbootexcel.pojo.User;
import org.apache.ibatis.annotations.Insert;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface UserMapper {
    @Select("select * from user")
    List<User> find();
    @Insert("insert into user ( name, age, sex) values ( #{name}, #{age}, #{sex})")
    int add(User user);
}

实体类

package com.bdqn.springbootexcel.pojo;
import com.alibaba.excel.annotation.ExcelProperty;
import lombok.Data;
@Data
public class User {
    @ExcelProperty(index = 0,value = "用户编号")
    private Integer id;
    @ExcelProperty(index = 1,value = "用户姓名")
    private String name;
    @ExcelProperty(index = 2,value = "用户年龄")
    private String age;
    @ExcelProperty(index = 3,value = "用户性别")
    private String sex;
}

现在编写最重要的前端代码

index.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--饼状图-->
    <div id="pie" style="width:800px;height:600px;"></div>
    <script th:src="@{https://cdn.bootcdn.net/ajax/libs/echarts/5.4.0/echarts.min.js}"></script>
    <script>
        option = {
            title: {
                text:'饼图示例',
                subtext:'纯属虚构',
                left:'center'
            },
            legend: {
                top: 'bottom'
            },
            tooltip:{
                trigger:'item'
            },
            toolbox: {
                show: true,
                feature: {
                    mark: { show: true },
                    dataView: { show: true, readOnly: false },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            series: [
                {
                    name: 'Nightingale Chart',
                    type: 'pie',
                    radius: [50, 250],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    itemStyle: {
                        borderRadius: 8
                    },
                    data: [
                    ]
                }
            ]
        };
        var chartDom = document.getElementById('pie');
        var myChart = echarts.init(chartDom);
        fetch("/pojos_bing").then(response => response.json()).then(res => {
            res.forEach(item => {
                //name 和 age 都是数据库中的值
                option.series[0].data.push({name: item.name,value: item.age})
            })
            myChart.setOption(option);
        })
    </script>
    <!--柱状图-->
    <div style="height: 50px;"></div>
    <div id="bar" style="width: 1000px;height: 800px;"></div>
    <script>
        barOption = {
            title: {
                text: '柱状图'
            },
            legend: {
                top: 'top'
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: []
            },
            yAxis: {
                type: 'value'
            },
            series: [
                {
                    name: '11',
                    data: [],
                    type: 'bar'
                },
                {
                    name: '22',
                    data: [],
                    type: 'bar'
                }
            ]
        };
        var barDom = document.getElementById('bar');
        var barChart = echarts.init(barDom);
        fetch("/pojos_bing").then(response => response.json()).then(res => {
            //name 和 age 都是数据库中的值
            const name= res.map(v => v.name);
            barOption.xAxis.data = name
            const age= res.map(v => v.age);
            barOption.series[0].data = age
            barChart.setOption(barOption)
        })
    </script>
</body>
</html>

现在我们看看前端展示效果

到此这篇关于SpringBoot thymeleaf实现饼状图与柱形图流程介绍的文章就介绍到这了,更多相关SpringBoot饼状图与柱形图内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Spring实现声明式事务的方法详解
这篇文章主要介绍了Spring实现声明式事务的方法详解,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2021-01-01
Java输入输出语句举例详解(通俗易懂!)
这篇文章主要给大家介绍了关于Java输入输出语句的相关资料,作为一种常用的编程语言,Java提供了多种输入输出的方式,用于与用户进行数据交互或处理文件数据,需要的朋友可以参考下
2023-10-10
使用feign发送http请求解析报错的问题
这篇文章主要介绍了使用feign发送http请求解析报错的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-03-03
Spring Boot深入学习数据访问之Spring Data JPA与Hibernate的应用
Spring Data JPA是Spring Data的子项目，在使用Spring Data JPA之前，先了解一下Hibernate，因为Spring Data JPA是由Hibernate默认实现的
2022-10-10
springbean的八种加载方式汇总
这篇文章主要介绍了springbean的八种加载方式,一种是XML方式声明bean，使用@Component及其衍生注解@Controller 、@Service、@Repository定义bean，还有其他方法，本文给大家介绍的非常详细，需要的朋友可以参考下
2022-10-10
关于SpringMVC对Restful风格的支持详解
Restful就是一个资源定位及资源操作的风格,不是标准也不是协议,只是一种风格,是对http协议的诠释,下面这篇文章主要给大家介绍了关于SpringMVC对Restful风格支持的相关资料,需要的朋友可以参考下
2022-01-01
Shell重启SpringBoot项目脚本的示例代码(含服务守护)
本文介绍了如何使用 Bash 脚本来管理和守护运行服务,将展示一个示例脚本,该脚本可以停止、启动和守护运行一个服务,并提供了相应的解释和用法说明,文章通过代码示例介绍的非常详细,需要的朋友可以参考下
2023-11-11
SpringCloud基于Feign的可编程式接口调用实现
本文主要介绍了SpringCloud基于Feign的可编程式接口调用实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
java LinkedList类详解及实例代码
这篇文章主要介绍了java LinkedList类详解及实例代码的相关资料,需要的朋友可以参考下
2017-01-01
java 生成文字图片的示例代码
本篇文章主要介绍了java 生成文字图片的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08

SpringBoot thymeleaf实现饼状图与柱形图流程介绍

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具