上一节我们介绍了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础。接下来,我们介绍一下后端开发经常会遇到的一个场景:可视化图表。

通常,这类需求在客户端应用中不太会用到,但是在后端的各种统计分析模块会经常碰到。比如:通过折线图、柱状图、雷达图等可视化形式,更直观的展现和分析经营状况或系统运行情况。这里我们将引入的数据可视化组件库 ECharts来帮助我们完成这样的任务。

ECharts简介

ECharts是百度开源的一个前端组件。它是一个使用 JavaScript 实现的开源可视化库,可以流畅的运行在 PC 和移动设备上,兼容当前绝大部分浏览器(IE8/9/10/11,Chrome,Firefox,Safari等),底层依赖矢量图形库 ZRender,提供直观,交互丰富,可高度个性化定制的数据可视化图表。

它提供了常规的折线图、柱状图、散点图、饼图、K线图,用于统计的盒形图,用于地理数据可视化的地图、热力图、线图,用于关系数据可视化的关系图、treemap、旭日图,多维数据可视化的平行坐标,还有用于 BI 的漏斗图,仪表盘,并且支持图与图之间的混搭。

除了已经内置的包含了丰富功能的图表,ECharts 还提供了自定义系列,只需要传入一个renderItem函数,就可以从数据映射到任何你想要的图形,更棒的是这些都还能和已有的交互组件结合使用而不需要操心其它事情。

你可以在下载界面下载包含所有图表的构建文件,如果只是需要其中一两个图表,又嫌包含所有图表的构建文件太大,也可以在在线构建中选择需要的图表类型后自定义构建。

动手试一试

第一步:创建一个基础Spring Boot应用,或者拿上一节的工程chapter4-1(仓库地址见文末)来进行加工。

第二步:在pom.xml中引入Web应用需要的web模块和模板引擎thymeleaf模块,比如用Thymeleaf的时候:

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>

第三步:编写一个Controller,将/路径的请求,映射到index.html页面

@Controller
public class HelloController { @GetMapping("/")
public String index(ModelMap map) {
return "index";
} }

第四步:在resources/templates目录下创建index.html页面,具体内容如下:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8" />
<title>Spring Boot中使用ECharts</title>
<script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>
<body>
<div id="main" style="width: 1000px;height:400px;"></div>
</body> <script type="text/javascript">
// 初始化ECharts组件到id为main的元素上
let myChart = echarts.init(document.getElementById('main'));
// 定义图标的配置项
let option = {
title: {
text: 'Spring Boot中使用ECharts'
},
tooltip: {},
// x轴配置
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
},
// y轴配置
yAxis: {},
series: [{
// 数据集(也可以从后端的Controller中传入)
data: [820, 932, 901, 934, 1290, 1330, 1320],
// 图表类型,这里使用line,为折线图
type: 'line'
}]
};
myChart.setOption(option);
</script>
</html>

在页面内容中主要包含三部分:

  • <head>中通过<script>标签引入ECharts的组件JS,这里使用了bootcss的免费公共cdn。如果用于自己生产环境,不建议使用这类免费CDN的JS或者CSS等静态资源。可以从官网下载所需的静态内容,放到Spring Boot的静态资源位置(如果不知道在哪,可见上一篇),或是放到自己公司的静态资源管理的服务器上,实现动静分离。
  • <body>中定义了一个id为main的<div>标签,这个标签后续将用来渲染EChart组件
  • 最后的一段<script>内容则是具体的EChart图标的展现初始化和配置。具体配置内容可见代码中的注释信息。

第五步:启动应用,访问localhost:8080,如果上面操作均无差错,那我们就会得到类似下面的折线图:

关于ECharts图表的调试,官方还提供了一个在线工具,有兴趣的读者可以点击这里尝试一下。

更多本系列免费教程连载「点击进入汇总目录」

代码示例

本文的相关例子可以查看下面仓库中的chapter4-2目录:

如果您觉得本文不错,欢迎Star支持,您的关注是我坚持的动力!

欢迎关注我的公众号:程序猿DD,获得独家整理的学习资源和日常干货推送。

