echart4.0 share dataset 中为什么要在setTimeout中执行setOption?

Question

问题描述

在vue中使用echart4.0官方示例中share dataset时，通过监听updateAxisPointer事件来更新上面的饼图，但是发现有时候，饼图的label数据更新了，但是图却还没有重绘，可是鼠标移到下面柱图的区域外时，饼图又会重绘好。我在官方示例的代码里，看到有用过setTimeout函数，不知道这是不是问题的关键。

问题出现的环境背景及自己尝试过哪些方法

vue2.5.16 echart4.1.0
这里我是把echart封装成一个组件，然后再在其他的地方进行调用，如下的echart.vue和dashboard-barpie.vue

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
// echart.vue

this.myChart.on("updateAxisPointer", event => { 
  var xAxisInfo = event.axesInfo[0];
  if (xAxisInfo) {
    this.$emit("change-barpie", xAxisInfo);
  }
});

// dashboard-barpie.vue

<echart :options="option" :chartID="chartID" ref="dashboard_barpie_chart" :height="height" v-on:change-barpie="changeBarpie" :chartType="'dashboard-barpie'"></echart>

changeBarpie(xAxisInfo) {
  var dimension = xAxisInfo.value + 1;
  this.$refs.dashboard_barpie_chart.setOption({
    series: {
      id: "pie",
      label: {
        formatter: "{b}: {@[" + dimension + "]} ({d}%)"
      },
      encode: {
        value: dimension,
        tooltip: dimension
      }
    }
  });
}

你期待的结果是什么？实际看到的错误信息又是什么？

这是鼠标悬浮在中间那个柱形区域时，饼图的label数据有更新，但是饼图明显没有重绘

这个是当鼠标移出柱形区域时，饼图又重新绘制

Answer 1

1. 他官网写的代码比较随意吧
2. 没有说必须要在setTimeout里面执行（但是事件监听和事件事件响应就另当别论了）
3. 关于你提问中的重绘问题，你得考虑下是否是你代码逻辑有问题导致得重绘延迟?官网得例子我试过了，你要不要setTimeout都没问题，只要你在图表区域移动鼠标或者悬停鼠标，updateAxisPointer事件会一直不停得响应和执行造成得结果就是，pie一直不间断得重绘，造成严重得性能浪费。
4. 至于验证你只需要在事件监听得回调里面加一个console.log('update event ....')你就能看到，无数次无数次得对触发以及触发后对pie得重绘
5. 为什么会出现setTimeout我估计原作者得目的是对updateAxisPointer事件进行处理(比如1秒内触发了100次，但是只执行一次回调处理，重绘一次pie，而不是触发多少次，重绘多少次)，但是他代码并没有写完，造成了你得这种错觉。
6. 我是怎么解决这个问题得

// 利用 lodash 的 debounce 进行处理，每间隔 .5 秒才真正处理一次事件，而不是事件只要一触发就立即执行。
this.v_rent_statistics_chart.on('updateAxisPointer', this._f.debounce(function (event) {
    console.log('更新pie...')
    let xAxisInfo = event.axesInfo[0]
    if (xAxisInfo) {
      let dimension = xAxisInfo.value + 1
      __this.v_rent_statistics_chart.setOption({
        series: {
          id: 'pie',
          encode: {
            value: dimension,
            tooltip: dimension
          }
        }
      })
    }
}, 500))

当然仅限个人理解。