Echart与UE4实时通讯

Post author:xfxia
Post published:2023年9月1日
Post category:其他

功能：实现用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>