116.echarts 动态 获取后台数据(定时刷新)

原创
2018/05/27 23:24
阅读数 2.6W

这个是是使用用maven +ssm 组成的  如果要运行  需要参考前面两个博客搭建 maven环境

代码  放到码云 上:

    

1. 效果

         

2. 代码

官方 demo:

    http://echarts.baidu.com/echarts2/doc/example.html

   2.1 前端

    <%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ECharts<</title>
 <script src="js/jquery-3.2.1.js"></script>
  <script src="js/echarts.min.js"></script>
</head>
<body>
       <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:400px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
    <script type="text/javascript">
    $(function(){
  
        setInterval(function(){setChartBar()}, 5*1000);    // 间歇执行  setChartBar是被调用的方法名称
     });
    
  //设置ajax访问后台填充柱图         http://localhost:8080/mavenssm20180519/index2.jsp
     function setChartBar(url){
         var Chart=echarts.init(document.getElementById("main"));//初始化
         //用户等待
         Chart.showLoading(
                 {text: 'Loding...'  }
        );
         //自定义变量
         var categories=[];
         var values=[];
         
         //发送Ajax请求
         $.ajax({
                   url : "${pageContext.request.contextPath }/getData.action",
                   dataType:"json",
                   type:'post',
                   success:function(json){
                       categories = json.categories;  //拿到后台的数据
                    values = json.values;   //拿到后台的数据
  //--------------------------官方的 开始--http://echarts.baidu.com/echarts2/doc/example/bar1.html-
                //将上面照片中demo代码替换  记得
                    var option = {
                    tooltip: {
                        show: true
                    },
                    legend: {
                        data:['销量']
                    },
                    xAxis : [
                        {
                            type : 'category',
                            data : categories //替换变量
                        }
                    ],
                    yAxis : [
                        {
                            type : 'value'
                        }
                    ],
                    series : [
                        {
                            "name":"销量",
                            "type":"bar",// 图像类型
                            "data":values  //替换变量
                        }
                    ]
                };

                  //--------------------------官方的 结束----------------------------------------
                    Chart.hideLoading();
                       Chart.setOption(option);  
                       }
                   });
         
         
         
         
  }
        
    </script>
</body>
</html>

2.2 后台代码

后台 需要的json数据格式

{"values":[80,50,75,100],"categories":["鞋","衬衫","外套","牛仔裤"]}

代码:

 

//http://localhost:8080/mavenssm20180519/echartspie.jsp  

 @RequestMapping(value="/getPieData.action")
    public void getPieData(HttpServletRequest request, HttpServletResponse response) throws IOException{
        response.setContentType("text/html; charset=utf-8");
        String[] label = {"搜索引擎","直接访问","邮件营销","联盟广告","视频广告"};
        String[] value = {"700","300","500","300","200"};  
        Map<String, Object> json = new HashMap<String, Object>();  
        json.put("label", label);
        json.put("value", value);  
        
        String jsonStri = JSONObject.toJSONString(json);//阿里  fastjson 转换json数据
        
        PrintWriter out=response.getWriter();
        out.println(jsonStri);
        out.flush();
        out.close();
        
    }

 

 

3. 改进版本

 

3.1 html

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <script src="../js/jquery-2.1.4.min.js"></script>
</head>
<body>
         <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:550px"></div>
    <!-- ECharts单文件引入   这里严格区分3.0 版本和2.0 版本   

     <script src="http://echarts.baidu.com/build/dist/echarts-all.js"></script><!-- 下面的是3.0版本的-->

-->

<!-- 下面的是2.0版本的-->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
      <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载
                'echarts/chart/line' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                
                $.get('${pageContext.request.contextPath }/getPieData.action').done(function (data) {//后台请求
                    var obj = JSON.parse(data);
                    var categories =obj.categories;
                    var label =obj.label;
                    var data =obj.data;
                   // console.log(categories) //控制台输出 方式一
                    //console.dir(categories)//控制台输出 方式二
                        //-------------------------替换开始----------------------------------------
                    var option={
                         title : {
                            text: '未来一周气温变化',
                            subtext: '纯属虚构'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:categories//分类线名称
                        },
                        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 : label//X轴
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value} °C'
                                }
                            }
                        ],
                        series : data//Y轴
                    };

                         //-------------------------替换结束----------------------------------------

                    // 为echarts对象加载数据 
                    myChart.setOption(option);
                });
               
         
            }
        );
    </script>
</body>
</html>

3.2 后台模拟数据

需要的数据格式:

