基于JFinal的实现echart与数据库交互

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Der_Jiang/article/details/79059255

使用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
         ]; //前端得到从后台传来的数据