Echarts 折线图(line) 平滑曲线单调性问题

问题

最近在使用echarts画折线图时，遇到一个奇怪的问题。在双曲线的line图中，曲线设置为平滑时，相邻两点的数值完全一致，但是曲线走向不相同

series: [
    {
        type: 'line',
        smooth: true,
        name: '折线1',
        data: [...],
        ...
    },
    {
        type: 'line',
        smooth: true,
        name: '折线2',
        data: [...],
        ...
    }
]

图如下：

x轴为20:30时

x轴为21:00时

从上图可以看到，在“20:30”和“21:00”时，两条折线的数值完全一致，但是在这两点之间，蓝色、紫色两条线的弧度不相同，蓝色比较平直，而紫色有向下凹陷的曲度。

解决

查看echarts文档，发现配置项series里有一个smoothMonotone属性。

smoothMonotone: 折线平滑后是否在一个维度上保持单调性

在series里加上smoothMonotone: 'x'，即可解决问题：

series: [
    {
        type: 'line',
        smooth: true,
        smoothMonotone: 'x',
        name: '折线1',
        data: [...],
        ...
    },
    {
        type: 'line',
        smooth: true,
        smoothMonotone: 'x',
        name: '折线2',
        data: [...],
        ...
    }
]

解决后的曲线图：

x轴为20:30时

x轴为21:00时