ECharts如何设置折线图线条为平滑曲线而非直线

ECharts 原生提供对应配置项，无需额外插件即可实现你需要的、小数值差下也有自然弯曲感的平滑折线效果，具体配置方法如下：

• 开启平滑属性：在折线对应的series配置块中，将smooth参数设置为true即可启用基础平滑效果。如果需要调整曲线弯曲程度，可以给smooth传入0_{1之间的数值，数值越大曲线弧度越明显，想要修长舒展的效果一般设置为0.5}0.7即可。
• 约束平滑方向：搭配添加smoothMonotone: 'x'配置，该参数会约束曲线沿x轴方向保持单调性，既不会出现偏离真实数据点的多余抖动，也能让数值差距较小的线段拉出自然的弯曲弧度，不会显得平直僵硬。

最小可运行配置示例 #

const option = {
  xAxis: {
    type: 'category',
    data: [] // 替换为你自己的x轴分类数据
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      type: 'line',
      data: [], // 替换为你自己的折线数值数据
      smooth: 0.6, // 调整该值修改曲线弯曲度，范围0-1
      smoothMonotone: 'x'
    }
  ]
};

注意事项 #

• 不建议将smooth值设置为1，会导致曲线过度弯曲，偏离真实数据点造成视觉上的数据失真。
• 如果需要曲线和参考效果一样更有质感，可以在lineStyle中适当调整线条宽度、添加轻微阴影，进一步提升视觉效果。

内容的提问来源于stack exchange，提问作者Mert