echarts折线图月份数据不足自动补0和日期达到数据连续的效果(最新推荐)

更新时间：2024年03月14日 10:35:17 作者：请叫我欧皇i

这篇文章主要介绍了echarts折线图月份数据不足自动补0和日期达到数据连续的效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

1.错误展示

如果这个月为0的数据后端没传，那么图片不能展示这个月所有的数据，会导致折线图不直观

  // 模拟后端数据
            let result = [
                {
                    date: '2023-11-01',
                    value: 3200
                },
                {
                    date: '2023-11-11',
                    value: 6850
                }
            ];

2.正确效果

3.代码讲解

3.1思路

默认请求后端接口肯定是当月的数据，当月的格式应该为2024-03按照年和月去请求

    var date = new Date();
    const year = date.getFullYear();
    const month = date.getMonth() + 1;
    this.monthFlow = `${year}-${month}`;

获取到当月的天数，如果想获取其他月的天数可以通过var today = new Date('2023-12');

            // 得到这个月的总天数
            var lastDay = new Date(year, month + 1, 0).getDate();
            console.log(lastDay, '当月的天数');

之后通过linq插件实现，下载并且在页面导入

//下载
npm install linq
//导入
import Linq from "linq";

通过for循环当月的天数，之后判断2024-01-23，中的23是不是等于当天，如果等于就把数据填充，如果不等于也就是这天没有数据，那么就自动补0，最后通过sendMonthOption变量接收数据，这个日期当日可以是动态的，根据实际数据进行更改

    for (var i = 1; i <= lastDay; i++) {
                //  new Date(x.date).getDate()获取到数据的日期，如果为01，则为1，并且是数字类型
                let count = Linq.from(result)
                    .where((x) => new Date(x.date).getDate() == i)
                    .toArray();
                if (count.length > 0) {
                    this.sendMonthOption.xAxis.push(count[0].date);
                    this.sendMonthOption.seriesData.push(count[0].value);
                } else {
                    this.sendMonthOption.xAxis.push(`2023-11-${i}`);
                    this.sendMonthOption.seriesData.push(0);
                }
            }

4.完整代码

<template>
    <div id="month" ref="bin" style="width: 500px; height: 300px; margin-top: 0.125rem"></div>
</template>
<script>
import * as echarts from 'echarts';
import Linq from 'linq';
export default {
    data() {
        return {
            sendMonthOption: {
                xAxis: [],
                seriesData: []
            }
        };
    },
    mounted() {
        this.play_echarts();
    },
    methods: {
        play_echarts() {
            // 假如是当月的数据查询
            var today = new Date();
            // 获取到年月
            var year = today.getFullYear();
            var month = today.getMonth();
            // 得到这个月的总天数
            var lastDay = new Date(year, month + 1, 0).getDate();
            console.log(lastDay, '当月的天数');
            // 模拟后端数据
            let result = [
                {
                    date: '2023-11-01',
                    value: 299
                },
                {
                    date: '2023-11-11',
                    value: 35
                }
            ];
            for (var i = 1; i <= lastDay; i++) {
                //  new Date(x.date).getDate()获取到数据的日期，如果为01，则为1，并且是数字类型
                let count = Linq.from(result)
                    .where((x) => new Date(x.date).getDate() == i)
                    .toArray();
                if (count.length > 0) {
                    this.sendMonthOption.xAxis.push(count[0].date);
                    this.sendMonthOption.seriesData.push(count[0].value);
                } else {
                    this.sendMonthOption.xAxis.push(`2023-11-${i}`);
                    this.sendMonthOption.seriesData.push(0);
                }
            }
            var pieChart = echarts.init(this.$refs.bin);
            var option = {
                backgroundColor: '#05224d',
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                grid: {
                    top: '15%',
                    left: '3%',
                    right: '5%',
                    bottom: '8%',
                    containLabel: true
                },
                // 内置区域缩放
                //数据过多避免重叠
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            //坐标轴轴线相关设置。数学上的x轴
                            show: true,
                            lineStyle: {
                                color: '#f9f9f9'
                            }
                        },
                        axisLabel: {
                            //坐标轴刻度标签的相关设置
                            color: '#d1e6eb'
                            //   margin: 15,
                        },
                        axisTick: {
                            show: false
                        },
                        data: this.sendMonthOption.xAxis
                    }
                ],
                dataZoom: [
                    {
                        type: 'inside' // 使用滑动条型的 dataZoom
                    }
                ],
                yAxis: [
                    {
                        type: 'value',
                        min: 0,
                        // max: 140,
                        splitNumber: 7,
                        splitLine: {
                            show: true,
                            lineStyle: {
                                color: '#0a3256'
                            }
                        },
                        axisLine: {
                            show: false
                        },
                        axisLabel: {
                            margin: 20,
                            color: '#d1e6eb'
                        },
                        axisTick: {
                            show: false
                        }
                    }
                ],
                series: [
                    {
                        type: 'line',
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                                {
                                    offset: 0,
                                    color: '#0ec1ff'
                                },
                                {
                                    offset: 1,
                                    color: '#1cfffb'
                                }
                            ])
                        },
                        data: this.sendMonthOption.seriesData
                    }
                ]
            };
            // 使用刚指定的配置项和数据显示图表。true是为了实时更新数据
            pieChart.setOption(option, true);
            window.addEventListener('resize', function () {
                pieChart.resize();
            });
            //   pieChart.on(
            //     "touchmove",
            //     function (e) {
            //       e.preventDefault();
            //     },
            //     { passive: false }
            //   );
        }
    }
};
</script>
<style lang="scss" scoped></style>

到此这篇关于echarts折线图月份数据不足自动补0和日期达到数据连续的效果的文章就介绍到这了,更多相关echarts折线图月份内容请搜索程序员之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持程序员之家！

您可能感兴趣的文章:

MUI 上拉刷新/下拉加载功能实例代码
这篇文章主要介绍了MUI 上拉刷新/下拉加载功能实例代码，包括一些个人心得，非常不错，具有参考借鉴价值，需要的的朋友参考下吧
2017-04-04
输入密码检测大写是否锁定js实现代码
网站登录为了更好的用户体验都会在输入密码的时候检测是否开启大写，这样有助于提醒用户,需要学习的朋友可以参考下
2012-12-12
JavaScript TAB栏切换效果的示例
这篇文章主要介绍了JavaScript TAB栏切换效果的示例，帮助大家更好的理解和使用JavaScript，感兴趣的朋友可以了解下
2020-11-11
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
这篇文章主要介绍了JS遍历JSON数组及获取JSON数组长度操作,涉及javascript简单json数组遍历与运算相关操作技巧,需要的朋友可以参考下
2018-12-12
Ajax提交与传统表单提交的区别说明
本篇文章主要是对Ajax提交与传统表单提交的区别进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-02-02
js断点调试心得分享(必看篇)
下面小编就为大家分享一篇js断点调试心得，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
js实现表单多按钮提交action的处理方法
这篇文章主要介绍了js实现表单多按钮提交action的处理方法，需要的朋友可以参考下
2015-10-10
详解如何解决使用JSON.stringify时遇到的循环引用问题
这篇文章主要介绍了详解如何解决使用JSON.stringify时遇到的循环引用问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
QQ强制聊天功能代码(加强版，兼容QQ2010)
QQ强制聊天功能代码,程序员之家以前也发布过，但已经不能用了，这个是新版本，经过测试，完全兼容新版本的qq.
2010-06-06
node.js的事件机制
本文主要介绍了node.js的事件机制，具有很好的参考价值，下面跟着小编一起来看下吧
2017-02-02