UE4 通过Echarts实现各种统计图

主要内容:

本文主要讲解UE4 UMG向网页发送数据,通过WebBrowser插件将用Echarts定制好的统计图在UE4内展现出来,达到数据可视化的效果,本文主要演示柱形图的效果,其它类型的统计图可以结合Echarts官方案列以及文档自行修改。

实现步骤:

1.启用UE4自带的WebBrowser插件
在这里插入图片描述
2.在项目的Content文件夹里创建一个新文件夹用于存放两个JS文件和一个HTML文件
在这里插入图片描述
echarts.min.js:js插件,用来自定义统计图样式
getQueryVariable.js:js用来获取URL参数的方法
index.html:一个网页文件
这几个文件稍后我会提供免费下载地址

3.创建UMG设计布局以及功能实现
在这里插入图片描述
SupportsTransparency:打勾就会使传进来的网页的背景透明,可以自定义网页背景,不勾就会是网页本来的背景
IntialURL:可填可不填,如果不填就看不到动画效果,如果要填就用浏览器打开html文件获取网页地址然后复制粘贴在这里插入图片描述
在这里插入图片描述在这里插入图片描述

在这里插入图片描述
4.最终效果以及下载地址(4.25)
在这里插入图片描述
链接:https://pan.baidu.com/s/1PFm8qTzM7-zqEFiv19NAuw
提取码:wrw2

  • 9
    点赞
  • 53
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
UE4 ECharts是指在Unreal Engine 4中使用ECharts实现数据可视化的功能。具体实现步骤如下: 1. 首先,需要启用UE4自带的WebBrowser插件。 2. 在项目的Content文件夹里创建一个新文件夹,用于存放ECharts所需的文件。这些文件包括echarts.min.js(用于自定义统计图样式)、getQueryVariable.js(用于获取URL参数的方法)、index.html(一个网页文件)。 3. 下载echarts.min.js,并将其保存到刚才创建的文件夹中。这样可以避免在加载时需要网络连接。 4. 在UE4中,打开Edit->Plugins,搜索并启用Web Browser插件。然后重启项目,这样在UI的Widget里就可以找到WebBrowser控件。 5. 将WebBrowser控件拖放到所需位置,并设置其坐标和大小。 6. 设置WebBrowser控件的Initial URL为要打开的网页链接,可以是本地文件或者远程链接。也可以在蓝图中动态地设置这个链接地址。 7. 运行项目,即可在UE4内展示ECharts定制好的统计图效果。 需要注意的是,Web页面不能设置style="height: 100%",否则会导致页面无法正常显示。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [UE4结合ECharts大数据可视化插件](https://blog.csdn.net/Highning0007/article/details/123019580)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [UE4 通过Echarts实现各种统计图](https://blog.csdn.net/qq_41410054/article/details/114656846)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值