快捷導(dǎo)航

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

更新時(shí)間：2024年03月14日 10:35:17 作者：請(qǐng)叫我歐皇i

這篇文章主要介紹了echarts折線圖月份數(shù)據(jù)不足自動(dòng)補(bǔ)0和日期達(dá)到數(shù)據(jù)連續(xù)的效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧

1.錯(cuò)誤展示

如果這個(gè)月為0的數(shù)據(jù)后端沒(méi)傳，那么圖片不能展示這個(gè)月所有的數(shù)據(jù)，會(huì)導(dǎo)致折線圖不直觀

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

2.正確效果

3.代碼講解

3.1思路

默認(rèn)請(qǐng)求后端接口肯定是當(dāng)月的數(shù)據(jù)，當(dāng)月的格式應(yīng)該為2024-03按照年和月去請(qǐng)求

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

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

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

之后通過(guò)linq插件實(shí)現(xiàn)，下載并且在頁(yè)面導(dǎo)入

//下載
npm install linq
//導(dǎo)入
import Linq from "linq";

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

    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() {
            // 假如是當(dāng)月的數(shù)據(jù)查詢
            var today = new Date();
            // 獲取到年月
            var year = today.getFullYear();
            var month = today.getMonth();
            // 得到這個(gè)月的總天數(shù)
            var lastDay = new Date(year, month + 1, 0).getDate();
            console.log(lastDay, '當(dāng)月的天數(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
                },
                // 內(nèi)置區(qū)域縮放
                //數(shù)據(jù)過(guò)多避免重疊
                xAxis: [
                    {
                        type: 'category',
                        boundaryGap: true,
                        axisLine: {
                            //坐標(biāo)軸軸線相關(guān)設(shè)置。數(shù)學(xué)上的x軸
                            show: true,
                            lineStyle: {
                                color: '#f9f9f9'
                            }
                        },
                        axisLabel: {
                            //坐標(biāo)軸刻度標(biāo)簽的相關(guān)設(shè)置
                            color: '#d1e6eb'
                            //   margin: 15,
                        },
                        axisTick: {
                            show: false
                        },
                        data: this.sendMonthOption.xAxis
                    }
                ],
                dataZoom: [
                    {
                        type: 'inside' // 使用滑動(dòng)條型的 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
                    }
                ]
            };
            // 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。true是為了實(shí)時(shí)更新數(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>

到此這篇關(guān)于echarts折線圖月份數(shù)據(jù)不足自動(dòng)補(bǔ)0和日期達(dá)到數(shù)據(jù)連續(xù)的效果的文章就介紹到這了,更多相關(guān)echarts折線圖月份內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: