lycfr opened a new issue, #21150:
URL: https://github.com/apache/echarts/issues/21150
### Version
5.4.3
### Link to Minimal Reproduction
无
### Steps to Reproduce
html
```
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ECharts 实时数据展示</title>
<!-- 引入ECharts -->
<script
src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js";></script>
<style>
/* 关键样式：让页面元素占满整个空间 */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 防止页面出现滚动条 */
}
/* 使用flex布局确保图表容器占满剩余空间 */
body {
display: flex;
flex-direction: column;
}
#chartContainer {
flex: 1; /* 这会让图表容器占满所有剩余空间 */
width: 100%;
}
</style>
</head>
<body>
<!-- 图表容器 -->
<div id="chartContainer"></div>
<script>
// 初始化图表变量
var chart;
var timeData = [];
var valueData = [];
// 初始化图表函数
function initChart() {
// 基于准备好的DOM，初始化echarts实例，使用SVG渲染器
chart = echarts.init(document.getElementById('chartContainer'),
null, {
renderer: 'svg'
});
// 设置图表配置项
var option = {
title: {
text: '实时随机数曲线',
left: 'center',
textStyle: { fontSize: 18 }
},
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'cross'
}
},
legend: {
data: ['随机数值'],
top: 30
},
grid: {
left: '5%',
right: '5%',
bottom: '10%',
containLabel: true
},
xAxis: {
type: 'category',
boundaryGap: false,
data: timeData,
name: '时间',
nameLocation: 'middle',
nameGap: 30
},
yAxis: {
type: 'value',
min: 0,
max: 100,
name: '数值',
nameLocation: 'middle',
nameGap: 50
},
series: [
{
name: '随机数值',
type: 'line',
data: valueData,
smooth: true,
symbol: 'circle',
symbolSize: 6,
lineStyle: {
width: 2
},
areaStyle: {
opacity: 0.2
}
}
]
};
// 使用配置项显示图表
chart.setOption(option);
// 窗口大小变化时重绘图表
window.addEventListener('resize', function() {
chart.resize(); // 关键：窗口大小变化时重新调整图表大小
});
}
// 添加数据点到图表
function addData(time, value) {
timeData.push(time);
valueData.push(value);
// 只保留最近的30个数据点，防止图表过于拥挤
if (timeData.length > 30) {
timeData.shift();
valueData.shift();
}
// 更新图表数据
chart.setOption({
xAxis: {
data: timeData
},
series: [
{
data: valueData
}
]
});
}
</script>
</body>
</html>
```
java
```
package com.meitu.record;
import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.scene.Scene;
import javafx.scene.control.Button;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;
import java.io.File;
import java.net.URL;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;
import java.util.Random;
import java.util.concurrent.Executors;
import java.util.concurrent.ScheduledExecutorService;
import java.util.concurrent.TimeUnit;
public class JavaWebView extends Application {
private boolean isRunning = false;
private ScheduledExecutorService executor;
private WebEngine webEngine;
private DateTimeFormatter formatter =
DateTimeFormatter.ofPattern("HH:mm:ss");
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("JavaFX + ECharts 实时随机数展示");
// 创建WebView和WebEngine来显示ECharts
WebView webView = new WebView();
webEngine = webView.getEngine();
// 加载外部的ECharts HTML文件
URL url = getClass().getResource("echart.html");
if (url != null) {
webEngine.load(url.toExternalForm());
} else {
System.err.println("无法找到echarts_realtime.html文件");
return;
}
// 等待页面加载完成后初始化图表
webEngine.getLoadWorker().stateProperty().addListener((obs,
oldState, newState) -> {
if (newState == javafx.concurrent.Worker.State.SUCCEEDED) {
initializeChart();
}
});
// 创建控制按钮
Button controlButton = new Button("开始");
controlButton.setOnAction(e -> {
if (isRunning) {
stopDataGeneration();
controlButton.setText("开始");
} else {
startDataGeneration();
controlButton.setText("停止");
}
isRunning = !isRunning;
});
// 设置按钮样式
controlButton.setStyle("-fx-font-size: 14px; -fx-padding: 8px
16px;");
// 布局设置
HBox controlBox = new HBox(controlButton);
controlBox.setPadding(new Insets(10));
controlBox.setSpacing(10);
controlBox.setStyle("-fx-alignment: center; -fx-background-color:
#f0f0f0;");
BorderPane root = new BorderPane();
root.setCenter(webView);
root.setBottom(controlBox);
Scene scene = new Scene(root, 1000, 600);
primaryStage.setScene(scene);
primaryStage.show();
// 关闭时停止执行器
primaryStage.setOnCloseRequest(e -> {
if (executor != null) {
executor.shutdownNow();
}
});
}
// 初始化图表
private void initializeChart() {
webEngine.executeScript("initChart()");
}
// 开始生成并发送数据
private void startDataGeneration() {
executor = Executors.newSingleThreadScheduledExecutor();
Random random = new Random();
// 每1秒生成一个随机数并发送到图表
executor.scheduleAtFixedRate(() -> {
// 生成0-100之间的随机数
double value = random.nextDouble() * 100;
// 获取当前时间
String time = LocalDateTime.now().format(formatter);
// 在JavaFX应用线程中更新UI
Platform.runLater(() -> {
// 调用JavaScript函数添加数据
webEngine.executeScript("addData('" + time + "', " + value +
")");
});
}, 0, 1, TimeUnit.SECONDS);
}
// 停止数据生成
private void stopDataGeneration() {
if (executor != null) {
executor.shutdown();
try {
if (!executor.awaitTermination(1, TimeUnit.SECONDS)) {
executor.shutdownNow();
}
} catch (InterruptedException e) {
executor.shutdownNow();
}
executor = null;
}
}
public static void main(String[] args) {
launch(args);
}
}
```
### Current Behavior
执行前
<img width="1000" height="628" alt="Image"
src="https://github.com/user-attachments/assets/00ae7a8d-f685-44ba-8fe6-76cabb5c68f1";
/>
执行后
<img width="1000" height="628" alt="Image"
src="https://github.com/user-attachments/assets/476cdc81-ad05-4f2f-b664-5eb33d454ccf";
/>
### Expected Behavior
无
### Environment
```markdown
- OS:
MacOS 使用的Java 17
- Browser:
- Framework:
```
### Any additional comments?
_No response_
--
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org.apache.org
For queries about this service, please contact Infrastructure at:
us...@infra.apache.org
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@echarts.apache.org
For additional commands, e-mail: commits-h...@echarts.apache.org
