Web前端笔记-通过Thymeleaf把数组传输给echarts并显示曲线图
目录
最终结果
过程
最终结果
截图如下：
这里的数据都是从Mysql数据库中直接读取到的，下面演示下过程，把后端的数据通过Thymeleaf，把数组传输给前端的JS。
过程
这里曲线的存储结构是这样的：
其中的getDataList()的结构是这样的
这里可以看到是一个存储了String的ArrayList，其中里面的数据其实是Mysql中的数据，数据如下：
前端处理的关键如下：
这里要注意：<script这里一定要加 in:inline="javascript"
并且使用var这个JavaScript的万金油去处理；
曲线显示的时候，这样处理就可以了：
相关源码如下：
<script th:inline="javascript">var dataList = [[${curveData1}]];console.log(dataList);var dom = document.getElementById("container");var myChart = echarts.init(dom);option = null;option = {xAxis: {type: 'category',data: ['00:00', '00:05', '00:10', '00:15', '00:20', '00:25', '00:30', '00:35', '00:40', '00:45', '00:50', '00:55','01:00', '01:05', '01:10', '01:15', '01:20', '01:25', '01:30', '01:35', '01:40', '01:45', '01:50', '01:55','02:00', '02:05', '02:10', '02:15', '02:20', '02:25', '02:30', '02:35', '02:40', '02:45', '02:50', '02:55','03:00', '03:05', '03:10', '03:15', '03:20', '03:25', '03:30', '03:35', '03:40', '03:45', '03:50', '03:55','04:00', '04:05', '04:10', '04:15', '04:20', '04:25', '04:30', '04:35', '04:40', '04:45', '04:50', '04:55','05:00', '05:05', '05:10', '05:15', '05:20', '05:25', '05:30', '05:35', '05:40', '05:45', '05:50', '05:55','06:00', '06:05', '06:10', '06:15', '06:20', '06:25', '06:30', '06:35', '06:40', '06:45', '06:50', '06:55','07:00', '07:05', '07:10', '07:15', '07:20', '07:25', '07:30', '07:35', '07:40', '07:45', '07:50', '07:55','08:00', '08:05', '08:10', '08:15', '08:20', '08:25', '08:30', '08:35', '08:40', '08:45', '08:50', '08:55','09:00', '09:05', '09:10', '09:15', '09:20', '09:25', '09:30', '09:35', '09:40', '09:45', '09:50', '09:55','10:00', '10:05', '10:10', '10:15', '10:20', '10:25', '10:30', '10:35', '10:40', '10:45', '10:50', '10:55','11:00', '11:05', '11:10', '11:15', '11:20', '11:25', '11:30', '11:35', '11:40', '11:45', '11:50', '11:55','12:00', '12:05', '12:10', '12:15', '12:20', '12:25', '12:30', '12:35', '12:40', '12:45', '12:50', '12:55','13:00', '13:05', '13:10', '13:15', '13:20', '13:25', '13:30', '13:35', '13:40', '13:45', '13:50', '13:55','14:00', '14:05', '14:10', '14:15', '14:20', '14:25', '14:30', '14:35', '14:40', '14:45', '14:50', '14:55','15:00', '15:05', '15:10', '15:15', '15:20', '15:25', '15:30', '15:35', '15:40', '15:45', '15:50', '15:55','16:00', '16:05', '16:10', '16:15', '16:20', '16:25', '16:30', '16:35', '16:40', '16:45', '16:50', '16:55','17:00', '17:05', '17:10', '17:15', '17:20', '17:25', '17:30', '17:35', '17:40', '17:45', '17:50', '17:55','18:00', '18:05', '18:10', '18:15', '18:20', '18:25', '18:30', '18:35', '18:40', '18:45', '18:50', '18:55','19:00', '19:05', '19:10', '19:15', '19:20', '19:25', '19:30', '19:35', '19:40', '19:45', '19:50', '19:55','20:00', '20:05', '20:10', '20:15', '20:20', '20:25', '20:30', '20:35', '20:40', '20:45', '20:50', '20:55','21:00', '21:05', '21:10', '21:15', '21:20', '21:25', '21:30', '21:35', '21:40', '21:45', '21:50', '21:55','22:00', '22:05', '22:10', '22:15', '22:20', '22:25', '22:30', '22:35', '22:40', '22:45', '22:50', '22:55','23:00', '23:05', '23:10', '23:15', '23:20', '23:25', '23:30', '23:35', '23:40', '23:45', '23:50', '23:55'],axisLabel: {color: "#ffff"}},yAxis: {type: 'value',axisLabel: {color: "#ffff"}},series: [{//data: [100, 932, 901, 934, 1290, 1330, 1320],data: dataList,type: 'line',smooth: true}]};;if (option && typeof option === "object") {myChart.setOption(option, true);}
</script>Web前端笔记-通过Thymeleaf把数组传输给echarts并显示曲线图相关推荐
- Web前端 笔记 （21-45）
Web前端 笔记 (21-45) 21.嵌套列表 1.概念 2.有(无)序列表嵌套 3.定义列表嵌套 22.表格标签 1.种类 2.举例 未加语义化标签 添加语义化标签 23.表格属性 1.常见表格属 ...
- Web前端笔记（三）
Web前端笔记记录(三) position定位 relative相对定位 absolute绝对定位 脱离文档流 使内联支持宽高 使块元素默认宽根据内容决定(让块具备内联的特性) 如果有定位祖先元素相对 ...
- 初学者入门web前端 C#基础知识：数组与集合
对于初学者,想要入门web前端,要有足够的信念和坚持,不然只会越走越远,我现在就深深的体会到. 我本是一个很拒绝代码的人,以前想过UI设计,但是在这段学习时间里,发现其实只要认真,代码并不是很难 所以 ...
- Web前端笔记（1）
1. web前端三大核心技术: HTML: 结构 CSS: 样式 JavaScript: 行为 HTML基本结构与属性: html超文本标记语言,标准通用标记下的一个应用,是网页制作的必备的编程语言. ...
- Web前端笔记(标签)
目录 Web前端知识点 HTML 标签的语法 html标签 主体框架 常用标签 标题标签 段落标签 字体倾斜.加粗.下划线 强调内容 预设标签 字体标签 分割线 实体字符 图片标签 视频标签 音频标签 ...
- WEB前端笔记第一天
什么是WEB前端? 简单来说就是网页,只是这个网页它是由多种技术参与制作的,用来向用户展示的页面. HTML(hyperText mark-up language):它决定了网页的结构. CSS:网页 ...
- （web前端笔记）2020-12-23（ajax）
From web sites to web applications client/server bs架构带来了和cs架构完全不同的形式 basic three-tier(三次架构) user int ...
- Web前端笔记-HTML加载SVG图片及简单修改
加载的用img标签,就可以了,就把他当成普通图片即可,如: <img src="icon/cash-coin.svg" /> 图片是这样的: 在前端的效果就这样了. 简 ...
- 前端笔记-利用thymeleaf隐藏显示input及label
先来看看效果: 这里有一个add.html,添加,修改都使用这个文件,当点击添加后: add.html被构造成这样(点击添加后): 当点击编辑后: 对应的前端源码如下: <!DOCTYPE ht ...
最新文章
- 数据中心成投资新宠 今年或再创历史纪录
- .net环境iis执行php,十步！轻松搞定IIS+PHP环境
- c#进阶（4）—— Redis 用于消息队列的存储
- 废弃P-value，还是学学如何评估统计检验结果？
- 消息队列 (1) mac安装RabbitMQ
- opendir函数和readdir函数内涵及用法
- 怎样高效地管理自己阅读过的文献资料？
- android 互传文件,堪比隔空投送！iPhone和安卓、PC互传文件的3种方法，建议收藏...
- sunShine问题
- 用c语言做一个栈，完成逆波兰表达式
- Noob Notes(6)——VScode常见配置、插件推荐以及常见问题（一）（Error Lens 不显示错误的原因和解决方案）
- python利用mysql数据库实现一个中英文翻译程序兼单词试卷生成并改阅功能，并可以爬取有道官网进行在线翻译。
- 网络核心交换机和普通交换机有什么区别？
- 线性表：链表的基本操作
- vs2017+ivf+abaqus
- (dum(b)ug)
- 基于北斗RDSS短报文的海洋浮标在线水质/气象综合监测系统
- 判别两棵树是否相等 设计算法_BAIR最新RL算法超越谷歌Dreamer，性能提升2.8倍
- 阿里旺旺输入框内光标排在右侧，想让其排在左侧解决办法
- 12.区块链系列之比特币NFT