使用echart时,经常会用于显示数据库中的数据,但官方给的demo中的数据都是写死的,没有与数据库交互。实现了一下与数据库的交互,大致流程如下:
1.前端部分
新建html文件,引入echart的js文件。在页面中为Echart准备好大小固定的Dom,并设定好id。可以理解成给echart指定一个有名字的容器。准备好Dom后就在<script>中初始化。使用echart的init进行初始化,在Option中设定图标参数,横坐标纵坐标的数值等信息可以自定义数组来赋值。示例如下:
var myChart = echarts.init(document.getElementById('main'));
var dataAxis = [ //x轴数据
#for(g:chart)
'#(g.time)',
#end
];
var dataYxis=[ //y轴数据
#for(g:chart)
#(g.temperature),
#end
];
// 指定图表的配置项和数据
var option = {
title: {
text: '温度折线图'
},
tooltip: {
trigger: 'axis'
},
legend: {
data:['温度']
},
calculable : true,
xAxis: {
type : 'category',
name:'时间',
data:dataAxis,
axisLabel : {
interval:0,
rotate:20,
}
},
yAxis: {
type:'value',
name:'温度/℃'
},
series: [{
name: '温度',
type: 'line',
data:dataYxis
}]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
2.后端部分
在Controller中通过Model层的方法得到所需数据对象的list,通过setAttr()方法设置携带参数模板传到前端页面,前端通过#for #end 循环得到所需数据。
例:List<Monitor> monitor = new Monitor().getchartList();
setAttr("chart", monitor);//从数据库得到对象
var dataAxis = [ //x轴数据
#for(g:chart)
'#(g.time)',
#end
]; //前端得到从后台传来的数据