A loop occurs in the line chart.

[NeonPluto]

Version

5.1.2

Steps to reproduce

import * as echarts from 'echarts';

var chartDom = document.getElementById('main');
var myChart = echarts.init(chartDom, 'dark');
var option;

option ={
    "color": [
        "#4AC7B7",
        "#3398DB",
        "#E54545",
        "#86A6FC",
        "#85CAFF",
        "#6CE6DB",
        "#91E6B1",
        "#B7E697",
        "#F7E481",
        "#FFD578",
        "#FCA479",
        "#F7797B",
        "#F582AB",
        "#B891FA",
        "#B8BECC"
    ],
    "tooltip": {
        "trigger": "axis",
        "confine": "true",
        "axisPointer": {
            "type": "shadow"
        }
    },
    "grid": {
        "left": "1%",
        "right": "12%",
        "bottom": "1%",
        "top": "10%",
        "containLabel": true
    },
    "xAxis": {
        "type": "time",
        "splitLine": {
            "show": false
        },
        "axisLine": {
            "lineStyle": {
                "color": "white"
            }
        },
        "splitNumber": 3,
        "axisLabel": {}
    },
    "yAxis": [
        {
            "type": "value",
            "minInterval": 1,
            "min": 0,
            "max": 100,
            "axisLabel": {
                "color": "white"
            },
            "axisLine": {
                "lineStyle": {
                    "color": "white"
                }
            },
            "splitLine": {
                "show": false
            }
        }
    ],
    "series": [
        {
            "name": "6",
            "type": "line",
            "smooth": true,
            "barMaxWidth": 20,
            "showSymbol": false,
            "smoothMonotone": "x",
            "data": [
                [
                    1625688000000,
                    74
                ],
                [
                    1625707800000,
                    83
                ],
                [
                    1625709600000,
                    80
                ],
                [
                    1625711400000,
                    87
                ],
                [
                    1625713200000,
                    88
                ],
            ]
        }
    ]
};

option && myChart.setOption(option);
    

What is expected?

No loopback occurs in the line chart.

What is actually happening?

A loop occurs in the line chart.

[echarts-bot]

Hi! We've received your issue and please be patient to get responded. 🎉
The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe our mailing list.

Have a nice day! 🍵

[NeonPluto]

[susiwen8]

smoothMonotone affect it, in the case, you do not need smoothMonotone

[NeonPluto]

smoothMonotone affect it, in the case, you do not need smoothMonotone

I know it, and delete this param,but i want konw why when i set value is x and result is false,when i set value is y or default and result is true ?

[ptulou]

We upgraded from v4 to 5.2 and I believe we are running into this issue as well. smoothMonotone="x" used to prevent the smoothed line from doubling back on itself. Now it looks like the meaning has flipped. If we include smoothMonotone="x" it's allowed to loop back. If we take it out completely it works as it did in v4 with smoothMonotone set. If the behavior of this changed it does not appear the doc was updated accordingly, so I think this is probably a bug.

[echarts-bot]

This issue is labeled with priority: high, which means it's a frequently asked problem and we will fix it ASAP.

[ptulou]

We pulled down the new version and I'm still seeing the same behavior. This is our data with "smooth" set to true but smoothMonotone is not set at all:

This is the same data with smoothMonotone: 'x'

I'm thinking this is exactly backwards, but perhaps I am missing something? The behavior does not seem to match what's in the doc (https://echarts.apache.org/en/option.html#series-line.smoothMonotone), so I would think there's either a product bug or the doc should be updated to explain the behavior.

[pissang]

@ptulou Did you build from the latest source code?

[ptulou]

@pissang I simply pulled down the latest echarts (v5.2.2) from npm. From the release notes, I believe this change should have been in that version.

[pissang]

It's fixed in #16069 and will be included in the next release

[ptulou]

@pissang thank you! I see my mistake now. When I scanned the release notes I saw this fix and jumped to the conclusion that it was the same fix. [Fix] [line] fix smoothed line with duplicate points failed to draw #15942 (pissang). Oops! I'll check out the next release. Thanks for clarifying!