search

rrweb-io / rrweb

record and replay the web
https://www.rrweb.io/
MIT License
16.77k stars 1.43k forks source link

echarts图表会产生巨量的event #197

Open shmilyoo opened 4 years ago

shmilyoo commented 4 years ago

鼠标在echarts图表上移动时会产生非常多的event触发，但是这些触发其实是没有必要的。 有没有针对性的解决方法呢

Yuyz0112 commented 4 years ago

可以发一下产生的 event 的内容吗？

shmilyoo commented 4 years ago

可以发一下产生的 event 的内容吗？

随便在echarts上动一下鼠标都能产生好几个甚至十几个event，随便复制了几个

{"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":269,"attributes":{"style":"position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px sans-serif; padding: 5px; left: 514px; top: 267px; pointer-events: none;"}}],"removes":[],"adds":[]},"timestamp":1586419574133} {"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":269,"attributes":{"style":"position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px sans-serif; padding: 5px; left: 515px; top: 272px; pointer-events: none;"}}],"removes":[],"adds":[]},"timestamp":1586419574145} {"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":269,"attributes":{"style":"position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px sans-serif; padding: 5px; left: 515px; top: 280px; pointer-events: none;"}}],"removes":[],"adds":[]},"timestamp":1586419574158} {"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":269,"attributes":{"style":"position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px sans-serif; padding: 5px; left: 515px; top: 288px; pointer-events: none;"}}],"removes":[],"adds":[]},"timestamp":1586419574167} {"type":3,"data":{"source":0,"texts":[],"attributes":[{"id":269,"attributes":{"style":"position: absolute; display: none; border-style: solid; white-space: nowrap; z-index: 9999999; transition: left 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s, top 0.4s cubic-bezier(0.23, 1, 0.32, 1) 0s; background-color: rgba(50, 50, 50, 0.7); border-width: 0px; border-color: rgb(51, 51, 51); border-radius: 4px; color: rgb(255, 255, 255); font: 14px / 21px sans-serif; padding: 5px; left: 515px; top: 298px; pointer-events: none;"}}],"removes":[],"adds":[]},"timestamp":1586419574180}

shmilyoo commented 4 years ago

像是鼠标位置标记点的位置变化，虽然是 display:none 但是帧数非常高。 屏幕录制2020-04-0916 12 32

对应的html

截屏2020-04-0916 48 26
Yuyz0112 commented 4 years ago

恩，因为 DOM 的 style 在不断变化。

按现在的录制方式，能够保证回放的时候的还原度。也可以通过一些配置来减低还原时的效果，但是减少数据量。

你比较期望什么样的效果呢？比如是 tooltip 的移动看起来没那么流程（throttle 忽略一些 style 变化），或者是不需要看到 tooltip？

shmilyoo commented 4 years ago

至少对于这个tooltip来说， 明明没有显示，却产生了那么多的event数据，在用户端会产生很多发送服务器的请求。希望能减少echarts 上面移动鼠标带来的tooltip position change event。

WQHASH commented 4 years ago

为啥我使用， echarts 里的内容不能录制呀，只有鼠标经过图表后才会显示的 提示信息的才能被录进去

sunzhengxin92 commented 4 years ago

请问下echarts这个我这边录制出来回放的时候是空白的，想问下这个问题怎么解决呢

cgaof commented 4 years ago

@Yuyz0112 这边使用echarts 不能播放。只是展示鼠标经过的提示栏。 这个本地测试的代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/theme-chalk/index.css" rel="stylesheet">
  <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.13.2/index.js"></script>
  <link href="../dist/rrweb.min.css">
  </script>
  <script src="../dist/rrweb.js"></script>
  <script src="../dist/replay/rrweb-replay.js"></script>
  <link href="../dist/replay/rrweb-replay.min.css">
  <script src="https://cdn.bootcdn.net/ajax/libs/echarts/2.1.10/echarts-all.js"></script>
</head>

<body>
  <div id="app">
    <el-button id="load" value="record action" @click="handleRecord('record')">record</el-button>
    <el-button id="button2" value="replay action" @click="replay">replay</el-button>
  </div>

  <div id="main" style="width: 600px;height:400px;"></div>
  <div id="replaycontent"></div>
  <script type="module">
    var app=new Vue({
      el: '#app',
      data() {
        return {
          record: []
        }
      },
      methods: {
        handleSelectChange(v) {
          console.log('vvv',v);
        },
        handleRecord(type) {
          const that=this;
          rrweb.record({
            emit(event) {
              that[type].push(event);
            },
            recordCanvas: true,
          });
        },
        replay() {
          this.$nextTick(() => {
            let replayer=new rrwebReplay.Replayer(this.record,{
              root: document.getElementById("replaycontent"),
              width: 570,
              height: 570, // 可以自定义 DOM 元素
              UNSAFE_replayCanvas: true,
            });
            replayer.play()
          })
        }
      },

    })
    var myChart=echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option={
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      legend: {
        data: ['销量']
      },
      xAxis: {
        data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5,20,36,10,10,20]
      }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  </script>
</body>

</html>

直接用canvas 是可以使用的，

Yuyz0112 commented 4 years ago

@cgaof 谢谢反馈，我有时间的时候调查一下问题

cgaof commented 4 years ago

@cgaof 谢谢反馈，我有时间的时候调查一下问题

@Yuyz0112 调查出是什么原因了吗？

liyangda commented 3 years ago

请问下，livemode为true，涉及到了echarts，replay的时候就不正常了，这是需要设置什么吗？ demo：https://codesandbox.io/s/busy-driscoll-yeuq8

kido050313 commented 3 years ago

我这边录制echart的时候产生巨量数据，然后播放的时候卡住了，页面也因此阻塞了。报了这个。我播放的时候开启了UNSAFE_replayCanvas。 image