echarts 在springboot+thymeleaf中的使用

想看一下每天自己不同工作的时间分布,就准备用一下echarts
因为想要显示存储在数据库中的数据,所以就需要把后台的数据传到ajax里.
网上基本上都是在servlet中建一个数组,在前端把含有属性值得对象放到data里.因为项目用的是thymeleaf 所以查询的数据就直接存放在list中,需要遍历出来.记录一下整个echarts完成的流程,希望对新人使用echarts 会有所帮助.

关于ssm项目的搭建和数据库连接已经在其他的文章中写过了,就不重复了.数据库中主要的两列是count和name存放的是时间的名称和对应的数字,(这里是把十七个小时分成了34份)

对应的二次echat Class中的两个属性是
dName和dCount

背景交代完毕

• 先是看了一下eharts官方的文档,关于异步处理的,文档中给出的例子是通过timeout来模拟ajax的,异步修改的是一组静态数据,第一步就先将timeout模式改了ajax,亲测有效.进行下一步,将静态数据修改为数据库中的数据.

• 因为饼状图是有两个属性的,不能直接用model,尝试了不少的方法,最后觉得还是建一个json类,然后将json类储存到list中,给data返回一个list是最方便的.这里涉及到了th标签在js中使用的问题.首先需要加上 th:inline="javascript",然后是注释/**/注释的作用是防止有一些符号影响到build项目,所以加上还是比较好的. 然后用js

var obj = {value: [[${list.dCount}]], name: [[${list.dName}]]};

声明一个类,然后属性值是遍历了model出来的list中的count和name,要注意是遍历了在serverlet中存储数据model的list.

然后把类存在list中

nameList.push(obj1)
console.log(JSON.stringify(valueList));

然后把这个list返回给data就行了

• 在写的时候出现了一个问题,就是看到网页刷新了好几次,最后只显示了最后一条数据,后来看了一下,是因为把var list写在了success的function中,这样会一直新建list,只要把list放到声明的function中就可以了.
  整体代码如下,感觉写的有点麻烦了 希望有大神指点下