[Feature] line chart animationDurationUpdate did not work when update data

[minghangben]

What problem does this feature solve?

dear developer

How to add animation when update data, just like this

i use animationDurationUpdate but did not work

What does the proposed API look like?

const categories2 = (function () {
  let res = [];
  let len = 10;
  while (len--) {
    res.push(10 - len - 1);
  }
  return res;
})();
const data2 = (function () {
  let res = [];
  let len = 0;
  while (len < 10) {
    res.push(+(Math.random() * 10 + 5).toFixed(1));
    len++;
  }
  return res;
})();
option = {
  title: {
    text: 'Dynamic Data'
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#283b56'
      }
    }
  },
  legend: {},
  toolbox: {
    show: true,
    feature: {
      dataView: { readOnly: false },
      restore: {},
      saveAsImage: {}
    }
  },
  dataZoom: {
    show: false,
    start: 0,
    end: 100
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: true,
      data: categories2
    }
  ],
  yAxis: [
    {
      type: 'value',
      scale: true,
      name: 'Order',
      boundaryGap: [0.2, 0.2]
    }
  ],
  series: [
    {
      name: 'Dynamic Line',
      type: 'line',
      data: data2
    }
  ],
  animationDelayUpdate: 900
};
app.count = 11;
setInterval(function () {
  let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
  data2.shift();
  data2.push(+(Math.random() * 10 + 5).toFixed(1));
  categories2.shift();
  categories2.push(app.count++);
  myChart.setOption({
    xAxis: [
      {
        data: categories2
      }
    ],
    series: [
      {
        data: data2
      }
    ]
  });
}, 2100);

[helgasoft]

see Example

[HenryDF2022]

It's not work, when xAxis.max is a dynamic value, such as update by setOption or just use function return value.max + 1000.

[helgasoft]

see #18742