如果您对我的专题内容感兴趣,也可以关注我的博客:didispace.com

Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表的更多相关文章

  1. Spring Boot 2.x基础教程:使用Swagger2构建强大的API文档

    随着前后端分离架构和微服务架构的流行,我们使用Spring Boot来构建RESTful API项目的场景越来越多.通常我们的一个RESTful API就有可能要服务于多个不同的开发人员或开发团队:I ...

  2. Spring Boot 2.x基础教程:JSR-303实现请求参数校验

    请求参数的校验是很多新手开发非常容易犯错,或存在较多改进点的常见场景.比较常见的问题主要表现在以下几个方面: 仅依靠前端框架解决参数校验,缺失服务端的校验.这种情况常见于需要同时开发前后端的时候,虽然 ...

  3. Spring Boot 2.x基础教程:Swagger接口分类与各元素排序问题详解

    之前通过Spring Boot 2.x基础教程:使用Swagger2构建强大的API文档一文,我们学习了如何使用Swagger为Spring Boot项目自动生成API文档,有不少用户留言问了关于文档 ...

  4. Spring Boot 2.x基础教程:Swagger静态文档的生成

    前言 通过之前的两篇关于Swagger入门以及具体使用细节的介绍之后,我们已经能够轻松地为Spring MVC的Web项目自动构建出API文档了.如果您还不熟悉这块,可以先阅读: Spring Boo ...

  5. Spring Boot 2.x基础教程:使用国产数据库连接池Druid

    上一节,我们介绍了Spring Boot在JDBC模块中自动化配置使用的默认数据源HikariCP.接下来这一节,我们将介绍另外一个被广泛应用的开源数据源:Druid. Druid是由阿里巴巴数据库事 ...

  6. Spring Boot 2.x基础教程:找回启动日志中的请求路径列表

    如果您看过之前的Spring Boot 1.x教程,或者自己原本就对Spring Boot有一些经验,或者对Spring MVC很熟悉.那么对于Spring构建的Web应用在启动的时候,都会输出当前应 ...

  7. Spring Boot 2.x基础教程:使用MyBatis的XML配置方式

    上一篇我们介绍了如何在Spring Boot中整合我们国人最常用的MyBatis来实现对关系型数据库的访问.但是上一篇中使用了注解方式来实现,而对于很多MyBatis老用户还是习惯于XML的开发方式, ...

  8. Spring Boot 2.x基础教程:Spring Data JPA的多数据源配置

    上一篇我们介绍了在使用JdbcTemplate来做数据访问时候的多数据源配置实现.接下来我们继续学习如何在使用Spring Data JPA的时候,完成多数据源的配置和使用. 添加多数据源的配置 先在 ...

  9. Spring Boot 2.x基础教程:事务管理入门

    什么是事务? 我们在开发企业应用时,通常业务人员的一个操作实际上是对数据库读写的多步操作的结合.由于数据操作在顺序执行的过程中,任何一步操作都有可能发生异常,异常会导致后续操作无法完成,此时由于业务逻 ...

随机推荐

  1. Opencv笔记(九)——图像阈值

    学习目标: 学习简单阈值,自适应阈值,Otsu's 二值化等 学习函数cv2.threshold,cv2.adaptiveThreshold 等. 一.简单阈值 与名字一样,这种方法非常简单.但像素值 ...

  2. tesseract系列(3) -- tesseract训练

    tessract的训练有个工具叫 jTessBoxEditor 1.jTessBoxEditor是用java写的,首先要装java的环境 jdk-8u191-windows-x64.exe 这个我想从 ...

  3. Monkey日常测试命令

    一,LOG日志抓取 adb  logcat -b main -v time >log.txt --实时日志打印 adb shell monkey -p com.eeyescloud.eeyes  ...

  4. shell_分析服务器日志

    1.查看有多少个IP访问: awk '{print $1}' log_file|sort|uniq|wc -l 2.查看某一个页面被访问的次数 grep "/index.php" ...

  5. 在VMware装了linux系统,如何在windows系统中用xshell连接

    网上有好几种方法,不过我觉得这种比较简单 1.找到VMware菜单  打开 编辑>虚拟网络编辑器 如图: 点下面的更改设置 点确定就可以了,什么都不用改.然后回到linux系统中ifconfig ...

  6. day21-双下eq方法

    class Goods: def __init__(self,name): self.name = name def __eq__(self,other): #self = apple1, other ...

  7. C# 怎样判断 datagridview 中的checkbox列是否被选中

    private void dataGridView1_CellContentClick(object sender, DataGridViewCellEventArgs e){ for (int i  ...

  8. 瑞星:以虚拟化安全“Hold住”企业用户

    自从云计算的概念诞生的哪一天起,就吸引了无数人的目光.自从2006年开始,云计算经过了雾里看花的朦胧.众说纷纭的迷茫,到现在各类应用与服务呈现出了百花齐放的姿态,引领着信息科技迈入了新纪元,而服务器虚 ...

  9. python学习笔记(3)数据类型-列表list

    序列是Python中最基本的数据结构.序列中的每个元素都分配一个数字 - 它的位置,或索引,第一个索引是0,第二个索引是1,依此类推. Python有6个序列的内置类型,但最常见的是列表和元组. 序列 ...

  10. firefox45版本与seleniumIDE

    firefox45版本与seleniumIDE https://blog.csdn.net/seanlyly/article/details/80203896 seleniumIDE与firefox版 ...