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

目录
  • 0x01 新建SpringBoot项目
  • 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 总结

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

}

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. 下载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>

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可视化内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • springboot动态加载Echarts柱状图

    本文实例为大家分享了springboot动态加载Echarts柱状图的具体代码,供大家参考,具体内容如下 第一次写博客,废话不多说,直接上代码 后台代码 @RequestMapping("/rcbchart") @ResponseBody private String dwcb(@RequestParam("scrq1") String scrq1,@RequestParam("scrq2") String scrq2, @RequestPara

  • SpringBoot+ECharts是如何实现数据可视化的

    一.提出任务 查询班级表数据,利用ECharts绘制各班人数柱形图. (一)班级数据 (二)运行效果 二.实现步骤 (一)创建数据库与表 1.创建数据库 - test create database test; 2.创建数据表 - t_class 创建表结构 CREATE TABLE `t_class` ( `id` int(11) NOT NULL AUTO_INCREMENT, `class` varchar(50) CHARACTER SET utf8 COLLATE utf8_gener

  • Springboot项目中运用vue+ElementUI+echarts前后端交互实现动态圆环图(推荐)

    目录 如何运用vue+echarts前后端交互实现动态饼图 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 如何运用vue+echarts前后端交互实现动态饼图 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动

  • SpringBoot+Echarts实现请求后台数据显示饼状图

    场景 SpringBoot搭建后台获取数据,前端可视化使用echarts的饼状图. Echarts3官网 获取Echarts 从官网下载界面选择你需要的版本下载,根据开发者功能和体积上的需求,我们提供了不同打包的下载,如果你在体积上没有要求,可以直接下载完整版本.开发环境建议下载源代码版本,包含了常见的错误提示和警告. 在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 通过 npm 获取 ec

  • Springboot+echarts实现可视化

    现在在做毕设,做一个电商平台日志分析系统,需要结合可视化,达到一个直观的效果 1.搭建springboot项目,maven搭建,这是项目整体架构 2.后台代码: @RestController @RequestMapping("/wanglk_bds") public class VisualController { @Autowired private VisualInterface visualInterface; /** * 每一天的访问用户量 * @return */ @Req

  • Spring Boot结合ECharts案例演示示例

    目录 一.提出任务 二.完成任务 (一)创建数据库与表 (二)创建Spring Boot项目 (三)创建班级实体类 (四)创建班级映射器接口 (五)创建班级映射器配置文件 (六)创建班级服务类 (七)创建班级控制器 (八)添加ECharts和jQuery脚本 (九)添加Druid起步依赖 (十)修改应用属性文件 (十一)创建页面可视化数据 (十二)启动应用,查看结果 一.提出任务 后端利用Spring Boot查询班级表数据,前端利用ECharts绘制各班人数柱形图. (一)班级数据 编号 班级

  • SpringBoot+JSON+AJAX+ECharts+Fiddler实现前后端分离开发可视化

    目录 0x01 新建SpringBoot项目 1. 新建maven工程 2. 编写代码 3. 代码讲解 0x02 JSON与AJAX结合 1. 编写html界面 2. 编写访问界面方法 3. 代码讲解 0x03 意外惊喜 1. 是彩蛋啊 2. 是又一个彩蛋啊 0xFF 总结 0x01 新建SpringBoot项目 1. 新建maven工程 ps:在上一教程的基础上操作,就不用新建项目了,请参考文章:SpringBoot+Thymeleaf+ECharts实现大数据可视化(基础篇) 2. 编写代码

  • Springboot运用vue+echarts前后端交互实现动态圆环图

    目录 前言 一.环境配置 1.1 安装acharts 1.2 全局引用 二.圆环图前端实现 2.1 先在vue页面添加渲染盒子 2.2 前端逻辑实现部分 2.3 展示(可按自己需求更改前端样式) 三.前后端数据交互实现 3.1 创建数据库 3.2 后台代码的编写 前言 我们做项目的时候,常常需要一些统计图来展示我们的数据,作为web开发人员,会实现统计图是我们必会的技能.我将带大家来实现动态饼图的实现 一.环境配置 1.1 安装acharts //npm也一样 cnpm install echa

  • SpringBoot+thymeleaf+Echarts+Mysql 实现数据可视化读取的示例

    目录 实现过程 1. pom.xml 2. 后端程序示例 3. 前端程序示例 通过从数据库获取数据转为JSON数据,返回前端界面实现数据可视化. 数据可视化测试 实现过程 1. pom.xml pom.xml引入(仅为本文示例需要,其他依赖自行导入) <!--Thymeleaf整合security--> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymele

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

    目录 0x01 新建SpringBoot项目 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 总结 0x01 新建SpringBoot项目 1. 新建

  • 分享4个最受欢迎的大数据可视化工具

    想像阅读书本一样阅读数据流?这只有在电影中才有可能发生. 在现实世界中,企业必须使用数据可视化工具来读取原始数据的趋势和模式. 大数据可视化是进行各种大数据分析解决的最重要组成部分之一. 一旦原始数据流被以图像形式表示时,以此做决策就变得容易多了. 为了满足并超越客户的期望,大数据可视化工具应该具备这些特征: ·      能够处理不同种类型的传入数据 ·      能够应用不同种类的过滤器来调整结果 ·      能够在分析过程中与数据集进行交互 ·      能够连接到其他软件来接收输入数据

  • Vue使用Echarts实现大屏可视化布局示例详细讲解

    目录 一.效果展示 二.基本的布局 三.背景 四.代码 布局中遇到的一些问题 一.效果展示 先看一下展示的效果,无论是尺寸多宽的屏幕,都会将内容显示完整,做到了正正的响应式.唯一不足的是图表中的样例,会随着图表的缩放而变换位置,窗口尺寸变化过快会反应不过来,好在有节流函数,可以让浏览器计算量没有那么大.本篇博客不会直接拿echarts图表下手,会先介绍一些这个大屏可视化的响应式布局.后面会出一个专门的博客介绍echarts的使用. 二.基本的布局 大致的布局如下,整体分为头部与body,头部有标

  • Springboot添加jvm监控实现数据可视化

    1.简介 最近越发觉得,任何一个系统上线,运维监控都太重要了.本文介绍Prometheus + Grafana的方法监控Springboot 2.X,实现美观漂亮的数据可视化. 2.添加监控 Spring-boot-actuator module 可帮助您在将应用程序投入生产时监视和管理应用程序.您可以选择使用 HTTP 端点或 JMX 来管理和监控您的应用程序.Auditing, health, and metrics gathering 也可以自动应用于您的应用程序.引入依赖如下: <!--

  • 前端框架ECharts dataset对数据可视化的高级管理

    目录 dataset 管理数据 dataset 管理数据 提供一份数据. 声明一个 X 轴,类目轴(category).默认情况下,类目轴对应到声明多个 bar 系列,默认情况下,每个系列会自动对应到 dataset 的每一列. option = { legend: {}, tooltip: {}, dataset: { // source: [ ['product', '2015', '2016', '2017'], ['Matcha Latte', 43.3, 85.8, 93.7], ['

  • vue基于Echarts的拖拽数据可视化功能实现

    背景 我司产品提出了一个需求,做一个数据基于Echars的可拖拽缩放的数据可视化,上网百度了一番,结果出现了两种结局,一种花钱买成熟产品(公司不出钱),一种没有成熟代码,只能自己写了,故事即将开始,敬请期待.......  不,还是先上一张效果图吧,请看...... 前期知识点 1. offset(偏移量) 定义:当前元素在屏幕上占用的空间,如下图: 其中: offsetHeight: 该元素在垂直方向上的占用的空间,单位为px,不包括margin. offsetWidth:该元素在水平方向上的

  • Python库 Bokeh 数据可视化实用指南

    目录 什么是 Bokeh 在哪使用 Bokeh 图 安装Bokeh库 导入Bokeh库 绘制图表的语法 使用Bokeh库主题 图表样式 Python 中的 Bokeh用例 数据 数据说明 饼形图 圆环图 散点图 简单直方图 堆积直方图 不同类型的条形图 简单条形图 堆积条形图 堆积垂直条形图 双向条形图 折线图 棒棒糖图表 面积图 Bokeh库的布局功能 技术交流 什么是 Bokeh Bokeh 是 Python 中的交互式可视化库.Bokeh提供的最佳功能是针对现代 Web 浏览器进行演示的高

  • 基于vue+echarts数据可视化大屏展示的实现

    获取 ECharts 的路径有以下几种,请根据您的情况进行选择: 1) 最直接的方法是在 ECharts 的官方网站中挑选适合您的版本进行下载,不同的打包下载应用于不同的开发者功能与体积的需求,或者您也可以直接下载完整版本:开发环境建议下载源代码版本,包含了常见的错误提示和警告. 2) 也可以在 ECharts 的 GitHub 上下载最新的 release 版本,解压出来的文件夹里的 dist 目录里可以找到最新版本的 echarts 库. 3) 或者通过 npm 获取 echarts,npm

随机推荐