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    }  ]};

如何给这个动画去抖呢？

其次：

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

Answer 1

对于你的问题，我有以下建议：

1. 去抖动：
   在你的代码中，keyframeAnimation属性用于控制动画效果。你可以尝试调整动画的duration（持续时间）或者easing（加速方式）来优化动画效果，减少抖动现象。

例如，你可以尝试增加duration的值，让动画过程更长一些，从而减少抖动。另外，你也可以尝试调整easing属性，使用不同的加速方式来看看效果。

此外，还可以通过优化renderItem函数中的绘图逻辑来减少抖动。例如，可以尝试减少图形的复杂度、使用更简单的图形样式等。

2. 更好的动画效果：
   在ECharts中，有很多不同的动画效果可供选择。你可以参考ECharts的官方文档和示例，看看是否有更符合你需求的动画效果。
3. 点击图例后动画的修改：
   在你的代码中，图例（legend）的点击事件似乎没有进行相应的处理。你可以通过添加事件监听器来处理图例点击事件，并修改相应的动画效果。

例如，你可以在图例点击事件的处理函数中，根据点击的图例类型来控制相应的动画效果。如果你希望在点击图例后不执行动画，可以禁用动画效果或者修改动画的参数。

希望以上建议能够帮助到你！如果你还有其他问题，欢迎继续提问。