echarts教程（一）：如何使echarts折线图连线平滑

客官°小女子只卖身不卖艺 2022-10-29 15:23 450阅读 0赞

只需要在service中添加 `smooth: true`

完整示例代码

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',
            smooth: true
        }]
    };

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]

关键词 **`smooth`** 还有其他的值

当`type`为`line`时  
`smooth` 表示 是否平滑曲线显示。

如果是 boolean 类型，则表示是否开启平滑处理。如果是 number 类型（取值范围 0 到 1），表示平滑程度，越小表示越接近折线段，反之则反。设为 true 时相当于设为 0.5。

如果需要修改平滑算法，请参考 [smoothMonotone][]。

设置为1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70]: /images/20221024/3139b7c692af4f16912202746ecdce84.png
[smoothMonotone]: https://echarts.apache.org/zh/option.html#series-line.smoothMonotone
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2dpdGh1Yl8zNTYzMTU0MA_size_16_color_FFFFFF_t_70 1]: /images/20221024/28184b78d9a64c00904b6999efbe7ed9.png

发表评论取消回复

表情：

评论列表（有 0 条评论，450人围观）

还没有评论，来说两句吧...

相关阅读

相关 Echarts-折线图-多条线

//企业排名top5根据客车、货车 var optionTwo={

川长思鸟来/ 2023年10月17日 17:57/ 0 赞/ 46 阅读

相关 echarts折线图

记录echarts折现图配置我们先来看看效果图 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10

拼搏现实的明天。/ 2022年11月18日 13:44/ 0 赞/ 272 阅读

相关 ECharts绘制折线图

首先看实现好的页面 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4

太过爱你忘了你带给我的痛/ 2022年11月10日 14:25/ 0 赞/ 307 阅读

相关 echarts教程（三）：配置多条折线图

多条折线非常简单，只需要在series中写多个元素，并都指定type为line即可 option = { xAxis: {

忘是亡心i/ 2022年10月29日 15:24/ 0 赞/ 452 阅读

相关 echarts教程（一）：如何使echarts折线图连线平滑

只需要在service中添加 `smooth: true` 完整示例代码 option = { xAxis: { typ

客官°小女子只卖身不卖艺/ 2022年10月29日 15:23/ 0 赞/ 451 阅读

相关 Echarts折线图样式收集

效果图1： ![20210830112730906.png][] option:{ backgroundColor: "rgba(255,

妖狐艹你老母/ 2022年09月09日 06:22/ 0 赞/ 234 阅读

相关 echarts折线图实例一

1.先看看我们要的一个效果：在点击显示30天和显示2天，数据可以切换，并且另外还要加一个时间区域查询出来；接下来我贴一下具体的操作：![20170926122012950][]

- 日理万妓/ 2022年06月08日 12:54/ 0 赞/ 319 阅读

相关 echarts折线图案例基于echarts-plain.js

最近接触前端,要写个报表,但是由于公司用的是echarts-plain.js,导致我在网上找到的许多属性设置的东西由于就是不同而失去作用. 使用echarts-plain.

比眉伴天荒/ 2022年05月11日 18:04/ 0 赞/ 309 阅读

相关 echarts折线图

效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0J

我不是女神ヾ/ 2022年04月18日 04:09/ 0 赞/ 360 阅读

相关 ECharts之折线图

效果图 ![在这里插入图片描述][20190801172702725.gif] 背景图片 ![20190725170845879.png][] 下载EChar

ゝ一世哀愁。/ 2021年09月30日 05:00/ 0 赞/ 1234 阅读