Line chart is not animated on init

[jeffrey-roosendaal]

For some reason, the 'line' type series is not animated upon init (I haven't checked for update).

You can easily test this with the echarts demo data, for example a simple line chart: https://ecomfe.github.io/echarts-examples/public/editor.html?c=line-simple

option = {
    xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [820, 932, 901, 934, 1290, 1330, 1320],
        type: 'line'
    }]
};

When copy-pasting this to a ngx-echarts options object, it works as intended, but no animation. Changing the type to something else (bar, pie, etc.) will immediately add an animation.

[xieziyu]

@JeffreyRoosendaal Thanks for reporting this issue. I've found the cause and will fix it soon.

[xieziyu]

Fixed in v3.0.1 and v2.1.1

[jeffrey-roosendaal]

@xieziyu I've updated ngx-echarts through npm. I'm on 3.2.0 now, and it seems this bug has returned.

When performing the same test as above (changing serie type from 'line' to 'bar') the animation works fine, so it seems (again) related to the line chart.

[xieziyu]

@JeffreyRoosendaal I can't reproduce this issue using 3.2.0. The line chart is animated in my demo project. But I guess it's something related to the [autoResize] feature. When the chart is resized immediately upon init, it's not animated.

[xieziyu]

@JeffreyRoosendaal I've published a new version v4.0.0. In this build, the chart won't be resized immediately after initialization. That might solve your problem.

[jeffrey-roosendaal]

@xieziyu Thanks for looking into it. I've updated my package to 4.0.0 and it still has this issue. As a local test, I've created a chart with both a bar and a line on the same yaxis, and the bar is animated on init, but the line is not.

It's not that much of a problem I guess, it still works fine without the animation, but it looked fancy though.

I don't know if I can replicate/isolate my code in StackBlitz, because it's used in a fairly large project. Are there any other people who reported something similar btw, or is it just me? Maybe It's conflicting somewhere with another package/lib?

[xieziyu]

@JeffreyRoosendaal Did you try to set a fixed height for the chart? I met similar case only when the chart was automatically resized after init. If you can reproduce the issue in StackBlitz, that will be very helpful. Anyway, I will keep an eye on it.

[jeffrey-roosendaal]

@xieziyu Yes, I've set a default height with [initOpts]. As a side note, you previously fixed the line animation, but I wasn't able to alter any of the animation (-speed, -duration, -easing, etc). So it was always a little buggy to start with. However the default was fine, and I never filed an issue for it.

I may create a StackBlitz later today, but it's really going to take a long time for me to isolate the code (and figure out how StackBlitz works).

[xieziyu]

@JeffreyRoosendaal Thank you. I think you can try to set default height by style or css instead of initOpts which would lead to an auto-resizing

[jeffrey-roosendaal]

@xieziyu I've removed the initOps, and used style="height: xxx" instead. Animation returned, and properties such as animationDuration also work now, thanks! :)