Echarts，每日一图——平滑折线图

最新推荐文章于 2025-04-01 15:40:49 发布

原创最新推荐文章于 2025-04-01 15:40:49 发布 · 5.9k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #html5 #echarts #大数据

Echarts，每日一图专栏收录该内容

5 篇文章

订阅专栏

本文介绍了如何使用Echarts创建平滑折线图，强调平滑折线图与基础折线图的区别在于series配置项中添加了smooth属性，该属性控制线条的平滑程度。通过示例代码和说明，帮助读者理解平滑折线图的实现，并提供了源代码下载链接，邀请读者加入学习课堂。

昨天跟大家讲了基础折线图，今天跟大家讲一下平滑折线图。效果如下：
在这里插入图片描述
我们可以看到，平滑折线图的线条是非常流畅的。其实如果昨天的基础折线图大家学会了的话，今天的平滑折线图是非常容易学的。
首先，我们先看一下代码：

//data.js
mydata(
{
    "data":[1,2,3,4,5],
    "zhi":[12,13,14,20,16]
}
)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>平滑折线图</title>
    <script src="../../js/echarts.min.js"></script>
</head>
<body>
    <div id="main" style="width: 600px;height: 300px;"></div>
    <script type="text/javascript">
        var mydata=function(data){
            var mycharts=echarts.init(document.getElementById("main"));
            var option={
                title:{
                    text:'测试'
                },
                tooltip:{},
                legend:{
                    data:['test']
                },
                xAxis:{
                    type:'category',        //坐标轴类型：类目轴
                    data:data.data
                },
                yAxis:{
                    type:'value'        //坐标轴类型：数值轴
                },
                series:[{
                    name:'test',
                    type:'line',
                    data:data.zhi,
                    smooth:true,        //平滑曲线图。值可为数字      
                }]
            };

            mycharts.setOption(option);
        }
    </script>
    <script src="data.js"></script>
</body>
</html>