基於Spring MVC的ECharts動態數據實時展現

時間 2019-11-22

標籤基於 spring mvc echarts 動態數據實時展現欄目 Spring 简体版

原文原文鏈接

基於SpringMVC進行ECharts動態實時數據展現，ECharts的官網示例是前端的js動態隨機數據，沒有與後端程序進行交互，因爲本人以前對Spring MVC和ajax不太瞭解，因此，走了不少彎路，經過這部分的學習，讓本身對MVC架構和簡單的ajax有了初步的瞭解，下面就記錄一下本身搭建的這部分程序。javascript

首先須要配置web.xml，設置好servlet和filter，這部分能夠參考衆多spring示例，這裏就不贅述了。html

接下來就是須要將echarts的相關代碼寫入到一個jsp文件，代碼以下：前端

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> 
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    <html> 
    <head> 
    <title>line</title> 
     <script src="plugin/echarts.js"></script>
     <script src="plugin/jquery-1.8.2.min.js"></script>
    </head> 
     
    <body> 
           <h1>動態數據圖表展現</h1>
        <!-- 爲ECharts準備一個具有大小（寬高）的Dom --> 
         <div id="main" style="height:400px"></div> 
     
        <script type="text/javascript" language="javascript"> 
            var myChart; 
            var eCharts; 
     
            require.config({ 
                paths : { 
                    'echarts' : 'plugin' , 
                } 
            }); 
     
            require( 
                [ 'echarts',  
                  'echarts/chart/line',
                  'echarts/chart/bar'
                ], DrawEChart //異步加載的回調函數繪製圖表 
            ); 
     
            //建立ECharts圖表方法 
            function DrawEChart(ec) { 
                eCharts = ec; 
                myChart = eCharts.init(document.getElementById('main')); 
                myChart.showLoading({ 
                   text : "圖表數據正在努力加載..." 
                }); 
                //定義圖表options 
                var options = { 
                    title : { 
                        text : "將來一週氣溫變化", 
                        subtext : "純屬虛構", 
                        sublink : "http://www.baidu.com" 
                    }, 
                    tooltip : { 
                           show: true,
                        trigger : 'axis' 
                    }, 
                    legend : { 
                        data : [ "測試" ] 
                    }, 
                    toolbox : { 
                        show : true, 
                        feature : { 
                            mark : { show : true}, 
                            dataView : {show : true,  readOnly : false}, 
                            magicType : {show : true,  type : [ 'line', 'bar' ] }, 
                            restore : {show : true }, 
                            saveAsImage : {show : true } 
                        } 
                    }, 
                    calculable : true, 
                    xAxis : [ { 
                        type : 'category', 
                        boundaryGap : false, 
                        data : [ '1', '2', '3', '4', '5', '6', '7' ] 
                    } ], 
                    yAxis : [ { 
                        type : 'value', 
                        axisLabel : { 
                            formatter : '{value} °C' 
                        }, 
                        splitArea : { 
                            show : true 
                        } 
                    } ], 
                   grid : { 
                        width : '90%' 
                    }, 
                    series : [ { 
                        name : '最高氣溫', 
                        type : 'line', 
                        data : [ 1, 11, 18, 11, 15, 11, 8 ],//必須是Integer類型的,String計算平均值會出錯 
                        markPoint : { 
                            data : [
                                     {type : 'max', name : '最大值'},
                                     {type : 'min',  name : '最小值'}
                                     ] 
                        }, 
                        markLine : { 
                            data : [
                                     {type : 'average', name : '平均值'}
                                     ] 
                        } 
                    } ] 
                }; 
               
                myChart.setOption(options); //先把可選項注入myChart中 
                myChart.hideLoading();
                timeId = setInterval("getChartData();",2000);
                //getChartData();//aja後臺交互  
            } 
        </script> 
     
     
        <script type="text/javascript"> 
            function getChartData() { 
                //得到圖表的options對象 
                var options = myChart.getOption(); 
                //經過Ajax獲取數據 
                $.ajax({ 
                    type : "post", 
                    async : false, //同步執行 
                    url : "getDynmicLineData.do", 
                    data : {}, 
                    dataType : "json", //返回數據形式爲json
                    success : function(result) { 
                        if (result) { 
                            options.legend.data = result.legend; 
                            options.xAxis[0].data = result.category; 
                            options.series[0].data = result.series[0].data; 
                                                //alert(options.series[0].data);
                                               
                                                myChart.hideLoading();
                            myChart.setOption(options); 
                        } 
                    }, 
                    error : function(errorMsg) { 
                        alert("很差意思，大爺，圖表請求數據失敗啦!"); 
                        myChart.hideLoading(); 
                    } 
                }); 
            } 
        </script> 
    </body> 
    </html>

其中getChartData函數中主要是ajax的請求交互代碼部分，url : "getDynmicLineData.do"代碼是在調用getChartData函數時，ajax向後端程序所請求的URL，經過spring的配置，在控制類controller中進行設置@RequestMapping，來匹配動態響應的代碼。java

Controller類的代碼以下：jquery

package controller;
import java.util.ArrayList;
import java.util.Arrays;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import java.util.Random;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;
import service.PersonService;
import entity.EchartData;
import entity.Person;
import entity.Series;
@Controller
public class LoginController {
      
       //域名訪問跳轉到登陸頁
       @RequestMapping("/")   
       public String index(){   
              return "login";   
       }
      
       //登陸跳轉到首頁
       @RequestMapping(value="/login",method = RequestMethod.POST)
       public ModelAndView login(String nickname){
              ModelAndView mv = new ModelAndView();
              mv.setViewName("home/index");
              mv.addObject("nickname",nickname);
              return mv;
       }
      
//       //獲取動態信息
       @RequestMapping(value="/getDynmicLineData.do")
       @ResponseBody //添加該註釋後，返回值將由轉換器進行轉換，轉換器爲Jackson，因此會轉換成json格式
       public EchartData getDynmicLineData() { 
        List<String> legend = new ArrayList<String>(Arrays.asList(new String[]{"最高氣溫"}));//數據分組 
        List<String> category = new ArrayList<String>(Arrays.asList(new String []{"週一","週二","週三","週四","週五","週六","週日"}));//橫座標 
        List<Series> series = new ArrayList<Series>();//縱座標 
        
        Random random = new Random();
        int rand = random.nextInt();
        ArrayList<Long> temp = new ArrayList<>();
       
        for (int i = 0; i < 7; i++) {
               rand = Math.abs(random.nextInt()%50);
                     temp.add((long) rand);
              }
        series.add(new Series("最高氣溫", "line", temp)); 
        EchartData data=new EchartData(legend, category, series); 
        return data; 
    } 
}

至此，就完成了整個的數據交互的過程，前端javascript定時調用js函數，js函數中包含ajax動態請求代碼，其中的url匹配到後端的controller類中的@RequestMapping，而後經過return進行數據向前端發送，進而展現，以達到動態實時展現的目的。web