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饼状图与柱形图内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
相关推荐
-
SpringBoot使用thymeleaf实现前端表格
目录 1. User实体类 2. Controller 类 3. html文件 1. User实体类 注:这里使用了 Lombok 技术,通过 @Data 注释自动创建 get,set 方法:通过 @NoArgsConstructor 注释自动创建无参数的构造方法:通过 @AllArgsConstructor 注释自动创建有参数构造方法 如果不想使用,可以自行创建get,set 方法以及构造方法 import jdk.nashorn.internal.objects.annotations.Co
-
SpringBoot+Thymeleaf实现生成PDF文档
目录 前言 一.引入依赖 二.application.yml配置 三.PDF相关配置 四.Controller 五.生成PDF文件响应效果 前言 温馨提示:本博客使用Thymeleaf模板引擎实现PDF打印仅供参考: 在阅读该博客之前,先要了解一下Thymeleaf模板引擎,因为是使用Thymeleaf模板引擎实现的PDF打印的, Thymeleaf是一个现代的服务器端 Java 模板引擎,适用于 Web 和独立环境. Thymeleaf 的主要目标是为您的开发工作流程带来优雅的自然模板——HT
-
在SpringBoot中配置Thymeleaf的模板路径方式
目录 配置Thymeleaf的模板路径 关于thymeleaf配置说明 配置Thymeleaf的模板路径 众所周知,Thymeleaf的模板文件默认是在项目文件夹的src\main\resources\templates目录下的. 不过出于特殊需要,要修改其路径怎么办呢? 在我们的项目配置文件application.properties中,添加如下配置: #Thymeleaf配置 spring.thymeleaf.prefix=自定义的Thymeleaf的模板位置,jar内部以classpath
-
SpringBoot超详细讲解Thymeleaf模板引擎
Jsp是最早的模板技术,用来处理视图层的,用来做数据显示的模板 B S结构: B:浏览器:用来显示数据,发送请求,没有处理能力 发送一个请求,访问a.jsp,a.jsp在服务器端变成Servlet,在将输出的数据返回给浏览器,浏览器就可以看到结果数据,jsp最终翻译过来也是个html页面 模板技术你就可以把它们当成字符串的替换,比如说:这里{data}这里有一个字符串,你把它换成固定值其他值,但是这个替换有一些附加的功能,通过模板技术处理视图层的内容 第一个例子: pom.xml:Thymele
-
SpringBoot使用thymeleaf实现一个前端表格方法详解
目录 1. User 实体类 2. Controller 类 3. html 文件 1. User 实体类 注:这里使用了 Lombok 技术,通过 @Data 注释自动创建 get,set 方法:通过 @NoArgsConstructor 注释自动创建无参数的构造方法:通过 @AllArgsConstructor 注释自动创建有参数构造方法 如果不想使用,可以自行创建get,set 方法以及构造方法 import jdk.nashorn.internal.objects.annotations
-
SpringBoot+thymeleaf+ajax实现局部刷新详情
目录 前言 什么是局部刷新? 优势和弊端? 实现流程 案列 前言 什么是局部刷新? 简而言之,就是当我发送一个请求到后端后拿到数据后返回当前 页面不会对整个页面进行重载而只对当前请求的模块进行刷新. 优势和弊端? 优势: 用户体验好,不需要对页面进行重载 利于开发人员开发,提高开发效率 前后端完全分离 弊端: 不利于优化!第一次从服务器端获取的内容不包含需要动态绑定的数据,所以页面的源代码中没有这些内容,不利于收录,后期通过js添加到页面中的内容,并不会写在页面的源代码中~ 时间上的些许浪费,没
-
SpringBoot整合Thymeleaf与FreeMarker视图层技术
目录 整合Thymeleaf 1. 创建工程添加依赖 2. 配置Thymeleaf 3. 配置控制器 4. 创建视图 5. 运行 整合FreeMarker 1. 创建项目添加依赖 2. 配置FreeMarker 3. 控制器 4. 创建视图 5. 运行 整合Thymeleaf Thymeleaf是新一代Java模板引擎,类似于Velocity.FreeMarker等传统Java模板引擎.与传统Java模板引擎不同的是,Thymeleaf支持HTML原型,既可以让前端工程师在浏览器中直接打开查看样
-
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
-
如何利用pyecharts画好看的饼状图
前言 使用的pyecharts是v1.0 这里需要注意,pyecharts0.5的版本和v1.0以上的版本完全不一样,可以说是两个包 该包能够方便快捷的绘制图形 饼状图 圆环 代码: from pyecharts.charts import Pie from pyecharts import options as opts from pyecharts.render import make_snapshot from snapshot_phantomjs import snapshot def
-
QT利用QPainter绘制三维饼状图
目录 一.项目介绍 二.项目基本配置 三.UI界面设置 四.主程序实现 4.1 widget.h头文件 4.2 widget.cpp源文件 五.效果演示 一.项目介绍 本文介绍利用QPainter实现三维饼状图的绘制,由于Qt中没有三维饼状图的绘制组件,因此只能自行绘制. 二.项目基本配置 新建一个Qt案例,项目名称为“PieTest”,基类选择“QWidget”,取消选中创建UI界面复选框,完成项目创建. 三.UI界面设置 无UI界面 四.主程序实现 4.1 widget.h头文件 头文件中只
-
SpringBoot+Echarts实现请求后台数据显示饼状图
场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网 获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错误提示和警告. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 通过 npm 获取 ec
-
PHP jpgraph库的配置及生成统计图表:折线图、柱状图、饼状图
JpGraph简介 JpGraph是开源的PHP统计图表生成库,基于PHP的GD2图形库构建,把生成统计图的相关操作封装,隐藏了部分复杂的操作,使在PHP页面上输出统计图表变得更加容易.JpGraph的官方网站为:http://jpgraph.net,开发者可以在上面免费下载最新版的JpGraph和阅读相关帮助文档或示例程序. JpGraph的配置 (1)修改文件php.ini 在include_path中添加jpgraph的目录路径,并将jpgraph解压后的src目录名称更改为jpgraph
-
spring boot动态加载Echart饼状图
本文实例为大家分享了spring boot动态加载Echart饼状图的具体代码,供大家参考,具体内容如下 先从Echart官网上根据需要下载所需Echart版本,在页面中用script标签引入,这些在Echart官网上有教程.官网上有异步加载和更新Echart图,知道了是动态把查询到的结果按格式拼接到饼状图series里面的data中. 尝试一:在springboot的controller中把查询到的结果拼接好放在map里,跳转到页面, 然后在前台javascript中获取完成动态加载,发现饼状
-
利用Tkinter和matplotlib两种方式画饼状图的实例
当我们学习python的时候,总会用到一些常用的模块,接下来我就详细讲解下利用两种不同的方式画饼状图. 首先利用[Tkinter]中的canvas画布来画饼状图: from tkinter import Tk, Canvas def DrawPie(): #创建窗口 windows=Tk() #添加标题 windows.title("画饼图") # 设置画布样式 canvas=Canvas(windows,height=500,width=500) # 将画布打包到窗口 canvas.
-
jQuery.Highcharts.js绘制柱状图饼状图曲线图
在数据统计和分析业务中,有时会遇到客户需要在一个图表中将柱状图.饼状图.曲线图的都体现出来,即可以从柱状图中看出具体数据.又能从曲线图中看出变化趋势,还能从饼状图中看出各部分数据比重.Highcharts可以轻松实现三图合一的效果. 复制代码 代码如下: var chart; $(document).ready(function() { chart = new Highcharts.Chart({ c
-
D3.js实现饼状图的方法详解
前言 小编在之前已经跟大家分享过关于怎样用柱状图和折线图这两种基本图表.这两种图表都是有坐标轴的,现在来说一种没有坐标轴的图表--饼图. 饼状图实现 还是和之前一样,我们先把简单的画图框架搭起来,添加SVG画布.但是这里需要注意的是,为了方便后面画饼图上的弧形,我们把组合这些元素的g元素移动到画布的中心: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"
-
MPAndroidChart开源图表库的使用介绍之饼状图、折线图和柱状图
MPAndroidChart开源图表库之饼状图 为大家介绍一款图标开源库MPAndroidChart,它不仅可以在Android设备上绘制各种统计图表,而且可以对图表进行拖动和缩放操作,用起来非常灵活.MPAndroidChart同样拥有常用的图表类型:线型图.饼图.柱状图和散点图. mpandroidchartlibrary.jar包下载地址: https://github.com/PhilJay/MPAndroidChart/releases 下面主要实现以下饼状图: 1.从上面的地址中下载