UE4 通过Echarts实现各种统计图

主要内容:

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

实现步骤:

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

3.创建UMG设计布局以及功能实现
UE4 通过Echarts实现各种统计图_第3张图片
SupportsTransparency:打勾就会使传进来的网页的背景透明,可以自定义网页背景,不勾就会是网页本来的背景
IntialURL:可填可不填,如果不填就看不到动画效果,如果要填就用浏览器打开html文件获取网页地址然后复制粘贴UE4 通过Echarts实现各种统计图_第4张图片
UE4 通过Echarts实现各种统计图_第5张图片UE4 通过Echarts实现各种统计图_第6张图片

UE4 通过Echarts实现各种统计图_第7张图片
4.最终效果以及下载地址(4.25)
UE4 通过Echarts实现各种统计图_第8张图片
链接:https://pan.baidu.com/s/1PFm8qTzM7-zqEFiv19NAuw
提取码:wrw2

你可能感兴趣的:(UE4,UMG,echarts,ue4,前端)