使用 GoEasy 实时监控注册用户量并实时反映到 ECharts 柱状图中

最新推荐文章于 2020-09-09 15:13:38 发布

程序猿秃头之路

最新推荐文章于 2020-09-09 15:13:38 发布

阅读量464

点赞数 1

分类专栏： Java后端文章标签： GoEasy 实时监控

本文链接：https://blog.csdn.net/zhang33565417/article/details/100023387

版权

Java后端专栏收录该内容

55 篇文章 13 订阅

订阅专栏

GoEasy 的基本使用请看这篇博客

思路：

在用户注册或者用户注销时调用的添加用户或者删除用户的方法处，使用GoEasy发布消息实时监控，一旦后台中发布了GoEasy，前台接收的GoEasy会立刻响应，拿到数据重新覆盖到 ECharts柱状图中

实现：

后台代码

    //用户注册数量
    @RequestMapping("registerCount")
    public Map<String,Object> registerCount(){
        Map<String, Object> map = new HashMap<>();
        int[] counts = new int[3];
        for (Integer i =0;i<3;i++){
            Integer count = userService.selectRegisterCount((i+1)*7);
            counts[i] = count;
        }
        map.put("count",counts);
        return map;
    }

    
    //增删改操作 前台用的是 JqGrid 
    @RequestMapping("operUser")
    public Map<String,Object> operUser(String oper, User user){
        HashMap map = new HashMap();
        if ("add".equals(oper)) {
            String id = userService.add(user);
            //一旦有用户注册，发布信息，实时监控
            GoEasy goEasy = new GoEasy("http://rest-hangzhou.goeasy.io", "xxxxxxxxxxxxxxxxxxx");
            goEasy.publish("my_channel", "OK");

            return setResultSuccessData(id);
        }
        if ("del".equals(oper)){
            //一旦有用户注销，发布信息，实时监控
            userService.deleteById(user.getId());
            GoEasy goEasy = new GoEasy("http://rest-hangzhou.goeasy.io", "xxxxxxxxxxxxxxxxxxxx");
            goEasy.publish("my_channel", "OK");
        }
        if("edit".equals(oper)) {
            String id = userService.update(user);
            return setResultSuccessData(id);
        }
        return setResultSuccess();
    }

前台代码

<body>
    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
    <div id="main" style="width: 1000px;height:500px;"></div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        //初始状态的柱状图显示
        $(function () {
            // 异步加载统计信息
            $.ajax({
                url:'${ctx}/user/registerCount',
                type:'POST',
                dataType:'JSON',
                success:function (data) {
                    console.log(data);
                    myChart.setOption({
                        title: {
                            text: '近三周用户注册数量'
                        },
                        tooltip: {},
                        legend: {
                            data:['用户注册']
                        },
                        xAxis: {
                            data: ["近一周","近两周","近三周"]
                        },
                        yAxis: {},
                        series: [{
                            name: '用户注册',
                            type: 'bar',
                            data: data.count
                        }]
                    });
                },
            });
        });

        //一旦后台中触发了添加或者删除操作使 GoEasy 发布了信息，此处立刻响应，并重新请求数据 覆盖掉柱状图原有数据
        var goEasy = new GoEasy({
            appkey: "xxxxxxxxxxxxxxxxxxxxxxx"
        });
        goEasy.subscribe({
            channel: "my_channel",
            onMessage: function (message) {
                //alert();
                $.ajax({
                    type:'POST',
                    url:'${ctx}/user/registerCount',
                    dataType:'JSON',
                    success:function (data) {
                        myChart.setOption({
                            xAxis: {
                                data: ["近一周","近两周","近三周"]
                            },
                            series: [{
                                data: data.count
                            }]

                        });
                    },
                });
            }
        });
    </script>
</body>

也有其他方法，可以在后台的添加和删除方法后面加上查询柱状图中数据，并将数据转换为 JSON格式存入GoEasy中，前台直接从GoEasy中取数据。

程序猿秃头之路

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
使用 GoEasy 实时监控注册用户量并实时反映到 ECharts 柱状图中

GoEasy 的基本使用请看这篇博客思路：在用户注册或者用户注销时调用的添加用户或者删除用户的方法处，使用GoEasy发布消息实时监控，一旦后台中发布了GoEasy，前台接收的GoEasy会立刻响应，拿到数据重新覆盖到 ECharts柱状图中实现：后台代码 //用户注册数量 @RequestMapping("registerCount")...
复制链接

扫一扫