关键词:
视频: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... 查看详情