快速移动鼠标触发问题及解决方法(ECharts外部调用保存为图片操作及工作流接线mouseenter和mouseleave)

基本概念

快速移动鼠标触发问题是指在一些情况下，当用户在浏览器界面上快速移动鼠标时，会触发一些意料之外的行为。而 ECharts 在外部调用、保存为图片操作及工作流接线等情况下也可能出现这个问题。

问题产生原因

快速移动鼠标触发问题产生的原因是因为浏览器支持一种称为“快速点击”的机制，就是当用户快速移动鼠标时，会先生成一个 mouseenter 事件，然后通过快速的移动鼠标和点击触发出多次 mouseenter 和 mouseleave 事件同时出现。如果外部调用 ECharts 时未进行相应处理，就会出现不可预见的结果。

解决方法

为了避免这种情况，可以通过以下两种方法解决快速移动鼠标触发问题。

方法一

可以在 option 配置项中声明 silent 属性为 true 来避免默认触发 mouseenter 和 mouseleave 事件，这种方式适用于 ECharts 内部调用情况。

示例代码：

option = {
  tooltip: {
    show: true
  },
  series: {
    type: 'scatter',
    data: [...],
    silent: true // 禁止默认鼠标事件
  }
};

方法二

另一种方法是在外部调用 ECharts 时，覆盖掉原始的 dispatchAction 方法，进行相应的处理来避免快速移动鼠标触发问题。

示例代码：

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

myChart.getZr().on('mousedown', function () {
  // 通过覆盖原生的 dispatchAction 方法来避免快速移动鼠标触发问题
  myChart.getZr().handler.dispatchAction = function (payload, silent) {
    silent = typeof silent === 'undefined' ? false : silent;

    if (payload) {
      var originalDispatch = function () {
            myChart.getZr().handler.origDispatchAction.call(myChart.getZr().handler, payload, silent);
      };

      if ((payload.type === 'highlight' || payload.type === 'downplay')
          && payload.seriesIndex != null) {
        originalDispatch();
      } else if (payload.type === 'select' || payload.type === 'mapSelect'
          || payload.type === 'mapUnSelect' || payload.type === 'geoSelect'
          || payload.type === 'geoUnSelect') {
        originalDispatch();
      } else if (payload.type === 'mouseout' || payload.type === 'globalout') {
        originalDispatch();
      } else {
        // 避免快速移动鼠标触发问题，通过 setTimeout 延时处理
        setTimeout(originalDispatch, 1000 / 60);
      }
    }
  };
});

方法二会通过覆盖 dispatchAction 方法来解决快速移动鼠标触发问题，其中 setTimeout 的延时时间可以自行设置，建议设置为 16ms（即一个浏览器渲染帧的时间）或者更短的时间。

总结

以上就是解决快速移动鼠标触发问题的两种方法，可以根据具体情况选择使用。方法一适用于 ECharts 内部调用，方法二适用于外部调用。需要注意的是，方法二需要在覆盖 dispatchAction 方法时进行相应的处理，否则会出现不可预见的结果。