/**
     * 2. 学习多条 数据图应该封装的json格式
     * getPieData
     * @param response
     * @throws IOException 
     */
    @RequestMapping(value="/getPieData")
    public  void getPieData(HttpServletResponse  response) throws IOException{
        //设置响应编码格式
        response.setContentType("text/html; charset=utf-8");
        String[] label = {"周一","周二","周三","周四","周五","周六","周日"};//数组
        String[] categories = {"最高气温","最低气温"};//数组
         int[] values = {80, 50, 75, 100,1,36,59};  
        int[] values2 = {60, 70, 45, 80, 50, 75, 100};  

        
            List<Weacher> list = new ArrayList<Weacher>();
                Weacher w1 = new Weacher();
                    w1.setName("最高气温");
                    w1.setType("line");
                    int[] data=values;
                    w1.setData(data);
                    w1.setSmooth(true);
                Weacher w2 = new Weacher();
                    w2.setName("最低气温");
                    w2.setType("line");
                    int[] data2=values2;
                    w2.setData(data2);
                    w2.setSmooth(true);
                    list.add(w1);
                    list.add(w2);
                    
            Map<String, Object> json = new HashMap<String, Object>();  
            json.put("label", label);  
            json.put("categories", categories); 
            json.put("data", list); 
                String jsonStri = JSONObject.toJSONString(json);

                System.out.println(jsonStri);
                //将结果以流的形式输出到请求位置
                PrintWriter out=response.getWriter();
                out.println(jsonStri);
                out.flush();
                out.close();
    }

 

4. 版本3  完全动态

4.1 效果

4.2  实现过程

4.2.1 前端

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
  <script src="../js/jquery-2.1.4.min.js"></script>
</head>
<body>
         <!-- 为ECharts准备一个具备大小(宽高)的Dom -->
    <div id="main" style="height:550px"></div>
    <!-- ECharts单文件引入 -->
    <script src="http://echarts.baidu.com/build/dist/echarts.js"></script>
      <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: 'http://echarts.baidu.com/build/dist'
            }
        });
        // 使用
        require(
            [
                'echarts',
                'echarts/chart/bar', // 使用柱状图就加载bar模块,按需加载
                'echarts/chart/line' // 使用柱状图就加载bar模块,按需加载
            ],
            function (ec) {
                // 基于准备好的dom,初始化echarts图表
                var myChart = ec.init(document.getElementById('main')); 
                $.get('${pageContext.request.contextPath }/getLineData.action').done(function (data) {
                    var obj = JSON.parse(data);
                    var categories =obj.categories;
                    var label =obj.label;
                    var data =obj.data;
                    //alert(data)
                    //console.log(categories)
                    //console.dir(categories)
                        //-------------------------替换开始----------------------------------------
                    var option={
                         title : {
                            text: '未来一周气温变化',
                            subtext: '纯属虚构'
                        },
                        tooltip : {
                            trigger: 'axis'
                        },
                        legend: {
                            data:categories//分类线名称
                        },
                        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 : label//X轴
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                axisLabel : {
                                    formatter: '{value} °C'
                                }
                            }
                        ],
                        series : data//Y轴
                    };
                         //-------------------------替换结束----------------------------------------

                    // 为echarts对象加载数据 
                    myChart.setOption(option);
                });
               
         
            }
        );
    </script>
</body>
</html>

4.2.2 后台

4.2.2.1 controller层

4.2.2.2 业务层

接口:

(****)实现类:

/**
     * 3. 根据数据库动态显示 折线图数量
     * @throws IOException 
     * 
     */
    public String queryJsonDataToShowLine(HttpServletResponse response) throws IOException {
        //3.1 返回日期
        List<String> listTime = testMavenSSMMapper.queryTime();
        //3.2 返回数组名称
        List<String> listCategories = testMavenSSMMapper.queryType();
        List<Object> listAllData =  new ArrayList<Object>();//存放map数据对象
        // 3.3 根据类型去查询 数据
        for (int i = 0; i < listCategories.size(); i++) {
            String type = listCategories.get(i);//根据类别去查询
            List<Integer> listData = testMavenSSMMapper.getListDataByType (type);
            Map<String, Object> map = new HashMap<String, Object>();  
            map.put("data", listData);
            map.put("name", type);
            map.put("smooth", true);
            map.put("type", "line");
            listAllData.add(map);//将每次的结果封装到map,再将map放到list
        }
         Map<String, Object> json = new HashMap<String, Object>();  
            json.put("label", listTime);  
            json.put("categories", listCategories); 
            json.put("data", listAllData); 
            String jsonStri = JSONObject.toJSONString(json);
        return jsonStri;
    }

4.2.3 mapper

数据库表结构及内容

内容:

接口:

映射文件

 

2018-08-16

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部