Echart与UE4实时通讯

最新推荐文章于 2023-05-21 15:05:07 发布

手可摘星辰0120

最新推荐文章于 2023-05-21 15:05:07 发布

阅读量4k

点赞数 3

本文链接：https://blog.csdn.net/u014577128/article/details/123671901

版权

UE4 Echarts 图表控制数据交互网页集成

关键词由CSDN通过智能技术生成

功能：实现用UE4里的数据来控制Echart图表里的数据

示例中，从ue4读取数据，将数据拼接成URL格式的网址，将网址传入html，然后在html里对URL进行解析，获得图表所需数据，进而控制图表

1.创建html文件

保存格式UTF-8

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>统计图表</title>
  <script src="echarts.min.js"></script>
  <script src="getQueryVariable.js"></script>
</head>

<body style="overflow: hidden;">
  <!-- 页面主体部分 -->
  <div id="panel" style="position: absolute; width: 100%; height: 100%; 
      top: 50%; left: 50%; transform: translate(-50%, -50%); ">
  </div>
  <script>
    var myChart = echarts.init(document.getElementById("panel")); 
      var Angle = getQueryVariable("Angle");
    // 2. 指定配置项和数据
   
      option = {
          tooltip: {
              formatter: '{a} <br/>{b} : {c}%'
          },
          series: [
              {
                  name: 'Pressure',
                  type: 'gauge',
                  detail: {
                      formatter: '{value}'
                  },
                  animation: false,
                  layoutAnimation: false,
                  data: [
                      {
                          value: Angle.split(','),
                          name: 'SCORE'
                      }
                  ]
              }
          ]
      };
    // 3. 把配置项给实例对象
    myChart.setOption(option);
    // 4. 让图表跟随屏幕自动的去适应
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  </script>
</body>

</html>

2.下载Echart脚本文件

https://download.csdn.net/download/u014577128/85020582?spm=1001.2014.3001.5503

3.打开web Browser插件

4.创建蓝图UI

关卡蓝图

UI蓝图

5.实时运行结果

项目下载地址-见我的博客资源里

https://download.csdn.net/download/u014577128/85023763

手可摘星辰0120

关注

3
点赞
踩
25

收藏

觉得还不错? 一键收藏
打赏
3
评论
Echart与UE4实时通讯

功能：实现用UE4里的数据来控制Echart图表里的数据示例中，从ue4读取数据，将数据拼接成URL格式的网址，将网址传入html，然后在html里对URL进行解析，获得图表所需数据，进而控制图表1.创建html文件保存格式UTF-8<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" conten.
复制链接

扫一扫