echarts keyframeAnimation 如何去抖？

Question

这是我现在的效果，拖动时会抖动，并且点击图例后都会执行一次这个动画：

下面复现代码的gif图：

echarts 编辑器

// 覆盖就行

var categoryData = [];
var errorData = [];
var barData = [];
var dataCount = 10;
for (var i = 0; i < dataCount; i++) {
  var val = Math.random() * 1000;
  categoryData.push('category' + i);
  errorData.push([
    i,
    echarts.number.round(Math.max(0, val - Math.random() * 100)),
    echarts.number.round(val + Math.random() * 80)
  ]);
  barData.push(echarts.number.round(val, 2));
}
option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  title: {
    text: 'Error bar chart'
  },
  legend: {
    data: ['bar', 'error']
  },
  dataZoom: [
    {
      type: 'slider',
      start: 50,
      end: 70
    },
    {
      type: 'inside',
      start: 50,
      end: 70
    }
  ],
  xAxis: {
    data: categoryData
  },
  yAxis: {},
  series: [
    {
      type: 'bar',
      name: 'bar',
      data: barData,
      itemStyle: {
        color: '#77bef7'
      }
    },
    {
      type: 'custom',
      name: 'error',
      itemStyle: {
        borderWidth: 1.5
      },
      renderItem: function (params, api) {
        var xValue = api.value(0);
        var highPoint = api.coord([xValue, api.value(1)]);
        var lowPoint = api.coord([xValue, api.value(2)]);
        var halfWidth = api.size([1, 0])[0] * 0.1;
        var style = api.style({
          stroke: api.visual('color'),
          fill: undefined
        });
        return {
          type: 'group',
           keyframeAnimation: [
          {
            duration: 1000,
            keyframes: [
              {
                percent: 0,
                easing: 'sinusoidalInOut',
                scaleX: 0.1
              },
              {
                percent: 1,
                easing: 'sinusoidalInOut',
                scaleX: 1
              }
            ]
          }
        ],
          children: [
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: highPoint[0] - halfWidth,
                y1: highPoint[1],
                x2: highPoint[0] + halfWidth,
                y2: highPoint[1]
              },
              style: style
            },
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: highPoint[0],
                y1: highPoint[1],
                x2: lowPoint[0],
                y2: lowPoint[1]
              },
              style: style
            },
            {
              type: 'line',
              transition: ['shape'],
              shape: {
                x1: lowPoint[0] - halfWidth,
                y1: lowPoint[1],
                x2: lowPoint[0] + halfWidth,
                y2: lowPoint[1]
              },
              style: style
            }
          ]
        };
      },
      encode: {
        x: 0,
        y: [1, 2]
      },
      data: errorData,
      z: 100
    }
  ]
};

如何给这个动画去抖呢？

其次：

• 有更好的动画效果推荐吗？
• 点击图例后都会执行一次这个动画，这个怎么修改呢？