apache / apache/echarts

[Bug] javafx使用webview调用echarts的实时line曲线出现title、legend、Y轴显示有问题

Open
#21,150 0 comments 0 reactions 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.4.3

### Link to Minimal Reproduction

### Steps to Reproduce

html
```


ECharts 实时数据展示



/* 关键样式:让页面元素占满整个空间 */
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden; /* 防止页面出现滚动条 */
}

/* 使用flex布局确保图表容器占满剩余空间 */
body {
display: flex;
flex-direction: column;
}

#chartContainer {
flex: 1; /* 这会让图表容器占满所有剩余空间 */
width: 100%;
}

// 初始化图表变量
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
}
]
});
}

```

java
```
package com.lyyd.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

执行前

Image

执行后

Image

### Expected Behavior

### Environment

```markdown
- OS:
MacOS 使用的Java 17
- Browser:
- Framework:
```

### Any additional comments?

_No response_

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.