基于Spring MVC的ECharts动态数据实时展示

原创
2015/08/12 09:41
阅读数 5.5K

    基于SpringMVC进行ECharts动态实时数据展示,ECharts的官网示例是前端的js动态随机数据,没有与后端程序进行交互,由于本人之前对Spring MVC和ajax不太了解,所以,走了很多弯路,通过这部分的学习,让自己对MVC架构和简单的ajax有了初步的了解,下面就记录一下自己搭建的这部分程序。

    首先需要配置web.xml,设置好servlet和filter,这部分可以参考众多spring示例,这里就不赘述了。

    接下来就是需要将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,来匹配动态响应的代码。

Controller类的代码如下:

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进行数据向前端发送,进而展示,以达到动态实时展示的目的。

展开阅读全文
打赏
2
13 收藏
分享
加载中
更多评论
打赏
0 评论
13 收藏
2
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部