Echarts面积折线图如何实现？

最新推荐文章于 2024-05-06 10:19:58 发布

澜岚伊人

最新推荐文章于 2024-05-06 10:19:58 发布

阅读量1w

点赞数 3

分类专栏： Echarts

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

版权

Echarts 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

摘要：项目开发中有个面积折线图的界面

实现：直接上代码吧，哈哈，简单明了

<!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="mjBox" class="centerItem"></div>

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

    <script>
        // 基于准备好的dom，初始化echarts实例
        var mjBoxEchart = echarts.init(document.getElementById('mjBox'));
        // 指定相关的配置项和数据
        var mjBoxOption = {
            legend: {
                data: ['吃饭', '睡觉', '打豆豆'],
                icon: 'rect',
                top: 22,
                right: 24,
                itemGap: 15,
                itemWidth: 10,
                itemHeight: 10,
                textStyle: {
                    // padding: [0, 0, 0, 5],
                    color: 'rgba(0,0,0,0.87)'
                }
            },
            color: ['#289df5', '#fbc01b', '#ff5050'],
            grid: {
                left: 24,
                right: '6%',
                bottom: '30',
                containLabel: true
            },
            xAxis: {
                type: 'category',
                axisLine: {
                    show: false
                },
                axisTick: {
                    length: 0
                },
                axisLabel: {
                    interval: 0,
                    textStyle: {
                        color: '#00c5d7'
                    }
                },
                name: '(月)',
                nameTextStyle: {
                    padding: [24, 0, 0, 0],
                    color: '#00c5d7'
                },
                nameGap: 0,
                data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
            },
            yAxis: {
                type: 'value',
                axisLine: {
                    show: false
                },
                axisTick: {
                    length: 0 // 刻度线的长度
                },
                splitLine: {
                    lineStyle: {
                        color: ["#051d5f"],
                        width: 1,
                        type: 'solid'
                    }
                },
                axisLabel: {
                    textStyle: {
                        color: '#a3a4b2'
                    }
                }
            },
            series: [{
                name: '吃饭',
                type: 'line',
                smooth: true,
                symbol: 'circle', // 拐点类型
                symbolSize: 0, // 拐点圆的大小
                itemStyle: {
                    normal: {
                        color: '#289df5', // 折线条的颜色
                        borderColor: '#289df5', // 拐点边框颜色
                        areaStyle: {
                            type: 'default',
                            opacity: 0.1
                        }
                    }
                },
                data: [310, 212, 221, 154, 260, 430, 310, 110, 120, 210, 124, 60]
            }, {
                name: '睡觉',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 0,
                itemStyle: {
                    normal: {
                        color: '#fbc01b',
                        borderColor: '#fbc01b',
                        areaStyle: {
                            type: 'default',
                            opacity: 0.1
                        }
                    }
                },
                data: [151, 282, 151, 120, 120, 80, 130, 182, 234, 191, 90, 30]
            }, {
                name: '打豆豆',
                type: 'line',
                smooth: true,
                symbol: 'circle',
                symbolSize: 0,
                itemStyle: {
                    normal: {
                        color: '#ff5050',
                        borderColor: '#ff5050',
                        areaStyle: {
                            type: 'default',
                            opacity: 0.1
                        }
                    }
                },
                data: [120, 132, 70, 34, 60, 59, 140, 210, 124, 112, 23, 20]
            }]
        };
        // 使用制定的配置项和数据显示图表
        mjBoxEchart.setOption(mjBoxOption);
        // echart图表自适应
        window.addEventListener("resize", function() {
            zxBoxEchart.resize();
        });
    </script>

</body>

</html>

效果如下：

澜岚伊人

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
4
评论
Echarts面积折线图如何实现？

摘要：项目开发中有个面积折线图的界面实现：直接上代码吧，哈哈，简单明了&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;echarts面积折线图&lt;/title&gt; &lt;style&gt;
复制链接

扫一扫