在数字孪生场景中，常常伴随着数据可视化的需求。更多视频中使用虚幻的用户界面蓝图实现可视化功能，但大部分图表均是静态生成，只是达到了炫酷效果，想要实现类似于 Echarts 这种的动态可视化数据需要使用 C++ 实现。

下面推荐一种使用 JS 实现数据可视化 和 UE 中 actor 相互交互的方案，此方案可以极大减轻开发成本，轻量切灵活。

实现效果

环境搭建与运行

此插件有 地球可视化工作室 提供

下载 ThirdParty_1.0.8 版本安装并环境变量

下载 ESWebView5.3_24.07.15_T1.0.6 插件，根目录文件必须命名为 ESWebView ，创建 C++ UE 项目。在 UE 项目中创建 Plugins目录用于存放 ESWebView

环境构建好后需要使用 Visual Studio Solution 运行，运行根目录中的xxx.sln 文件

---

构建 ESWebView 用户界面

创建用户界面蓝图

1. 搜索 ESWebBorwser 组件拖入到画布中
2. 将组建提升为变量，供其他蓝图中调用
3. 勾选 Supports Transparency 事件穿透属性
4. 设置浏览器帧率 Browser Frame Rate 默认 60 FPS
5. 勾选 Support IMEMode 支持键盘输入
6. 设置 透明度阈值 Mouse Penetration Threshold 默认为 0

创建通用蓝图类

将上方的 用户界面蓝图 挂在到视图上，并提升为变量。找到 ESWeb 实例提供了 load URL 节点用于加载初始化网址

JS 调用 UE 中的函数

在蓝图关卡中声明函数，下图图函数中主要实现了 actor 中静态网格体改期了后期渲染状态，通过暴露函数和参数供 JS 端调用

在开始事件时将该整个关卡中的函数暴露出去，供 JS 调用

JS 代码

<script setup lang="ts">
    const status = ref(true);
    const handleClick =async ()=>{
        status.value = status.value?false:true;
        const result = await (window as any).ue.demo01.selectedcomponent(status.value);
    }
</script>

在 UE 运行时，此关卡的函数会自动挂在到 window 对象中。

---

UE 调用 JS 中的函数

在 JS 创建函数供 UE 调用，全部供UE的函数都需要挂载 window 对象上

<script setup lang="ts">
import {ref} from "vue"
const xxx = ref(false)
​
const containerShow = ()=>{
  xxx.value = true;
  console.log("xxxxx")
}
​
(window as any).containerShow = containerShow;
</script>

在 UE 中点击指定 静态网格体 开启显示局部页面，在标签面板中创建一个标识数据

在关卡蓝图中通过射线检测，过滤出指定物体，调用 JS 方法

软件下载地址 支持UE5.3版本
链接：https://pan.baidu.com/s/1QQcLWViHcW6-SIjJcKe6Vg?pwd=9erz
提取码：9erz