thymeleaf+echarts,显示后端传来的数据(代码片段)

夜中听雪 夜中听雪     2022-12-13     271

关键词:

视频:ECharts数据可视化项目-大屏数据可视化展示-echarts 图表制作-_bilibili

文档:Documentation - Apache ECharts - 五分钟上手ECharts

前端测试ECharts

工具:HBuilder X。

1、Release 5.1.2 · apache/echarts 往下拉,点击"Source code (zip)" 来下载"echarts-5.1.2.zip",然后在zip包中找出"echarts.min.js"复制到项目中。

2、新建html页面写入下方代码。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Title</title>
		<style>
			.box
				width:600px;
				height:400px;
				background-color:pink;
			
		</style>
	</head>
	<body>
		<div class="box"></div>
		<script src="js/echarts.min.js"></script>
		<script>
			// 基于准备好的dom,初始化echarts实例
			var myChart = echarts.init(document.querySelector(".box"));
	
			// 指定图表的配置项和数据
			var option = 
				xAxis: 
					type: 'category',
					data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
				,
				yAxis: 
					type: 'value'
				,
				series: [
					data: [150, 230, 224, 218, 135, 147, 260],
					type: 'line'
				]
			;
	
			// 使用刚指定的配置项和数据显示图表。
			myChart.setOption(option);
		</script>
	</body>
</html>

后端给前端传数据,测试ECharts

工具:IDEA,SpringBoot项目,echarts.min.js,Maven导入Thymeleaf包

1、后端通过Model传值到前端

@Controller
public class HomeController 

    @RequestMapping(path = "/test", method = RequestMethod.GET)
    public String test(Model model) 
        List list=Arrays.asList(new int[]150,160,170,180,190,200,210);
        model.addAttribute("data",list );
        return "/site/test";
    

2、js通过Model取值作为变量使用

<script th:inline="javascript">
    data1 = [[$data]];
</script>

应用到Thymeleaf页面中:test.html

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="icon" href="https://static.nowcoder.com/images/logo_87_87.png"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" crossorigin="anonymous">

    <title>Title</title>
    <style>
        .box
            width:600px;
            height:400px;
            background-color:pink;
        
    </style>
</head>
<body>
    <script th:src="@/js/echarts.min.js"></script>
    <div class="box"></div>

    <script th:inline="javascript">
        var data1 = [[$data]];
        // var data2=[150,160,170,180,190,200,210];

        // 基于准备好的dom,初始化echarts实例
        var myChart = echarts.init(document.querySelector(".box"));

        // 指定图表的配置项和数据
        var option = 
            xAxis: 
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            ,
            yAxis: 
                type: 'value'
            ,
            series: [
                data: data1[0],//data1[0]的原因见下文
                //data: data2,
                type: 'line'
            ]
        ;

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>

</body>
</html>

http://127.0.0.1:8080/test 显示页面:

data: data1[0] 的原因

浏览器里,右击->检查->Sources,调试原代码。

var data1 = [[$data]]; 显示:

var data2=[150,160,170,180,190,200,210]; 显示:

求问大佬echarts,x轴可以实现不等距间隔吗?比如我后台传来半年的时间数据,前台统计x轴展示

求问大佬Echarts,X轴可以实现不等距间隔吗?比如我后台传来半年的时间数据,前台统计X轴展示相应的时间日期,Y轴是时间对应的相关数据。现在问题是怎么让X轴刻度显示为每个月的一号?求大佬指教,最好有Demo!参考技术AxA... 查看详情

高效开发:thymeleaf中th:text和th:utext的区别(代码片段)

文章目录th:textth:utext小结th:text1.可以对表达式或变量进行求值2.用“+”符号可进行文本连接3.当获取后端传来的参数时,若后端有标签,如:@RequestMapping("/")publicStringaa(Modelmodel)Stringmsg="<h1>啦啦啦... 查看详情

高效开发:thymeleaf中th:text和th:utext的区别(代码片段)

文章目录th:textth:utext小结th:text1.可以对表达式或变量进行求值2.用“+”符号可进行文本连接3.当获取后端传来的参数时,若后端有标签,如:@RequestMapping("/")publicStringaa(Modelmodel)Stringmsg="<h1>啦啦啦... 查看详情

elementui表格多选框根据后端传来的数据进行数据回显(代码片段)

...来的表格数据(items里面包含多个对象数据),表格遍历显示:row-key="getRowKey"//多选框时是必要的@selection-change="selectAjgl"//勾选和取消勾选都会触发这个selectAjgl函数ref="multipleTable"//可以用来做数据回显打勾!!!><el-table-columnt... 查看详情

