Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表
上一节我们介绍了如何在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
页面,具体内容如下:
<meta charset="UTF-8"> <title>Spring Boot中使用ECharts</title> <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script> <div id="main" style="width: 1000px;height:400px;"></div> <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>
在页面内容中主要包含三部分:
- ``中通过
<script>
标签引入ECharts的组件JS,这里使用了bootcss的免费公共cdn。如果用于自己生产环境,不建议使用这类免费CDN的JS或者CSS等静态资源。可以从官网下载所需的静态内容,放到Spring Boot的静态资源位置(如果不知道在哪,可见上一篇),或是放到自己公司的静态资源管理的服务器上,实现动静分离。 <body>
中定义了一个id为main的<div>
标签,这个标签后续将用来渲染EChart组件- 最后的一段
<script>
内容则是具体的EChart图标的展现初始化和配置。具体配置内容可见代码中的注释信息。
第五步:启动应用,访问localhost:8080
,如果上面操作均无差错,那我们就会得到类似下面的折线图:
关于ECharts图表的调试,官方还提供了一个在线工具,有兴趣的读者可以点击这里尝试一下。
更多本系列免费教程连载「点击进入汇总目录」
代码示例
本文的相关例子可以查看下面仓库中的chapter4-2
目录:
- Github:https://github.com/dyc87112/SpringBoot-Learning/
- Gitee:https://gitee.com/didispace/SpringBoot-Learning/
如果您觉得本文不错,欢迎Star
支持,您的关注是我坚持的动力!
欢迎关注我的公众号:程序猿DD,获得独家整理的学习资源和日常干货推送。 如果您对我的专题内容感兴趣,也可以关注我的博客:didispace.com</script>
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
战疫期间,钉钉如何抗住暴增的百倍流量?
疫情期间,在线教育、在线办公需求持续井喷,钉钉作为很多企业首选的在线办公软件,用户量激增,特别是钉钉视频会议、直播的需求随之飙升。同时,钉钉为了响应教育部门“停课不停学”的号召,宣布老师们可以免费试用钉钉在线课堂。 流量如洪流般涌入钉钉,一场资源扩容的技术挑战拉开了帷幕。中小学生集体对钉钉展开了五星分期与在线写歌“泄愤”的策略,钉钉本钉不得不在线求饶。而在大战间隙,一声感叹传出: 流量这么大,钉钉为什么不崩? 从1月28日开始,钉钉音视频会议、直播的访问流量倍数级增长。作为一个在云上成长起来的产品,钉钉开启了在阿里云的资源扩容之路,满足了用户在家办公及在家上课的需求,保证了用户良好的体验,钉钉如何做到的? 如此大型的扩容,面临着两大困境:效率与资源供应 人工扩容困境:效率低下 时间太短面对流量暴增,留给钉钉技术团队时间只有几天。从1月29日起,钉钉团队就已在阿里云上24小时开始全力扩容,截止2月2日,从最初的2W vCPU扩容到3W vCPU,仅做到了数倍扩容,还远未达到业务需求。 购买与配置非常复杂钉钉的系统架构包含多种资源,不同于单一的云服务器ECS服务集群,还包含SLB、Mong...
- 下一篇
Tpflow V4.0 for Thinkphp6.0.2 开发版
官方博客:http://www.cojz8.com/ 流程官网:http://tpflow.cojz8.com/ 工作流手册:https://www.kancloud.cn/guowenbin/tpflow Tpflow工作流引擎已经更新到4.0版本,跟着官方Tp核心进行了升级改版 Tpflow工作流引擎是第一个PHP开源的工作流 Tpflow工作流引擎是码云GVP项目
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
-
Docker使用Oracle官方镜像安装(12C,18C,19C)
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池
- CentOS8编译安装MySQL8.0.19
- Docker快速安装Oracle11G,搭建oracle11g学习环境
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- MySQL8.0.19开启GTID主从同步CentOS8
- CentOS7,8上快速安装Gitea,搭建Git服务器
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
推荐阅读
最新文章
- CentOS6,CentOS7官方镜像安装Oracle11G
- Docker使用Oracle官方镜像安装(12C,18C,19C)
- SpringBoot2配置默认Tomcat设置,开启更多高级功能
- 设置Eclipse缩进为4个空格,增强代码规范
- Mario游戏-低调大师作品
- MySQL8.0.19开启GTID主从同步CentOS8
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS8编译安装MySQL8.0.19
- Springboot2将连接池hikari替换为druid,体验最强大的数据库连接池