现在我需要在一个html页面中，通过thymeleaf模板读取一个从后端传来的一个list集合数据，而读取到这个list集合后我还要分别取它的每个元素中的createTime属性的值作为曲线图的横轴，data属性的值作为折线图的竖轴，然后通过折线图展示出来。
前端代码部分：
<!DOCTYPE html>
<!--suppress ThymeleafVariablesResolveInspection -->
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
<meta charset="UTF-8">
<title>设备详细</title>
<th:block th:include="include :: header('设备详细')" />
<script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
</head>
<body>
<div class="main-content">
<form class="form-horizontal" th:each="inforTencent,state: ${inforTencentList}">
<script th:inline="javascript">
dataList.push([[${inforTencent.createTime}]]);
dataList.push([[${inforTencent.data}]]);
</script>
</form>
</div>
<div id="box" style="width: 600px;height:400px;"></div>
<script th:inline="javascript">
var dataList = [];
var createTimeList = [];
// 获取到这个DOM节点，然后初始化
var myChart = echarts.init(document.getElementById("box"));
// option 里面的内容基本涵盖你要画的图表的所有内容
var option = {
backgroundColor: '#FBFBFB',
tooltip : {
trigger: 'axis'
},
legend: {
data:['数据']
},
calculable : true,
xAxis : [
{
axisLabel:{
rotate: 30,
interval:0
},
axisLine:{
lineStyle :{
color: '#CECECE'
}
},
type : 'category',
boundaryGap : false,
data : function (){
var list = [];
for (var i =0; i <= createTimeList.length; i++) {
list.push(createTimeList[i]);
}
return list;
}()
}
],
yAxis : [
{
type : 'value',
axisLine:{
lineStyle :{
color: '#CECECE'
}
}
}
],
series : [
{
type:'line',
//symbol:'none',
smooth: 0.2,
color:['#66AEDE'],
data:function (){
var list = [];
for (var i =0; i <= dataList.length; i++) {
list.push(dataList[i]);
}
return list;
}()
}
]
};
myChart.setOption(option);
</script>
</body>
</html>
运行后仍然没办法正确展示这个折线图，报我试图访问一个名为"dataList"的变量，但是这个变量并没有被定义
我想请问一下该如何修改，才可以令这个折线图展示出来。
大概需求：读取后端传来的一个list集合，将集合元素中的createTime属性的值作为曲线图的横轴，data属性的值作为曲线图的竖轴，然后通过折线图展示出来。
请教一下各位有没有谁帮忙修改一下这个页面，已经困惑好几天了，谢谢大家。
