基於JFinal的實現echart與資料庫互動

使用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
         ]; //前端得到從後臺傳來的資料