SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)

2024-10-19 07:47:01

0x01 新建SpringBoot项目

1. 新建maven工程

a. Spring Initializr -> Default（Project SDK要自行装好并配置好）

b. Group、Artifact等可随意修改，注意修改此处Java Version为自己相应的版本（可能会默认是11），其他的使用默认即可：

c. 勾选Web（可能你的版本已经变为Spring Web）、Thymeleaf，项目会自动加上依赖：

d. 项目名称与项目位置，可自行修改：

e. 此处可能会显示此窗口，其实就是提示是否要新打开一个窗口显示而已，此处选哪个没关系：

点击后，IDEA右下角有滑条在跳动，其实是在下载相关依赖，稍等一会后就不再闪动了。

2. 编写HelloWorld程序代码

a. 新建一个HelloController类：

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

/**
 * @Auther: 邵奈一
 * @Date: 2019/01/30 下午 4:36
 * @Description: HelloController控制器
 */
@Controller
public class HelloController {

    @RequestMapping("/")
    public String sayHello(){
        return "index";
    }

}

b. 在templates目录下新建一个index.html界面并添加代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
Hello World!
</body>
</html>

c. 点击绿色小箭头，然后打开浏览器，输入（localhost:8080），可看到：

0x02 引入ECharts资源

1. 获取JQuery与ECharts资源

a. 下载ECharts和JQuery的js文件，并在static目录新建js文件夹，然后复制echarts.min.js与jquery-3.1.1.js到此文件夹：

ECharts地址：http://echarts.baidu.com/download.html
JQuery地址：https://jquery.com/download/

说明：现在的链接网页界面已经发生改变，大家可以不下载，直接引入CDN即可。

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>

2. 新建ECharts模版html文件

a. 新建demo.html文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="js/echarts.min.js"></script>
    <!-- 如果你没有echarts.min.js文件，用下面的语句代替即可
	<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
	 -->
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;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]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>

3. 添加后台java代码

a. 在HelloController中添加myDemo方法：

@RequestMapping("/demo")
public String myDemo(){

	return "demo";
}

4. ECharts模版样式预览

a. 重启项目，打开浏览器（localhost:8080/demo），可看到：

0x03 SpringBoot整合Thymeleaf

1. 新建myECharts方法

a. 在HelloController中添加myECharts方法：

@RequestMapping("/echarts")
public String myECharts(Model model){

	String skirt = "裙子";
	int nums = 30;

	model.addAttribute("skirt", skirt);
	model.addAttribute("nums", nums);

	return "echarts";
}

2. 引入Thymeleaf

a. 复制一份demo.html，修改成echarts.html,在<html>添加Themeleaf相关信息（最后一步有总览图）：
xmlns:th=www.thymeleaf.org

b. 引入jquery文件：

<script src="js/jquery-3.1.1.js"></script>

注意：如果没有jquery-3.1.1.js文件，则使用下面的语句代替：

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>

c. 在<div>下面添加代码：

<input type="hidden" th:value="${skirt}" id="skirt"/>
<input type="hidden" th:value="${nums}" id="nums"/>

d. 在<script type="text/javascript">里面添加代码：

var skirt=$("#skirt").val();
var nums=$("#nums").val();

e. 修改data的代码为变量skirt、nums：

