教程目录

0x00 教程内容
0x01 新建SpringBoot项目
- 1. 新建maven工程
  - 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 总结

0x00 教程内容

新建SpringBoot项目
引入ECharts资源
SpringBoot整合Thymeleaf

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、跨域问题解决等等。

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

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

SpringBoot+Thymeleaf+ECharts实现大数据可视化（基础篇）相关推荐

数据可视化系列-01大数据可视化基础
文章目录 1.概述 2.大数据可视化基础 2.1 数据可视化基础知识 1.数据可视化简史: 2.数据可视化是什么: 3.数据可视化的分类: 4.数据可视化流程: 5.数据可视化的意义: 2.2 认识B ...
（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
回顾作者用心写作,请动动你可爱的小手点亮大拇指.你的鼓励是作者继续创作的动力- 前端的学习,不能仅仅依靠知识点的学习,实战项目的操作可以帮助我们整理知识点以及提高编程能力,更有助于学习和实践,最重要 ...
echarts学习——（下）Vue+Echarts构建大数据可视化酷屏展示公司品牌实战项目分享（附源码）
一个基于Vue前端框架和第三方图表库Echarts构建的可视化大数据平台,通过vue项目构建.指令的灵活运用.组件封装.组件之间通信,使内部图表组件库可实现自由替换和组合.以及一些功能模块的设计及代码 ...
大数据入门-基础篇01-hadoop框架简介
声明:本文主要根据八斗学院孙国宇老师的Hadoop大数据实战手册进行的整理,仅限入门学习! 第一章 hadoop简介 Hadoop 是一个由 Apache 基金会所开发的开源分布式系统基础架构.用户 ...
hive load data外部表报错_从0开始学大数据-Hive基础篇
Hive起源于Facebook,是基于 Hadoop HDFS 分布式文件系统的分布式数据仓库架构.它为数据仓库的管理提供了许多功能:数据ETL(抽取.转换和加载)工具.数据存储管理和大型数据集的 ...
遇见大数据可视化：【云图】让数据可见
欢迎大家前往腾讯云社区,获取更多腾讯海量技术实践干货哦~ 作者:腾讯大数据可视化设计团队导语: 除了手搓,我们还有更好的数据可视化方案今天,即使你不熟悉云计算,大数据是什么.但是这些词汇已经充斥在 ...
《大数据可视化》课后习题答案-何光威版
大数据可视化本篇只包含部分简答第一章一.填空与选择题 1.数据可视化的主要作用包括___ 数据记录和表达_____.数据操作_____和____数据分析_ 三个方面,这也是可视化技术支持计算机辅 ...
基于hadoop和echarts的教育大数据可视化系统毕设完整的代码+数据集
一.摘要在线教育平台现在是教育体系的重要组成部分,在当前大数据时代的背景下,促进教育机构建立统一平台.统一资源管理的数字化教学系统.如何评估系统平台的健康程度.学生的学习体验和在线课程的质量对于课 ...
Django博客来访人员地域分布大数据可视化---echarts绘图、geoip2获取地理位置
文章目录 Django博客来访人员地域分布大数据可视化---echarts绘图.geoip2获取地理位置效果 echarts作图 geoip2获取地理位置 api接口开发 ajax前后端动态交互 D ...
视频教程-跟风舞烟学大数据可视化－Echarts从入门到上手实战-JavaScript
跟风舞烟学大数据可视化-Echarts从入门到上手实战网名风舞烟,中国科技大学计算机专业.微软认证讲师(MCE).微软数据分析讲师.10多年软件行业从业经验,参与过数百万的企业级ERP系统,在大数据 ...

SpringBoot+Thymeleaf+ECharts实现大数据可视化（基础篇）