echarts animation update not working on update

[impotazo2020]

Hello Team Echarts ,

Thank you for your hard work and innovative approaches in solving echarts issuses !
i m contacting you as i have a small issue with my echarts project,so without any further do i shall explain.
if you open the first file called first step you will see after i click on the Add 1 button a small chart is drawn ,but the problem is there is no animation transition ,not like when i initialise the data array in series objet !
same problem when i click on on any other button for adding a point of deleting one !
i will send also the code.

Thank you , and my Best Regards

<title>ECharts</title>

<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.0/echarts.min.js"
    integrity="sha512-ZRdjJAYP8Kij8Lkln9uiGj0jIrMDLAALm1ZB2b3VfV9XJ0nR4zbJmHKB42/A4tgMlZS4DTPnSAmcYRoS0dginA=="
    crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!--<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.0.0/echarts.min.js"
    integrity="sha512-ZRdjJAYP8Kij8Lkln9uiGj0jIrMDLAALm1ZB2b3VfV9XJ0nR4zbJmHKB42/A4tgMlZS4DTPnSAmcYRoS0dginA=="
    crossorigin="anonymous"></script>-->

<div id="parent">
    <div id="main" style="width: 100%;height:100vh"></div>
</div>
<!--<div><button class="btn btn-success" onclick="addData()">wala wala</button></div>-->
<div style="text-align: center;">
    <button class="btn btn-success" onclick="addData_1()">Add 1</button>
    <button class="btn btn-success" onclick="DeleteData_1()">Delete 1</button>
    <button class="btn btn-warning" onclick="addData_2()">Add 2</button>
    <button class="btn btn-warning" onclick="DeleteData_2()">Delete 2</button>
    <button class="btn btn-primary" onclick="addData_3()">Add 3</button>
    <button class="btn btn-primary" onclick="DeleteData_3()">Delete 3</button>
    <button class="btn btn-danger" onclick="addData_4()">Add 4</button>
    <button class="btn btn-danger" onclick="DeleteData_4()">Delete 4</button>
</div>
<script type="text/javascript">
    // based on prepared DOM, initialize echarts instance
    var myChart = echarts.init(document.getElementById('main'), null, { renderer: 'svg' });
    
    $(window).on('resize', function () {
        if (myChart != null && myChart != undefined) {
            myChart.resize();
        }
    });
    // specify chart configuration item and data
    var symbolSize = 1;
    var data = [];
    var points = [];

    option = {
        title: {
            text: 'Click to Add Points'
        },
        tooltip: {
            formatter: function (params) {
                var data = params.data || [0, 0];
                return data[0].toFixed(2) + ', ' + data[1].toFixed(2);
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            min: 0,
            max: 500,
            type: 'value',
            axisLine: { onZero: false },
            show: false
        },
        yAxis: {
            min: 0,
            max: 400,
            type: 'value',
            axisLine: { onZero: false },
            show: false
        },
        animation: true,

        animationThreshold: 2000,
        animationDuration: 1000,
        animationDurationUpdate: 1000,
        animationEasing: 'quadraticIn',

        animationDelayUpdate: 100,
        series: [
            {
                id: 'a',
                type: 'line',
                smooth: true,
                symbolSize: symbolSize,
                data: data,
                animation: true,

                animationThreshold: 2000,
                animationDuration: 1000,
                animationDurationUpdate: 1000,
                animationDelayUpdate: 1000,
                animationEasing: 'quadraticIn',
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(187,212,246)'
                    }, {
                        offset: 1,
                        color: 'rgb(248,251,254)'
                    }])
                }


            }
        ]

    };

    


    
    function addData_1() {
        if (data.length == 0) {
            data.push([0, 10]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
            data.push([100, 20]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }
    }
    function DeleteData_1() {
        data = [];

        myChart.setOption({
            series: [{
                id: 'a',
                data: data
            }]
        });

    }
    function addData_2() {
        if (data.length == 0) {
            data = [[0, 10], [100, 20], [200, 40]];

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }
        if (data.length == 2) {
            data.push([200, 40]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }
    }
    function DeleteData_2() {

        if (data.length >= 3) {
            data = [[0, 10], [100, 20]];
            

            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }
    function addData_3() {
        if (data.length == 0 || data.length == 2) {
            data = [[0, 10], [100, 20], [200, 40], [300, 70]];

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }

        if (data.length == 3) {
            data.push([300, 70]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }
    function DeleteData_3() {
        
        if (data.length >= 4) {
            data = [[0, 10], [100, 20], [200, 40]];
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }
    function addData_4() {
        if (data.length == 0 || data.length == 2 || data.length == 3) {
            data = [[0, 10], [100, 20], [200, 40], [300, 70], [400, 110]];

            myChart.setOption({
                series: [{
                    id: 'a',
                    type: 'line',
                    data: data
                }]
            });
        }
        if (data.length == 4) {
            data.push([400, 110]);

            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }
    }
    function DeleteData_4() {
        
        if (data.length >= 5) {
            data = [[0, 10], [100, 20], [200, 40], [300, 70]];
            myChart.setOption({
                series: [{
                    id: 'a',
                    data: data
                }]
            });
        }

    }
    
    // use configuration item and data specified to show chart
    myChart.setOption(option);
   // console.log(myChart._model.option);
</script>

<style> </style>