商城首页欢迎来到中国正版软件门户
文章教程　|　产品大全　|　软件问答

您的位置：首页 >如何利用ECharts和Java接口实现实时监控的统计图表

如何利用ECharts和Java接口实现实时监控的统计图表

　　发布于2023-12-26　阅读（0）

扫一扫，手机访问

如何利用ECharts和Java接口实现实时监控的统计图表

在现今互联网时代，数据是公司运营与管理的重要保障，特别是实时监控统计图表更是每个企业在数据管理方面必须考虑的问题。ECharts是一款优秀的数据可视化库，可以轻松地呈现数据。本文将介绍如何使用ECharts和Java接口实现实时监控的统计图表。

  1. 前置条件

假设已经有一台服务器运行Java Web应用程序。我们需要安装ECharts并导入相关的JS库（echarts.js, echarts-gl.js, echarts-wordcloud.js）。

  1. 数据准备

为了展示数据的动态性，我们需要一个数据生产者和一个数据消费者。这两个组件可以通过Java线程来模拟。

数据生产者发送的消息应该包含一个日期字段和一个数值字段，这两个字段对应于用户需要监控的指标。数据消费者负责读取这些数据并将其发布到WebSocket。

在本文中，我们将使用MyBatis作为ORM框架，使用MySQL数据库存储数据。数据表如下：

CREATE TABLE statistics (
id bigint(20) unsigned NOT NULL AUTO_INCREMENT COMMENT '自增主键',
date datetime NOT NULL COMMENT '日期',
value float(11,2) NOT NULL COMMENT '指标值',
PRIMARY KEY (id)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COMMENT='业务指标数据统计';

  1. Java通知WebSocket

当数据变化时，我们需要将数据推送给WebSocket。我们可以使用Spring框架的WebSocket支持，如下所示：

@Configuration
@EnableWebSocket
public class WebSocketConfig implements WebSocketConfigurer {

@Override
public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) {
    registry.addHandler(statisticsHandler(), "/statistics");
}

@Bean
public WebSocketHandler statisticsHandler() {
    return new PermissiveWebSocketHandler();
}

}

public class PermissiveWebSocketHandler extends TextWebSocketHandler {

private final ObjectMapper objectMapper = new ObjectMapper();

@Autowired
private SimpMessagingTemplate messagingTemplate;

@Override
public void afterConnectionEstablished(WebSocketSession session) throws Exception {
    super.afterConnectionEstablished(session);
}

@Override
protected void handleTextMessage(WebSocketSession session, TextMessage message) throws Exception {
    super.handleTextMessage(session, message);
}

@Override
public void handleTransportError(WebSocketSession session, Throwable exception) throws Exception {
    super.handleTransportError(session, exception);
}

public void sendStatistics(Statistics statistics) throws JsonProcessingException {
    messagingTemplate.convertAndSend("/topic/statistics", objectMapper.writeValueAsString(statistics));
}

}

  1. ECharts绘制实时图表

我们创建一个HTML页面来显示数据，并使用ECharts库来绘制图表。以下是HTML代码示例：

<!DOCTYPE html>
<html>
<head>

<title>统计图表</title>
<meta charset="UTF-8">
<script src="https://cdn.jsdelivr.net/npm/echarts@4.5.0/dist/echarts.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-gl@1.1.4/dist/echarts-gl.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts-wordcloud@0.1.0/dist/echarts-wordcloud.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>
<body>
<div id="chart" style="width: 800px;height:400px;"></div>
<script>

var myChart = echarts.init(document.getElementById('chart'));
var xs = [];
var ys = [];
var now = new Date();
var value = 0;

function updateData() {
    var xhr = new XMLHttpRequest();

    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var response = JSON.parse(xhr.responseText);
            var date = response.date;
            var value = response.value;

            xs.push(date.substr(11, 8));
            ys.push(value);

            if (xs.length > 10) {
                xs.shift();
                ys.shift();
            }

            myChart.setOption({
                xAxis: {
                    data: xs
                },
                series: [{
                    name: '指标值',
                    data: ys
                }]
            });
        }
    };
    xhr.open("GET", "http://localhost:8080/statistics/realtime", true);
    xhr.send();
}

setInterval(function () {
    updateData();
}, 1000);

</script>
</body>
</html>

  1. 实现Java Web服务

我们创建一个Spring MVC控制器来处理HTTP请求和WebSocket消息，以下是代码示例：

@Controller
@RequestMapping("/statistics")
public class StatisticsController {

@Autowired
private JdbcTemplate jdbcTemplate;

@Autowired
private PermissiveWebSocketHandler statisticsHandler;

@GetMapping("/realtime")
@ResponseBody
public Statistics getRealtimeStatistics() {
    Statistics statistics = jdbcTemplate.queryForObject("SELECT * FROM statistics ORDER BY id DESC LIMIT 1",
            (resultSet, i) -> new Statistics(
                    resultSet.getLong("id"),
                    resultSet.getTimestamp("date"),
                    resultSet.getFloat("value")
            ));
    statisticsHandler.sendStatistics(statistics);
    return statistics;
}

}

  1. 数据生产者

为了模拟实时生成数据，我们创建一个Java线程，它每秒钟生成一个新的随机数作为数据。以下是代码示例：

public class StatisticsProducer implements Runnable {

private Random random = new Random();

@Autowired
private JdbcTemplate jdbcTemplate;

@Override
public void run() {
    while (true) {
        Float value = random.nextFloat() * 100.0f;

        Statistics statistics = new Statistics(null, new Timestamp(System.currentTimeMillis()), value);

        jdbcTemplate.update("INSERT INTO statistics VALUES (NULL, ?, ?)", statistics.getDate(), statistics.getValue());

        try {
            Thread.sleep(1000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }
    }
}

}

  1. 启动应用程序

我们可以使用Spring Boot启动应用程序，并创建一个新线程来运行数据生产者。以下是示例代码：

@SpringBootApplication
public class StatisticsApplication {

public static void main(String[] args) {
    ConfigurableApplicationContext context = SpringApplication.run(StatisticsApplication.class, args);

    StatisticsProducer producer = new StatisticsProducer();
    context.getAutowireCapableBeanFactory().autowireBean(producer);
    new Thread(producer).start();
}

}

到此为止，我们就可以实时地监控一些业务数据并展示它们的历史走势了。希望这篇文章能够帮助你使用ECharts和Java接口创建实时监控的统计图表。

本文转载于：互联网 如有侵犯，请联系zhengruancom@outlook.com删除。
免责声明：正软商城发布此文仅为传递信息，不代表正软商城认同其观点或证实其描述。

上一篇：异步协程开发技巧：实现高效的API接口调用

下一篇：Vue和Vue-Router: 如何在组件中使用路由信息？

产品推荐

最新发布

相关推荐

热门关注
网站备案号： 苏ICP备2026018738号-1 联系邮箱：zhengruancom@outlook.com
Copyright ©2018-2020