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

邵奈一来了 2021-07-20 04:20:15
SpringBoot springboot教程


0x00 教程内容
  1. 新建SpringBoot项目
  2. 引入ECharts资源
  3. SpringBoot整合Thymeleaf
0x01 新建SpringBoot项目
1. 新建maven工程

a. Spring Initializr -> DefaultProject SDK要自行装好并配置好)
在这里插入图片描述
b. GroupArtifact等可随意修改,注意修改此处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";
}
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.

在这里插入图片描述
b. 在templates目录下新建一个index.html界面并添加代码:
在这里插入图片描述

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

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.

c. 点击绿色小箭头,然后打开浏览器,输入(localhost:8080),可看到:在这里插入图片描述

0x02 引入ECharts资源
1. 获取JQuery与ECharts资源

a. 下载EChartsJQuery的js文件,并在static目录新建js文件夹,然后复制echarts.min.jsjquery-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>

  • 1.
  • 2.

在这里插入图片描述

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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
3. 添加后台java代码

a. 在HelloController中添加myDemo方法:

@RequestMapping("/demo")
public String myDemo(){
return "demo";
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.

在这里插入图片描述

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";
}

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.

在这里插入图片描述

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"/>

  • 1.
  • 2.

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

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

  • 1.
  • 2.

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

xAxis: {
data: [skirt,"羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
},
series: [{
name: '销量',
type: 'bar',
data: [nums, 20, 36, 10, 10, 20]
}]

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.

在这里插入图片描述
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>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
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"/>

  • 1.
  • 2.

b. 将这两行代码:

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

  • 1.
  • 2.

换成:

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

  • 1.
  • 2.

其实效果是一样的!请自己思考一下,为什么效果是一样的?!

0xFF 总结
  1. 本教程从HelloWorld开始,一步一步进阶为显示ECharts静态界面,再到接收后台传送过来的数据,整合了前后台Thymeleaf与SpringBoot,为开发非常重要的一步;需要特别注意路径问题。
  2. 需要自己学习一下HTML、CSS、JS的相关知识。
  3. 进阶教程请查看文章:SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化(进阶篇),通过实战例子,技能包含JSON、Ajax、跨域问题解决等等。

作者简介:邵奈一
全栈工程师、市场洞察者、专栏编辑
| 公众号 | 微信 | 微博 | CSDN | 简书 |

福利:
邵奈一的技术博客导航
邵奈一 原创不易,如转载请标明出处。


版权声明
本文为[邵奈一来了]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_12564104/2894510

  1. Netty源码解析-概述篇
  2. Netty源码解析-概述篇
  3. Netty源码解析1-Buffer
  4. Netty源码解析1-Buffer
  5. Netty源码解析2-Reactor
  6. Netty源码解析2-Reactor
  7. Netty源码解析3-Pipeline
  8. Netty源码解析3-Pipeline
  9. Netty源码解析4-Handler综述
  10. Netty源码解析4-Handler综述
  11. Netty源码解析5-ChannelHandler
  12. Netty源码解析5-ChannelHandler
  13. Netty源码解析6-ChannelHandler实例之LoggingHandler
  14. Netty源码解析6-ChannelHandler实例之LoggingHandler
  15. Netty源码解析7-ChannelHandler实例之TimeoutHandler
  16. Netty源码解析7-ChannelHandler实例之TimeoutHandler
  17. Netty源码解析8-ChannelHandler实例之CodecHandler
  18. Netty源码解析8-ChannelHandler实例之CodecHandler
  19. Netty源码解析9-ChannelHandler实例之MessageToByteEncoder
  20. Netty源码解析9-ChannelHandler实例之MessageToByteEncoder
  21. 大数据面试题之Hbase系列
  22. 你可能需要的Kafka面试题与答案整理
  23. 你可能需要的Kafka面试题与答案整理
  24. 后起之秀Pulsar VS. 传统强者Kafka?谁更强
  25. 后起之秀Pulsar VS. 传统强者Kafka?谁更强
  26. 【大数据哔哔集20210123】别问,问就是Kafka最可靠
  27. 【大数据哔哔集20210123】别问,问就是Kafka最可靠
  28. 【大数据哔哔集20210124】有人问我Kafka Leader选举?我真没慌
  29. 【大数据哔哔集20210124】有人问我Kafka Leader选举?我真没慌
  30. 【大数据哔哔集20210117】Kafka 的高可靠性是怎么实现的
  31. 【大数据哔哔集20210117】Kafka 的高可靠性是怎么实现的
  32. Kafka Connect | 无缝结合Kafka构建高效ETL方案
  33. Kafka面试题总结(一)
  34. Kafka面试题总结(一)
  35. Kafka面试题整理(二)
  36. Kafka面试题整理(二)
  37. 基于Kafka Flink Redis的电商大屏实时计算案例
  38. 基于Kafka Flink Redis的电商大屏实时计算案例
  39. Google布隆过滤器与Redis布隆过滤器详解
  40. Google布隆过滤器与Redis布隆过滤器详解
  41. 【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索
  42. 关于Redis的几件小事 | 高并发和高可用
  43. 关于Redis的几件小事 | 高并发和高可用
  44. 关于redis的几件小事(一)redis的使用目的与问题
  45. 关于redis的几件小事(一)redis的使用目的与问题
  46. 阿里云Redis技术架构演进
  47. 阿里云Redis技术架构演进
  48. 阿里云Redis技术架构演进
  49. Flink实战(109):connector(十八)hdfs 读写(三)StreamingFileSink相关特性及代码实战
  50. Flink实战(110):flink-sql使用(十八)connector(十九)Flink 与 hive 结合使用(七) Flink Hive Connector 使用
  51. Flink实战(110):flink-sql使用(十八)connector(十九)Flink 与 hive 结合使用(七) Flink Hive Connector 使用
  52. Flink实战(111):flink-sql使用(十九)Flink 与 hive 结合使用(八)Hive Streaming 实战解析
  53. Flink实战(111):flink-sql使用(十九)Flink 与 hive 结合使用(八)Hive Streaming 实战解析
  54. Docker常用命令,这些都要会!
  55. 鸟哥的Linux私房菜学习之第九章笔记
  56. Java NIO之Channel(通道)
  57. Java NIO之拥抱Path和Files
  58. Redis changed its open source license, and many projects were no longer open source
  59. JDK 11 has entered the candidate release stage, and the official version is planned to be released on September 25
  60. [* *] the latest version of windows 10 hides Linux?