欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

echarts折線圖月份數(shù)據(jù)不足自動補0和日期達到數(shù)據(jù)連續(xù)的效果(最新推薦)

 更新時間：2024年03月14日 10:35:17   作者：請叫我歐皇i  
這篇文章主要介紹了echarts折線圖月份數(shù)據(jù)不足自動補0和日期達到數(shù)據(jù)連續(xù)的效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧

需求：查詢一個月的數(shù)據(jù)，但是有些數(shù)據(jù)為0，后端沒傳，所以要前端進行操作，把沒傳的數(shù)據(jù)進行補0填充達到月數(shù)據(jù)完整效果

1.錯誤展示

如果這個月為0的數(shù)據(jù)后端沒傳，那么圖片不能展示這個月所有的數(shù)據(jù)，會導致折線圖不直觀

  // 模擬后端數(shù)據(jù)
            let result = [
                {
                    date: '2023-11-01',
                    value: 3200
                },
                {
                    date: '2023-11-11',
                    value: 6850
                }
            ];

2.正確效果

3.代碼講解

3.1思路

默認請求后端接口肯定是當月的數(shù)據(jù)，當月的格式應該為2024-03按照年和月去請求

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

 獲取到當月的天數(shù)，如果想獲取其他月的天數(shù)可以通過var today = new Date('2023-12');

            // 得到這個月的總天數(shù)
            var lastDay = new Date(year, month + 1, 0).getDate();
            console.log(lastDay, '當月的天數(shù)');

 之后通過linq插件實現(xiàn)，下載并且在頁面導入

//下載
npm install linq
//導入
import Linq from "linq";

 通過for循環(huán)當月的天數(shù)，之后判斷2024-01-23，中的23是不是等于當天，如果等于就把數(shù)據(jù)填充，如果不等于也就是這天沒有數(shù)據(jù)，那么就自動補0，最后通過sendMonthOption變量接收數(shù)據(jù)，這個日期當日可以是動態(tài)的，根據(jù)實際數(shù)據(jù)進行更改

    for (var i = 1; i <= lastDay; i++) {
                //  new Date(x.date).getDate()獲取到數(shù)據(jù)的日期，如果為01，則為1，并且是數(shù)字類型
                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() {
            // 假如是當月的數(shù)據(jù)查詢
            var today = new Date();
            // 獲取到年月
            var year = today.getFullYear();
            var month = today.getMonth();
            // 得到這個月的總天數(shù)
            var lastDay = new Date(year, month + 1, 0).getDate();
            console.log(lastDay, '當月的天數(shù)');
            // 模擬后端數(shù)據(jù)
            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()獲取到數(shù)據(jù)的日期，如果為01，則為1，并且是數(shù)字類型
                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
                },
                // 內置區(qū)域縮放
                //數(shù)據(jù)過多避免重疊
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            //坐標軸軸線相關設置。數(shù)學上的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
                    }
                ]
            };
            // 使用剛指定的配置項和數(shù)據(jù)顯示圖表。true是為了實時更新數(shù)據(jù)
            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折線圖月份數(shù)據(jù)不足自動補0和日期達到數(shù)據(jù)連續(xù)的效果的文章就介紹到這了,更多相關echarts折線圖月份內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

相關文章

最新評論