如何利用ECharts和Java接口实现实时监控的统计图表
在现今互联网时代，数据是公司运营与管理的重要保障，特别是实时监控统计图表更是每个企业在数据管理方面必须考虑的问题。ECharts是一款优秀的数据可视化库，可以轻松地呈现数据。本文将介绍如何使用ECharts和Java接口实现实时监控的统计图表。
假设已经有一台服务器运行Java Web应用程序。我们需要安装ECharts并导入相关的JS库（echarts.js, echarts-gl.js, echarts-wordcloud.js）。
为了展示数据的动态性，我们需要一个数据生产者和一个数据消费者。这两个组件可以通过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='业务指标数据统计';
当数据变化时，我们需要将数据推送给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));
}}
我们创建一个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>
我们创建一个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;
}}
为了模拟实时生成数据，我们创建一个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();
}
}
}}
我们可以使用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接口创建实时监控的统计图表。