xAxis: {
	data: [skirt,"羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},

series: [{
	name: '销量',
	type: 'bar',
	data: [nums, 20, 36, 10, 10, 20]
}]

f. echarts.html完整代码：

<!DOCTYPE html>
<html lang="en" xmlns:th=www.thymeleaf.org>
<head>
    <meta charset="UTF-8">
    <title>ECharts</title>
    <script src="js/echarts.min.js"></script>
    <script src="js/jquery-3.1.1.js"></script>
    <!-- 如果你没有相应的js文件，用下面的语句代替即可：
		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
		<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
	 -->
</head>
<body>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 600px;height:400px;"></div>

<input type="hidden" th:value="${skirt}" id="skirt"/>
<input type="hidden" th:value="${nums}" id="nums"/>

<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var skirt=$("#skirt").val();
    var nums=$("#nums").val();

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
            data:['销量']
        },
        xAxis: {
            data: [skirt,"羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [nums, 20, 36, 10, 10, 20]
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>
</body>

3. ECharts新样式预览

a. 重启项目，打开浏览器（localhost:8080/echarts），可看到：

4. 模式升级

a. 将echarts.html的两行代码注释掉

<input type="hidden" th:value="${skirt}" id="skirt"/>
<input type="hidden" th:value="${nums}" id="nums"/>

b. 将这两行代码：

var skirt=$("#skirt").val();
var nums=$("#nums").val();

换成：

var skirt="[[${skirt}]]";
var nums="[[${nums}]]";

其实效果是一样的！请自己思考一下，为什么效果是一样的？！

0xFF 总结

本教程从HelloWorld开始，一步一步进阶为显示ECharts静态界面，再到接收后台传送过来的数据，整合了前后台Thymeleaf与SpringBoot，为开发非常重要的一步；需要特别注意路径问题。

需要自己学习一下HTML、CSS、JS的相关知识。

进阶教程请查看文章：SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化（进阶篇），通过实战例子，技能包含JSON、Ajax、跨域问题解决等等。

到此这篇关于SpringBoot+Thymeleaf+ECharts实现大数据可视化（基础篇）的文章就介绍到这了,更多相关SpringBoot+Thymeleaf+ECharts可视化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

SpringBoot+thymeleaf+Echarts+Mysql 实现数据可视化读取的示例

目录实现过程 1. pom.xml 2. 后端程序示例 3. 前端程序示例通过从数据库获取数据转为JSON数据,返回前端界面实现数据可视化. 数据可视化测试实现过程 1. pom.xml pom.xml引入(仅为本文示例需要,其他依赖自行导入)  <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymele
SpringBoot+Echarts实现请求后台数据显示饼状图

场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错误提示和警告. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 通过 npm 获取 ec
SpringBoot+ECharts是如何实现数据可视化的

一.提出任务查询班级表数据,利用ECharts绘制各班人数柱形图. (一)班级数据 (二)运行效果二.实现步骤 (一)创建数据库与表 1.创建数据库 - test create database test; 2.创建数据表 - t_class 创建表结构 CREATE TABLE `t_class` ( `id` int(11) NOT NULL AUTO_INCREMENT, `class` varchar(50) CHARACTER SET utf8 COLLATE utf8_gener
Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

目录如何运用vue+echarts前后端交互实现动态饼图前言一.环境配置 1.1 安装acharts 1.2 全局引用二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写如何运用vue+echarts前后端交互实现动态饼图前言我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动
SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化

目录 0x01 新建SpringBoot项目 1. 新建maven工程 2. 编写代码 3. 代码讲解 0x02 JSON与AJAX结合 1. 编写html界面 2. 编写访问界面方法 3. 代码讲解 0x03 意外惊喜 1. 是彩蛋啊 2. 是又一个彩蛋啊 0xFF 总结 0x01 新建SpringBoot项目 1. 新建maven工程 ps:在上一教程的基础上操作,就不用新建项目了,请参考文章:SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇) 2. 编写代码
Springboot运用vue+echarts前后端交互实现动态圆环图

目录前言一.环境配置 1.1 安装acharts 1.2 全局引用二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写前言我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa
springboot动态加载Echarts柱状图

本文实例为大家分享了springboot动态加载Echarts柱状图的具体代码,供大家参考,具体内容如下第一次写博客,废话不多说,直接上代码后台代码 @RequestMapping("/rcbchart") @ResponseBody private String dwcb(@RequestParam("scrq1") String scrq1,@RequestParam("scrq2") String scrq2, @RequestPara
Springboot+echarts实现可视化

现在在做毕设,做一个电商平台日志分析系统,需要结合可视化,达到一个直观的效果 1.搭建springboot项目,maven搭建,这是项目整体架构 2.后台代码: @RestController @RequestMapping("/wanglk_bds") public class VisualController { @Autowired private VisualInterface visualInterface; /** * 每一天的访问用户量 * @return */ @Req
Spring Boot结合ECharts案例演示示例

目录一.提出任务二.完成任务 (一)创建数据库与表 (二)创建Spring Boot项目 (三)创建班级实体类 (四)创建班级映射器接口 (五)创建班级映射器配置文件 (六)创建班级服务类 (七)创建班级控制器 (八)添加ECharts和jQuery脚本 (九)添加Druid起步依赖 (十)修改应用属性文件 (十一)创建页面可视化数据 (十二)启动应用,查看结果一.提出任务后端利用Spring Boot查询班级表数据,前端利用ECharts绘制各班人数柱形图. (一)班级数据编号班级
SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇)

目录 0x01 新建SpringBoot项目 2. 编写HelloWorld程序代码 0x02 引入ECharts资源 1. 获取JQuery与ECharts资源 2. 新建ECharts模版html文件 3. 添加后台java代码 4. ECharts模版样式预览 0x03 SpringBoot整合Thymeleaf 1. 新建myECharts方法 2. 引入Thymeleaf 3. ECharts新样式预览 4. 模式升级 0xFF 总结 0x01 新建SpringBoot项目 1. 新建
分享4个最受欢迎的大数据可视化工具

想像阅读书本一样阅读数据流?这只有在电影中才有可能发生. 在现实世界中,企业必须使用数据可视化工具来读取原始数据的趋势和模式. 大数据可视化是进行各种大数据分析解决的最重要组成部分之一. 一旦原始数据流被以图像形式表示时,以此做决策就变得容易多了. 为了满足并超越客户的期望,大数据可视化工具应该具备这些特征: · 能够处理不同种类型的传入数据 · 能够应用不同种类的过滤器来调整结果 · 能够在分析过程中与数据集进行交互 · 能够连接到其他软件来接收输入数据
Vue使用Echarts实现大屏可视化布局示例详细讲解

目录一.效果展示二.基本的布局三.背景四.代码布局中遇到的一些问题一.效果展示先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局大致的布局如下,整体分为头部与body,头部有标
Springboot添加jvm监控实现数据可视化

1.简介最近越发觉得,任何一个系统上线,运维监控都太重要了.本文介绍Prometheus + Grafana的方法监控Springboot 2.X,实现美观漂亮的数据可视化. 2.添加监控 Spring-boot-actuator module 可帮助您在将应用程序投入生产时监视和管理应用程序.您可以选择使用 HTTP 端点或 JMX 来管理和监控您的应用程序.Auditing, health, and metrics gathering 也可以自动应用于您的应用程序.引入依赖如下: <!--
前端框架ECharts dataset对数据可视化的高级管理

目录 dataset 管理数据 dataset 管理数据提供一份数据. 声明一个 X 轴,类目轴(category).默认情况下,类目轴对应到声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列. option = { legend: {}, tooltip: {}, dataset: { // source: [ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['
vue基于Echarts的拖拽数据可视化功能实现

背景我司产品提出了一个需求,做一个数据基于Echars的可拖拽缩放的数据可视化,上网百度了一番,结果出现了两种结局,一种花钱买成熟产品(公司不出钱),一种没有成熟代码,只能自己写了,故事即将开始,敬请期待....... 不,还是先上一张效果图吧,请看...... 前期知识点 1. offset(偏移量) 定义:当前元素在屏幕上占用的空间,如下图: 其中: offsetHeight: 该元素在垂直方向上的占用的空间,单位为px,不包括margin. offsetWidth:该元素在水平方向上的
Python库 Bokeh 数据可视化实用指南

目录什么是 Bokeh 在哪使用 Bokeh 图安装Bokeh库导入Bokeh库绘制图表的语法使用Bokeh库主题图表样式 Python 中的 Bokeh用例数据数据说明饼形图圆环图散点图简单直方图堆积直方图不同类型的条形图简单条形图堆积条形图堆积垂直条形图双向条形图折线图棒棒糖图表面积图 Bokeh库的布局功能技术交流什么是 Bokeh Bokeh 是 Python 中的交互式可视化库.Bokeh提供的最佳功能是针对现代 Web 浏览器进行演示的高
基于vue+echarts数据可视化大屏展示的实现

获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm