2021-07-21学习笔记ajax配合ECharts

最新推荐文章于 2024-06-19 23:29:50 发布

Jason980915

最新推荐文章于 2024-06-19 23:29:50 发布

阅读量229

点赞数

本文链接：https://blog.csdn.net/Jason980915/article/details/118958678

版权

1 .在昨天的项目上新建util包，创建拦截器新建MyInterceptor文件implements HandlerInterceptor，

2.添加拦截器方法

preHandle、

postHandle、

afterCompletion

3.在applicationContext.xml中配置拦截器

<mvc:interceptors>
        <mvc:interceptor>
            <mvc:mapping path="/**"/>
            <mvc:exclude-mapping path="/resource/**"/>
            <bean class="com.pro.util.MyInterceptor"/>
        </mvc:interceptor>
    </mvc:interceptors>

<mvc:exclude-mapping path="/resource/**"/>是拦截resource里所有的资源

4.监听器

在util中新建MyListener，ServletContextListener, ServletRequestListener

package com.pro.util;

import javax.servlet.*;
import java.text.SimpleDateFormat;
import java.util.ArrayList;
import java.util.Date;
import java.util.List;

public class MyListener implements ServletContextListener, ServletRequestListener {
    //应用的监听 初始化
    public void contextInitialized(ServletContextEvent servletContextEvent) {
        //存时间
        List<String> dateList = new ArrayList<String>();
        //访问次数
        List<String> countList = new ArrayList<String>();
        //拿到最大的作用域，
        ServletContext application = servletContextEvent.getServletContext();
        application.setAttribute("dateList", dateList);
        application.setAttribute("countList", countList);
    }

    //应用的监听 销毁
    public void contextDestroyed(ServletContextEvent servletContextEvent) {

    }

    //请求的监听 销毁
    public void requestDestroyed(ServletRequestEvent servletRequestEvent) {

    }

    //请求的监听，初始化
    public void requestInitialized(ServletRequestEvent servletRequestEvent) {
        //只要一访问，我们就先获取容器，再往里面存放时间几次数
        ServletContext application = servletRequestEvent.getServletContext();

        List<String> dateList = (List<String>) application.getAttribute("dateList");
        List<Integer> countList = (List<Integer>) application.getAttribute("countList");


        //取到当前访问时间
        SimpleDateFormat sdf = new SimpleDateFormat("HH:mm");
        //得到当前时间的小时和分钟
        String dt = sdf.format(new Date());
        //将上面获取的当前时间，去集合中查找，如果找不到，返回-1
        int index = dateList.indexOf(dt);
        if (index == -1) {
            dateList.add(dt);
            countList.add(1);
            application.setAttribute("dateList", dateList);
            application.setAttribute("countList", countList);
        }else{
            //如果是第n次，则在找到的时间点上，把对应的访问次数+1
         countList.set(index,countList.get(index)+1);
        }
    }
}

5 编写XxController

@Controller
public class XxController {

    @RequestMapping("/getData")
    @ResponseBody
    public Object getData(HttpServletRequest request) {
        ServletContext application = request.getServletContext();
        List<String> dateList = (List<String>) application.getAttribute("dateList");
        List<Integer> countList = (List<Integer>) application.getAttribute("countList");

        Map<String,Object> maps = new HashMap<String, Object>();
        maps.put("dateList",dateList);
        maps.put("countList",countList);

        return maps;
    }
}

6 xx.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="resource/js/echarts.min.js"></script>
    <script src="resource/js/jquery-3.6.0.min.js"></script>

</head><body>
<!-- 为ECharts准备一个具备大小（宽高）的Dom -->
<div id="main" style="width: 600px;height:400px;"></div>
<script type="text/javascript">
    $(function () {

    });

    function f() {
        $.ajax({
            url:'getData',
            type:'get',
            dataType:'json',
            success:function (data) {
                // 基于准备好的dom，初始化echarts实例
                var myChart = echarts.init(document.getElementById('main'));
                // 指定图表的配置项和数据
                option = {
                    xAxis: {
                        type: 'category',
                        data: data.dateList
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: data.countList,
                        type: 'line',
                        smooth: true
                    }]
                };
                /* var option = {
                     title: {
                         text: 'ECharts 入门示例'
                     },
                     tooltip: {},
                     legend: {
                         data:['销量']
                     },
                     xAxis: {
                         data:data.dateList
                     },
                     yAxis: {},
                     series: [{
                         name: '销量',
                         type: 'line',
                         data: data.countList
                     }]
                 };*/
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);

            }
        });
    }

    setInterval("f()",1000);
</script>
</body>
</html>

7.访问getData没有数据显示为null

找到问题是没有配置监听器

web.xml

 <!--监听器-->
    <listener>
        <listener-class>com.pro.util.MyListener</listener-class>
    </listener>

8使用ECharts实时显示点击率

Jason980915

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2021-07-21学习笔记ajax配合ECharts

1 .在昨天的项目上新建util包，创建拦截器新建MyInterceptor文件implements HandlerInterceptor，2.添加拦截器方法preHandle、postHandle、afterCompletion3.在applicationContext.xml中配置拦截器<mvc:interceptors> <mvc:interceptor> <mvc:mapping pat.
复制链接

扫一扫