Web前端笔记-通过Thymeleaf把数组传输给echarts并显示曲线图

目录

 

 

最终结果

过程


 

最终结果

截图如下:

Web前端笔记-通过Thymeleaf把数组传输给echarts并显示曲线图_第1张图片

这里的数据都是从Mysql数据库中直接读取到的,下面演示下过程,把后端的数据通过Thymeleaf,把数组传输给前端的JS。

 

过程

这里曲线的存储结构是这样的:

其中的getDataList()的结构是这样的

这里可以看到是一个存储了String的ArrayList,其中里面的数据其实是Mysql中的数据,数据如下:

Web前端笔记-通过Thymeleaf把数组传输给echarts并显示曲线图_第2张图片

前端处理的关键如下:

这里要注意:

并且使用var这个JavaScript的万金油去处理;

曲线显示的时候,这样处理就可以了:

Web前端笔记-通过Thymeleaf把数组传输给echarts并显示曲线图_第3张图片

相关源码如下:

 

你可能感兴趣的:(JavaScript,web前端)