Echarts中折线图如何实现曲线是光滑的？

最新推荐文章于 2024-10-02 15:13:13 发布

澜岚伊人

最新推荐文章于 2024-10-02 15:13:13 发布

阅读量1.2w

点赞数 2

分类专栏： Echarts

本文链接：https://blog.csdn.net/qq_36275889/article/details/83508149

版权

Echarts 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

摘要：最近也许总结Echarts和原生JS结合的知识会比较多点，因为最近在做大数据的开发。以前很多项目没总结的习惯，做完东西很多知识都忘记了。所以现在坚持写总结了。

需求：以前我实现的折线图曲线并没有要求是光滑的曲线，下面是如何实现折线图是光滑的曲线的。

实现：

1、先直接上代码了，代码中详细的注释呢

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>echarts光滑折线图</title>
    <style>
        .centerItem {
            width: 856px;
            height: 640px;
            /* background-color: lightskyblue; */
            border: 1px solid #ccc;
            margin: 110px auto 0 auto;
        }
    </style>
</head>

<body>
    <!-- 折线展示 -->
    <div id="zxBox" class="centerItem"></div>

    <!-- 引入相关文件 -->
    <script src="js/jquery-3.2.1.min.js"></script>
    <!-- 引入 ECharts 文件 -->
    <script src="js/echarts.js"></script>

    <script>
        // 基于准备好的dom，初始化echarts实例
        var zxBoxEchart = echarts.init(document.getElementById('zxBox'));
        // 指定相关的配置项和数据
        var zxBoxOption = {
            // 图例
            legend: {
                data: ['吃饺子', '吃面', '吃饭'],
                icon: 'rect',
                top: 22,
                right: 24,
                itemGap: 15,
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    // padding: [0, 0, 0, 5],
                    color: 'rgba(255,255,255,0.87)'
                }
            },
            //鼠标滑过展示数据
            // tooltip: {
            //     trigger: 'item',
            //     backgroundColor: 'rgba(0,0,0,.3)',
            //     textStyle: {
            //         color: 'rgb(255,255,255)'
            //     },
            // },
            color: ['#289df5', '#fbc01b', '#ff5050'],
            grid: {
                left: 24,
                right: '6%',
                bottom: '30',
                containLabel: true
            },
            // X轴样式
            xAxis: {
                type: 'category',
                /*
                    // axisLine坐标轴轴线相关设置:
                    axisLine:{
                        show: false, // 不显示x轴
                        symbol:[ default: 'none' ], // 可以是字符串，表示两端使用同样的箭头；或者长度为 2 的字符串数组，分别表示两端的箭头。默认不显示箭头，即 'none'。两端都显示箭头可以设置为 'arrow'，只在末端显示箭头可以设置为 ['none', 'arrow']。
                        // axisLine坐标轴轴线样式设置
                        lineStyle:{
                            color：'#333', // 坐标轴轴线颜色设置
                            width:1, // 坐标轴线线宽。
                        }
                    },
                    axisTick:{} // 坐标轴刻度相关设置。
                    ***********************************************data[i] // 类目数据*****************************************************************
                    data[i] // 类目数据，在类目轴（type: 'category'）中有效。如果没有设置 type，但是设置了 axis.data，则认为 type 是 'category'。使用案例如下
                    // 所有类目名称列表
                    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
                    // 每一项也可以是具体的配置项，此时取配置项中的 `value` 为类目名
                    data: [{
                        value: '周一',
                        // 突出周一
                        textStyle: {
                            fontSize: 20,
                            color: 'red'
                        }
                    }, '周二', '周三', '周四', '周五', '周六', '周日']
                    *************************************************splitLine****************************************************************************
                    splitLine:{}//坐标轴在 grid 区域中的分隔线。

                    splitLine:{
                        lineStyle:{color: ['#aaa', '#ddd']}
                    }
                */
                axisLine: {
                    show: false
                },
                axisTick: {
                    length: 0 // 刻度线的长度
                },
                axisLabel: {
                    interval: 0, // 坐标轴刻度标签的显示间隔，在类目轴中有效。
                    textStyle: {
                        color: '#00c5d7'
                    }
                },
                name: '(时)',
                nameTextStyle: {
                    padding: [24, 0, 0, 0],
                    color: '#00c5d7'
                },
                nameGap: 0,
                data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '20', '23']
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    length: 0 // 刻度线的长度
                },
                splitLine: {
                    lineStyle: {
                        // color: ["#051d5f"],
                        color: ['#094386'],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#a3a4b2'
                    }
                }
            },
            series: [{
                name: '吃饺子',
                type: 'line',
                symbol: 'circle', // 拐点类型
                smooth: true, // 当为true时，就是光滑的曲线（默认为true）；当为false，就是折线不是曲线的了，那这个设为true，下面的（吃饭）数据中设置smooth为false，这个就不是光滑的曲线了。
                symbolSize: 3, // 拐点圆的大小
                itemStyle: {
                    normal: {
                        color: '#0bb6db', // 折线条的颜色
                        borderColor: '#0bb6db', // 拐点边框颜色
                    }
                },
                data: ['162', '192', '140', '182', '162', '209', '186', '178', '230', '196', '219', '234', '256', '201', '172', '182', '192', '168', '176', '189', '167', '174', '152', '162', '182', '162']
            }, {
                name: '吃面',
                type: 'line',
                symbol: 'circle', // 拐点类型
                smooth: true,
                symbolSize: 3, // 拐点圆的大小
                itemStyle: {
                    normal: {
                        color: '#fbc016', // 折线条的颜色
                        borderColor: '#fbc016', // 拐点边框颜色
                    }
                },
                data: ['142', '152', '120', '152', '192', '179', '146', '158', '150', '126', '179', '204', '186', '177', '192', '182', '162', '178', '240', '209', '187', '164', '192', '182', '152', '92']
            }, {
                name: '吃饭',
                type: 'line',
                symbol: 'circle', // 拐点类型
                smooth: false,
                symbolSize: 3, // 拐点圆的大小
                itemStyle: {
                    normal: {
                        color: '#ff5050', // 折线条的颜色
                        borderColor: '#ff5050', // 拐点边框颜色
                    }
                },
                data: ['92', '72', '80', '92', '60', '89', '82', '68', '98', '86', '79', '84', '76', '87', '62', '72', '82', '98', '86', '79', '87', '74', '82', '62', '82', '62']
            }]
        };
        // 使用制定的配置项和数据显示图表
        zxBoxEchart.setOption(zxBoxOption);
        // echart图表自适应
        window.addEventListener("resize", function() {
            zxBoxEchart.resize();
        });
    </script>

</body>

</html>

效果如下：