java后端开发第四篇:springboot中thymeleaf入门(代码片段)

thymeleaf是springboot中所支持的一种模板引擎。入门级使用如下:pom.xml中引入依赖:<!--引入模板引擎--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thymeleaf</artifactId></dependen... 查看详情

使用springboot校验客户端传来的数据

前端的数据校验都是辣鸡!后端天下第一!很多时候我们后端需要前端传数据过来,比如注册,修改用户名,修改密码等等。很可能有些用户就喜欢搞事,喜欢发一大堆乱七八糟的数据到后端来,甚至有些前端老哥甚至都不做校验,简直... 查看详情

springboot+thymeleaf+mybatis逆向工程和pagehelper

使用thymeleaf模板引擎的时候,如果某个片段出错,那么该片段后面所有都不再显示。1.thymeleaf局部刷新:    前端:  myOrders.html:    js:    后端:  2.ajax发送数组对象给后端:  前端... 查看详情

springboot系列——模板引擎thymeleaf

〇、thymeleaf是什么  1.在以往开发springweb项目时,若我们想在前端页面上显示一些服务端的数据(即动态显示),得借助JSP的内置对象和JSTL实现,或者通过JavaScript请求实现;其缺点在于,与后端联系太紧密,不利于前后端分... 查看详情

前端如何处理后端一次性传来的10w条数据(代码片段)

因为之前在看到了这样的文章,博主介绍了很多种实现方式,作为一名菜鸟级选手,我选择了其中一种实践了一下,因为在平时的项目中其实只需要熟练掌握一种就可以了((•̀ω•́)✧还有就是我是菜鸟~ÿ... 查看详情

thymeleaf-标签th:with

 用法:1、调用后端service中定义的接口方法,并获取返回值,供后续使用:  eg:这里是select遍历后台返回的集合数据:  前端:    后端:    查看详情

java后端开发第四篇:springboot中thymeleaf入门(代码片段)

thymeleaf是springboot中所支持的一种模板引擎。入门级使用如下:pom.xml中引入依赖:<!--引入模板引擎--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-thy 查看详情

echarts使用

首先下载eCharts源代码,然后可以按照官网的5分钟上手ECharts教程做一个简单的例子,这里为了将前端显示和后端逻辑分开,可以建一个index.html和一个绘制图表的chartTest.js,代码如下:<html><head><metacharset="UTF-8"><title>eCh... 查看详情

echarts对后端返回的数据进行处理

这种数据需要得到数组中的对象同一类的数据为一个数组1.第一步,先要name作为键名let keyArray = Object.keys(order.data[0])2.根据键名做循环取出对应的键名的数据keyArray.forEach(key =>        &... 查看详情

springboot+thymeleaf+layui

后端框架 后端框架SpringBootMybatis前端框架ThymeleafLayUIJQuery数据库MySQL开发必备技术熟悉SpringMVC框架熟悉SpringBoot框架熟悉Mybatis框架了解Thymeleaf模板了解LayUI框架熟悉JQuery熟悉MySQL 查看详情

thymeleaf模板引擎(代码片段)

Springboot需要使用thymeleaf模板引擎来编写前端页面,代替了SSM中的JSPcontroller的return页面的路径,默认为resources下的template 查看thymeleaf的配置文件,在template下默认使用.html页面  thymeleaf的语法:在html中导入thymeleaf的命名... 查看详情

电商门户网站商品品类多级联动springboot+thymeleaf实现

...端实现。搭建部署SpringBoot环境配置文件配置:开启了对Thymeleaf模块引擎的支持server:port:8081#logging:#config:classpath:logback_spring.xml#level:#com.muses.taoshop:de 查看详情

如何在 Spring 3 / Thymeleaf 中显示带有参数的本地化消息

】如何在Spring3/Thymeleaf中显示带有参数的本地化消息【英文标题】:HowtoshowlocalizationmessageswithparametersinSpring3/Thymeleaf【发布时间】:2014-01-1409:09:17【问题描述】:我正在使用Spring3和Thymeleaf制作一些网页,但我不知道如何显示这样... 查看详情

Thymeleaf + Spring (not Boot) - 如何显示来自 messageSource 的消息

】Thymeleaf+Spring(notBoot)-如何显示来自messageSource的消息【英文标题】:Thymeleaf+Spring(notBoot)-howtoshowmessagesfrommessageSource【发布时间】:2016-08-1315:43:19【问题描述】:我在使用Thymeleaf设置SpringMVC(不使用Boot,因为我在发现SpringInitializr... 查看详情