当前位置：首页 > 卖家故事 > UE5.1 利用WEBUI插件完成UE与JS的交互（UE5.1嵌入WEB）

UE5.1 利用WEBUI插件完成UE与JS的交互（UE5.1嵌入WEB）

时间：2024-03-25 10:01:42 来源：网络cs 作者：欧阳逸栏目：卖家故事阅读：

标签：交互完成利用

阅读本书更多章节>>>>

一、UE4显示Echart图表

二、UE调用JS（修改Echart图表数据）

三、JS调用UE（UE4中打印js传递过来的数据）

一、UE4显示Echart图表

步骤：

1.下载WEBUI插件

我的UE编辑器版本是4.24.3对应版本的插件下载地址是

webui 插件：链接：https://pan.baidu.com/s/1vaZiqre8K2GEueVJOtZ2fA?pwd=xsby
提取码：xsby

下载后解压放到Plugins文件夹中

2.在Echart上下载一个例子

我下载的例子的链接：

Examples - Apache ECharts

点击下载示例

3.下载的HTML文件放到Content 或其子文件夹内：

4. 修改该HTML代码：

<!--此示例下载自 https://echarts.apache.org/examples/zh/editor.html?c=bar-background--><!DOCTYPE html><html lang="zh-CN" style="height: 100%"><head>  <meta charset="utf-8"></head><body style="height: 100%; margin: 0">  <div id="container" style="height: 100%"></div>    <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/echarts.min.js"></script>  <!-- Uncomment this line if you want to dataTool extension  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/dataTool.min.js"></script>  -->  <!-- Uncomment this line if you want to use gl extension  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-gl@2/dist/echarts-gl.min.js"></script>  -->  <!-- Uncomment this line if you want to echarts-stat extension  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts-stat@latest/dist/ecStat.min.js"></script>  -->  <!-- Uncomment this line if you want to use map  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/china.js"></script>  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@4.9.0/map/js/world.js"></script>  -->  <!-- Uncomment these two lines if you want to use bmap extension  <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=YOUR_API_KEY"></script>  <script type="text/javascript" src="https://fastly.jsdelivr.net/npm/echarts@5.4.0/dist/extension/bmap.min.js"></script>  -->  <script type="text/javascript">    "object"!=typeof ue||"object"!=typeof ue.interface?("object"!=typeof ue&&(ue={}),ue.interface={},ue.interface.broadcast=function(e,t){if("string"==typeof e){var o=[e,""];void 0!==t&&(o[1]=t);var n=encodeURIComponent(JSON.stringify(o));"object"==typeof history&&"function"==typeof history.pushState?(history.pushState({},"","#"+n),history.pushState({},"","#"+encodeURIComponent("[]"))):(document.location.hash=n,document.location.hash=encodeURIComponent("[]"))}}):function(e){ue.interface={},ue.interface.broadcast=function(t,o){"string"==typeof t&&(void 0!==o?e.broadcast(t,JSON.stringify(o)):e.broadcast(t,""))}}(ue.interface),(window.ue4=ue.interface.broadcast);    var dom = document.getElementById('container');    var myChart = echarts.init(dom, null, {      renderer: 'canvas',      useDirtyRect: false    });    var app = {};        var option;    option = {  xAxis: {    type: 'category',    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']  },  yAxis: {    type: 'value'  },  series: [    {      data: [120, 200, 150, 80, 70, 110, 130],      type: 'bar',      showBackground: true,      backgroundStyle: {        color: 'rgba(180, 180, 180, 0.2)'      }    }  ]};    if (option && typeof option === 'object') {      myChart.setOption(option);    }    ue.interface.ue2js = function(ueData){      var jsonObj = JSON.parse(ueData);      myChart.setOption(jsonObj);    };    window.addEventListener('resize', myChart.resize);  </script></body></html>

5.创建一个控件蓝图