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

更新时间：2022年06月22日 10:25:48 作者：邵奈一

本文主要介绍了SpringBoot+Thymeleaf+ECharts实现大数据可视化，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧<BR>

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事件和bean生命周期执行机制实例详解
这篇文章主要介绍了Springboot事件和bean的生命周期执行机制,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2023-03-03
详解关于SpringBoot的外部化配置使用记录
这篇文章主要介绍了详解关于SpringBoot的外部化配置使用记录,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
java题解LeetCode20.有效的括号
这篇文章主要为大家介绍了java题解LeetCode20.有效的括号示例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-10-10
IDEA整合SSM框架实现网页上显示数据
最近做了个小项目，该项目包在intellij idea中实现了ssm框架的整合以及实现访问，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-05-05
SpringBoot添加License的多种方式
License指的是版权许可证，当我们开发完系统后，如果不想让用户一直白嫖使用，比如说按时间续费，License的作用就有了。我们可以给系统指定License的有效期，控制系统的可用时间。
2021-06-06
Java日常练习题,每天进步一点点(36)
下面小编就为大家带来一篇Java基础的几道练习题(分享)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望可以帮到你
2021-07-07
java8 Stream list to Map key 重复 value合并到Collectio的操作
这篇文章主要介绍了java8 Stream list to Map key 重复 value合并到Collectio的操作，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2021-06-06
简单讲解Java设计模式编程中的单一职责原则
这篇文章主要介绍了Java设计模式编程中的单一职责原则,这在团队开发编写接口时经常使用这样的约定,需要的朋友可以参考下
2016-02-02
Spring @Value 设置默认值的实现
这篇文章主要介绍了Spring @Value 设置默认值的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-09-09
解决SpringBoot引用别的模块无法注入的问题
这篇文章主要介绍了解决SpringBoot引用别的模块无法注入的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-02-02